react-native-smart-file-viewer

About This Library

A React Native SmartFileViewer where you can preview all the file formats into one component without using different libraries for different files.

It supports following file formats :

• Images: JPEG, JPG, PNG, HEIC, GIF
• Documents: PDF, MS Word, Word (OpenXML), Plain Text, RTF, PowerPoint, PowerPoint (OpenXML), xls
• Videos: MP4, MPEG, AVI, MOV, QuickTime
• Audio: MP3, WAV, M4A, ogg
• Ensures comprehensive support for commonly used file formats across different media types.

Table Of Contents

1. Compatibility
2. Installation
3. Scope
4. Usage
5. Props

Compatibility

Compatible for both Android and iOS platforms running on react-native

version supported:

react-native > 0.71.x android version > 7.0 iOS version > 13.4

Installation

# Using npm
npm install smartFileViewer 

# or using yarn:
yarn add smartFileViewer

Scope

• Support Available for React Native Mobile Apps.

Usage

//Code Snippet will be present here

Basic Usage

	<SmartFileViewer
            source={source}
            containerStyle={{
              alignContent: 'center',
              alignItems: 'center',
              width: '90%',
              height: 700,
              justifyContent: 'center',
              alignSelf: 'center',
            }}
            imageProps={{resizeMode: 'contain', resizeMethod: 'auto'}}
            videoProps={{controls:false}}
            pdfProps={{
            singlePage: false,
            onPageChanged: (page: any, numberOfPages: any) => {
            console.log('page, numberOfPages', page, numberOfPages);
            },
            }}
        ></SmartFileViewer>

Props

Styling Props

| Property | Type | Default | Description | iOS | Android | Required | |---------------------|------------------------------------------------------------|----------|--------------------------------------------------|-----|---------|----------| | source | String | Not NULL | Source as a string | Yes | Yes | Yes | | containerStyle | StyleProp<ViewStyle> | undefined | Not NULL | Container style, you can pass style as props | Yes | Yes | No | | componentStyle | StyleProp<ViewStyle> & StyleProp<ImageStyle> | undefined | NULL | Component style, accepts multiple styles | Yes | Yes | No |

Common Props

| Property | Type | Default | Description | iOS | Android | Required | |---------------------|------------------------------------------------------------|----------|--------------------------------------------------|-----|---------|----------| | source | String | Not NULL | Source as a string | Yes | Yes | Yes |

Image Specific Props

| Property | Type | Default | Description | iOS | Android | Required | |---------------------|------------------------------------------------------------|----------|--------------------------------------------------|-----|---------|----------| | imageProps | RNImageProps | NULL | Image properties, accepts RNImageProps | Yes | Yes | No |

PDF Specific Props

| Property | Type | Default | Description | iOS | Android | Required | |---------------------|------------------------------------------------------------|----------|--------------------------------------------------|-----|---------|----------| | pdfProps | NativeProps | NULL | PDF properties, accepts NativeProps | Yes | Yes | No |

Video Specific Props

| Property | Type | Default | Description | iOS | Android | Required | |---------------------|------------------------------------------------------------|----------|--------------------------------------------------|-----|---------|----------| | videoProps | ReactVideoProps | NULL | Video properties, accepts ReactVideoProps | Yes | Yes | No |

Web View Props (Used for :- MS Word, Word (OpenXML), Plain Text, RTF, PowerPoint, PowerPoint (OpenXML), xls)

| Property | Type | Default | Description | iOS | Android | Required | |---------------------|------------------------------------------------------------|----------|--------------------------------------------------|-----|---------|----------| | customWebViewProps| WebViewProps | NULL | Custom WebView properties, accepts WebViewProps| Yes | Yes | No |