react-native-file-viewer
Native file viewer for react-native. Preview any type of file supported by the mobile device.
iOS: it uses QuickLook Framework
Android: it uses ACTION_VIEW
Intent to start the default app associated with the specified file.
Windows: Start the default app associated with the specified file.
Getting started
$ npm install react-native-file-viewer --save
or
$ yarn add react-native-file-viewer
Mostly automatic installation
$ react-native link react-native-file-viewer
Manual installation
iOS (CocoaPods)
Add the following to you Podfile:
pod 'RNFileViewer', :path => '../node_modules/react-native-file-viewer/ios`
iOS
- In XCode, in the project navigator, right click
Libraries
➜ Add Files to [your project's name]
- Go to
node_modules
➜ react-native-file-viewer
and add RNFileViewer.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNFileViewer.a
to your project's Build Phases
➜ Link Binary With Libraries
- Run your project (
Cmd+R
)
Android
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.vinzscam.reactnativefileviewer.RNFileViewerPackage;
to the imports at the top of the file - Add
new RNFileViewerPackage()
to the list returned by the getPackages()
method
-
Append the following lines to android/settings.gradle
:
include ':react-native-file-viewer'
project(':react-native-file-viewer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-file-viewer/android')
-
Insert the following lines inside the dependencies block in android/app/build.gradle
:
compile project(':react-native-file-viewer')
-
Copy android/src/main/res/xml/file_viewer_provider_paths.xml
to your project res/xml/
directory
-
Add the following lines to AndroidManifest.xml
between the main <application></application>
tag:
...
<application>
...
<provider
android:name="com.vinzscam.reactnativefileviewer.FileProvider"
android:authorities="${applicationId}.provider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_viewer_provider_paths"
/>
</provider>
</application>
....
Windows
Follow the instructions in the 'Linking Libraries' documentation on the react-native-windows GitHub repo. For the first step of adding the project to the Visual Studio solution file, the path to the project should be ../node_modules/react-native-file-viewer/windows/RNFileViewer/RNFileViewer.csproj
.
API
open(filepath: string, options?: Object): Promise<void>
Parameter | Type | Description |
---|
filepath | string | The absolute path where the file is stored. The file needs to have a valid extension to be successfully detected. Use react-native-fs constants to determine the absolute path correctly. |
options (optional) | Object | Some options to customize the behaviour. See below. |
Options
Parameter | Type | Description |
---|
displayName (optional) | string | Customize the QuickLook title (iOS only). |
showOpenWithDialog (optional) | boolean | If there is more than one app that can open the file, show an Open With dialogue box (Android only). |
showAppsSuggestions (optional) | boolean | If there is not an installed app that can open the file, open the Play Store with suggested apps (Android only). |
Usage
Open a local file
import FileViewer from 'react-native-file-viewer';
const path =
FileViewer.open(path)
.then(() => {
})
.catch(error => {
});
Prompt the user to choose an app to open the file with (if there are multiple installed apps that support the mimetype)
import FileViewer from 'react-native-file-viewer';
const path =
FileViewer.open(path, { showOpenWithDialog: true })
.then(() => {
})
.catch(error => {
});
Open a file from Android assets folder
Since the library works only with absolute paths and Android assets folder doesn't have any absolute path, the file needs to be copied first. Use copyFileAssets of react-native-fs.
Example (using react-native-fs):
import FileViewer from 'react-native-file-viewer';
import RNFS from 'react-native-fs';
const file = 'file-to-open.doc';
const dest = `${RNFS.DocumentDirectoryPath}/${file}`;
RNFS.copyFileAssets(file, dest)
.then(() => FileViewer.open(dest))
.then(() => {
})
.catch(_err => {
});
Download and open a file (using react-native-fs)
No function about file downloading has been implemented in this package.
Use react-native-fs or any similar library for this purpose.
Example (using react-native-fs):
import RNFS from 'react-native-fs';
import FileViewer from 'react-native-file-viewer';
import { Platform } from 'react-native';
function getLocalPath (url) {
const filename = url.split('/').pop();
return `${RNFS.DocumentDirectoryPath}/${filename}`;
}
const url = 'https://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf';
const localFile = getLocalPath(url);
const options = {
fromUrl: url,
toFile: localFile
};
RNFS.downloadFile(options).promise
.then(() => FileViewer.open(localFile))
.then(() => {
})
.catch(error => {
});