react-native-file-opener

A React Native module that allows you to open a file (mp3, mp4, pdf, word, excel, dwg etc.) on your device with its default application

iOS	Android

Install

iOS

1. npm install react-native-file-opener --save
2. in the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to
3. Go to node_modules ➜ react-native-file-opener ➜ ios ➜ select RNFileOpener.xcodeproj
4. Add libRNFileOpener.a to Build Phases -> Link Binary With Libraries
5. Compile and have fun

Android

• npm install react-native-file-opener --save

// file: android/settings.gradle
...
include ':react-native-file-opener'
project(':react-native-file-opener').projectDir = new File(settingsDir, '../node_modules/react-native-file-opener/android')

// file: android/app/build.gradle
...
dependencies {
        ...
        compile project(':react-native-file-opener')
}

• register module
• For react-native below 0.19.0 (use cat ./node_modules/react-native/package.json | grep version)

// file: MainActivity.java
import com.fileopener.FileOpenerPackage;  // <- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  ...

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new FileOpenerPackage())      // <- add package
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ...

}

• For react-native 0.19.0 and higher

// file: MainActivity.java
    ...
import com.fileopener.FileOpenerPackage;//<- import package

public class MainActivity extends ReactActivity {

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(), //<- Add comma
            new FileOpenerPackage() //<- Add package
        );
    }
...
}

Allow files access

• AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">
    <application
        ...>
        <provider
            android:name="android.support.v4.content.FileProvider"
            android:authorities="com.example.myapp.fileprovider"
            android:grantUriPermissions="true"
            android:exported="false">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths" />
        </provider>
        ...
    </application>
</manifest>

• android/app/src/main/res/xml/file_paths.xml (create if not exists)

"path" attribute must contain the directory name.

For setting up other directories (cache, external storage, ...) follow the guide at https://developer.android.com/reference/android/support/v4/content/FileProvider.html

<paths xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <files-path name="img" path="images/"/>
    ...
</paths>

• For react-native 0.29.0 and higher, do the above in MainApplication.java

Usage

1. In your React Native javascript code, bring in the native module

const FileOpener = require('react-native-file-opener');

2. Basic usage

const FilePath = ...; // path of the file
const FileMimeType = ...; // mime type of the file
FileOpener.open(
    FilePath,
    FileMimeType
).then((msg) => {
    console.log('success!!')
},() => {
    console.log('error!!')
});

Usage with react-native-fs

• You can get filepath by using react-native-fs

const RNFS = require('react-native-fs');
const FileOpener = require('react-native-file-opener');

const SavePath = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.ExternalDirectoryPath;
const sampleDocFilePath = SavePath + '/sample.doc';

...

  function openSampleDoc() {
        FileOpener.open(
            sampleDocFilePath,
            'application/msword'
        ).then(() => {
            console.log('success!!');
        },(e) => {
            console.log('error!!');
        });

    }
    
...

Demo project

https://github.com/huangzuizui/react-native-file-opener-demo