react-native-file-opener

by huangzuizui

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

133 Stars 90 Forks Last release: over 4 years ago (0.2.0) 20 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
    java
    // 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) ```java // 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())      // 

}

...

}

* For react-native 0.19.0 and higher
java // 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 getPackages() { return Arrays.asList( new MainReactPackage(), //<- Add comma new FileOpenerPackage() //<- Add package ); } ... } ```

Allow files access

  • AndroidManifest.xml
    xml
    
    
        
            
        
        ...
    
    
    
  • 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

xml

    ...
    
    ...

  • 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
    javascript
    const FileOpener = require('react-native-file-opener');
    
  2. Basic usage
    javascript
    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
  3. 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.