react-native-file-viewer-turbo

Since the original react-native-file-viewer is no longer maintained, I decided to fork it and update it to work with the latest React Native versions.

This native file viewer for React Native utilizes the QuickLook Framework on iOS and the ACTION_VIEW intent to launch the default app associated with the specified file on Android. It now features TurboModules and Expo support while maintaining backward compatibility with Legacy Native Modules.

While most of the code remains the same as the original library, I implemented several changes to enhance the overall UI/UX and ensure proper handling of asynchronous logic by using promises instead of EventEmitters where applicable.

Compatibility

This library requires React Native 0.76.3 or newer. It is compatible with Expo SDK 52 or newer.

Expo

Installation

1npx expo install react-native-file-viewer-turbo

Add plugin to your app.json or app.config.js with preferred mimeTypes (it will modify AndroidManifest.xml as described below in extra step for Android section):

1{
2  "plugins": [
3    [
4      "react-native-file-viewer-turbo",
5      {
6        "mimeTypes": [
7          "*/*"
8        ]
9      }
10    ]
11  ]
12}

Bare React Native

Installation

1npm install react-native-file-viewer-turbo
2OR
3yarn add react-native-file-viewer-turbo
4
5cd ios && pod install

Extra step (Android only)

If your app is targeting Android 11 (API level 30) or newer, the following extra step is required, as described in Declaring package visibility needs and Package visibility in Android 11.

Specifically:

If your app targets Android 11 or higher and needs to interact with apps other than the ones that are visible automatically, add the element in your app's manifest file. Within the element, specify the other apps by package name, by intent signature, or by provider authority, as described in the following sections.

For example, if you know upfront that your app is supposed to open PDF files, the following lines should be added to your AndroidManifest.xml.

1    ...
2  </application>
3+ <queries>
4+   <intent>
5+     <action android:name="android.intent.action.VIEW" />
6+     <!-- If you don't know the MIME type in advance, set "mimeType" to "*/*". -->
7+     <data android:mimeType="application/pdf" />
8+   </intent>
9+ </queries>
10</manifest>

API

open(filepath: string, options?: Options): 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 expo-file-system constants to determine the absolute path correctly.
options (optional)	Object	Some options to customize the behaviour. See below.

Options

Parameter	Type	Platform	Description
displayName (optional)	string	iOS	Customize the QuickLook title
doneButtonTitle (optional)	string	iOS	Customize UINavigationController Done button title
onDismiss (optional)	function	iOS, Android	Callback invoked when the viewer is being dismissed
showOpenWithDialog (optional)	boolean	Android	If there is more than one app that can open the file, show an Open With dialogue box
showAppsSuggestions (optional)	boolean	Android	If there is not an installed app that can open the file, open the Play Store with suggested apps

IMPORTANT: Try to be as granular as possible when defining your own queries. This might affect your Play Store approval, as mentioned in Package visibility filtering on Android.

If you publish your app on Google Play, your app's use of this permission is subject to approval based on an upcoming policy.

Usage

Open a local file

1import { open } from "react-native-file-viewer-turbo";
2
3try {
4  await open(path); //absolute-path-to-my-local-file
5} catch (e) {
6  // error
7}

Pick up and open a local file #1 (using expo-document-picker)

1import { open } from "react-native-file-viewer-turbo";
2import { getDocumentAsync } from "expo-document-picker";
3
4try {
5  const result = await getDocumentAsync({ type: 'application/pdf' });
6  if (result.assets?.[0] === null) {
7    return
8  }
9  await open(result.assets?.[0].uri, { displayName: 'My PDF Document' });
10} catch (e) {
11  // error
12}

Pick up and open a local file #2 (using expo-image-picker)

1import { open } from "react-native-file-viewer-turbo";
2import { launchImageLibraryAsync } from "expo-image-picker";
3
4try {
5  const result = await launchImageLibraryAsync();
6  if (result.assets?.[0] === null) {
7    return
8  }
9  await open(result.assets?.[0].uri, { displayName: 'Image' });
10} catch (e) {
11  // error
12}

Prompt the user to choose an app to open the file with (if there are multiple installed apps that support the mimetype)

1import { open } from "react-native-file-viewer-turbo";
2
3try {
4  await open(path, { showOpenWithDialog: true }) // absolute-path-to-my-local-file.
5} catch (e) {
6  // error
7}

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 copyAsync of expo-file-system.

Example (using expo-file-system):

1import { open } from "react-native-file-viewer-turbo";
2import { copyAsync, documentDirectory } from "expo-file-system";
3
4const file = "file-to-open.doc"; // this is your file name
5const dest = `${documentDirectory}/${file}`;
6
7await copyAsync({ from: file, to: dest })
8await open(dest, { displayName: 'My Document' })

Download and open a file (using expo-file-system)

No function about file downloading has been implemented in this package. Use expo-file-system or any similar library for this purpose.

Example (using expo-file-system):

1import { open } from "react-native-file-viewer-turbo";
2import { downloadAsync, documentDirectory } from "expo-file-system";
3import { Platform } from "react-native";
4
5const url =
6  "https://github.com/Vadko/react-native-file-viewer-turbo/raw/main/docs/sample.pdf";
7
8// *IMPORTANT*: The correct file extension is always required.
9// You might encounter issues if the file's extension isn't included
10// or if it doesn't match the mime type of the file.
11// https://stackoverflow.com/a/47767860
12function getUrlExtension(url: string) {
13  return url.split(/[#?]/)[0].split(".").pop()?.trim() ?? "";
14}
15
16const extension = getUrlExtension(url);
17
18// Feel free to change main path according to your requirements.
19const localFile = `${documentDirectory}/temporaryfile.${extension}`;
20
21const options = {
22  fromUrl: url,
23  toFile: localFile,
24};
25
26try {
27  const result = await downloadAsync(url, localFile);
28  await open(result.uri, { displayName: "Downloaded PDF" });
29} catch (e) {
30  // error
31}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library