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

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

1// file: android/app/build.gradle
2...
3dependencies {
4		...
5		compile project(':react-native-file-opener')
6}

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

1// file: MainActivity.java
2import com.fileopener.FileOpenerPackage;  // <- import
3
4public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
5
6  ...
7
8  @Override
9  protected void onCreate(Bundle savedInstanceState) {
10    super.onCreate(savedInstanceState);
11    mReactRootView = new ReactRootView(this);
12
13    mReactInstanceManager = ReactInstanceManager.builder()
14      .setApplication(getApplication())
15      .setBundleAssetName("index.android.bundle")
16      .setJSMainModuleName("index.android")
17      .addPackage(new MainReactPackage())
18      .addPackage(new FileOpenerPackage())      // <- add package
19      .setUseDeveloperSupport(BuildConfig.DEBUG)
20      .setInitialLifecycleState(LifecycleState.RESUMED)
21      .build();
22
23    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
24
25    setContentView(mReactRootView);
26  }
27
28  ...
29
30}

• For react-native 0.19.0 and higher

1// file: MainActivity.java
2	...
3import com.fileopener.FileOpenerPackage;//<- import package
4
5public class MainActivity extends ReactActivity {
6
7   /**
8   * A list of packages used by the app. If the app uses additional views
9   * or modules besides the default ones, add more packages here.
10   */
11    @Override
12    protected List<ReactPackage> getPackages() {
13        return Arrays.<ReactPackage>asList(
14            new MainReactPackage(), //<- Add comma
15            new FileOpenerPackage() //<- Add package
16        );
17    }
18...
19}

##Usage

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

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

2. Basic usage

1const FilePath = ...; // path of the file
2const FileMimeType = ...; // mime type of the file
3FileOpener.open(
4    FilePath,
5    FileMimeType
6).then((msg) => {
7    console.log('success!!')
8},() => {
9    console.log('error!!')
10});

##Usage with react-native-fs

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

1const RNFS = require('react-native-fs');
2const FileOpener = require('react-native-file-opener');
3
4const SavePath = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.ExternalDirectoryPath;
5const sampleDocFilePath = SavePath + '/sample.doc';
6
7...
8
9  function openSampleDoc() {
10        FileOpener.open(
11            sampleDocFilePath,
12            'application/msword'
13        ).then(() => {
14            console.log('success!!');
15        },(e) => {
16            console.log('error!!');
17        });
18
19    }
20    
21...

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