@r4dic4l/react-native-open-doc

This is a fork of react-native-open-doc.

Open files stored on device for preview - Android and iOS.

Pick files using native file pickers for iOS and Android (UIDocumentPickerViewController / Intent.ACTION_OPEN_DOCUMENT)

Share files on Android (for iOS use the react-native Share.share({ url: selectedUri }) api, see https://reactnative.dev/docs/share#share for more details).

Getting started

$ npm install @r4dic4l/react-native-open-doc --save

Mostly automatic installation

$ react-native link @r4dic4l/react-native-open-doc

Android ONLY: Define a FileProvider

Define a file provider in your AndroidManifest.xml. Note that the authorities value should be <your package name>.provider, for example:

1<provider
2    android:name="androidx.core.content.FileProvider"
3    android:authorities="com.mydomain.provider"
4    android:exported="false"
5    android:grantUriPermissions="true">
6    <meta-data
7        android:name="android.support.FILE_PROVIDER_PATHS"
8        android:resource="@xml/provider_paths" />
9</provider>

In meta-data, all supported files should be listed. @xml/provider_paths takes values configured in xml/provider_paths.xml.

1<?xml version="1.0" encoding="utf-8"?>
2<paths xmlns:android="http://schemas.android.com/apk/res/android">
3  <files-path name="shared" path="."/>
4  <external-path name="shared" path="."/>
5  <external-files-path name="shared" path="."/>
6  <root-path name="root" path="."/>
7</paths>

Define intents for actions for package visibility in android 11

For actions in this package, the following intents are necessary in your AndroidManifest.xml.

1<manifest>
2  ...
3  <queries>
4    <intent>
5      <action android:name="android.intent.action.VIEW" />
6      <data android:mimeType="*/*" />
7    </intent>
8    <intent>
9      <action android:name="android.intent.action.SEND" />
10      <data android:mimeType="*/*" />
11    </intent>
12    <intent>
13      <action android:name="android.intent.action.OPEN_DOCUMENT" />
14      <data android:mimeType="*/*" />
15    </intent>
16  </queries>
17  ...
18</manifest>

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-open-doc and add RNCOpenDoc.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNCOpenDoc.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.capriza.reactlibrary.RNCOpenDocPackage; to the imports at the top of the file
• Add new RNCOpenDocPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-open-doc'
   project(':react-native-open-doc').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-open-doc/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(':react-native-open-doc')
   

4. Define a FileProvider

Usage

1import RNCOpenDoc from '@r4dic4l/react-native-open-doc';
2
3// For opening a document by path (android and iOS)
4// Works with file:// prefix OR direct file path
5RNCOpenDoc.open(pathToFile);
6// For opening a content:// document (android ONLY)
7// Works with file:// prefix OR direct file path OR content:// URI string with a suggested mime type for intent
8RNCOpenDoc.openWithSuggestedMime(contentUri, suggestedMimeType);
9
10// For sharing a document by path (android ONLY)
11// For iOS use the react-native Share.share({ url: selectedUri }) api (see https://reactnative.dev/docs/share#share)
12// Works with file:// prefix OR direct file path
13RNCOpenDoc.share(pathToFile);
14// For sharing a content:// document (android ONLY)
15// Works with file:// prefix OR direct file path OR content:// URI string with a suggested mime type for intent
16RNCOpenDoc.shareWithSuggestedMime(pathToFile, suggestedMimeType);
17
18// For using the file picker (android and iOS)
19RNCOpenDoc.pick(null, (error, files) => {
20    if (error) {
21        console.log(`error in RNCOpenDoc.pick ${error}`);
22    }
23    else if (files) {
24    	this.handleSelectedFiles(files);
25    }
26});

files is an array of objects with the following properties:

• fileName (string) e.g. "foo.html"
• fileSize (number) (iOS only) File size in bytes
• mimeType (string) (iOS only) e.g. "text/html"
• uri (string) Example (iOS): "file:///private/var/mobile/Containers/Data/Application/.../foo.html"