rnf

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

Showing:

Popularity

Downloads/wk

9

GitHub Stars

140

Maintenance

Last Commit

5yrs ago

Contributors

3

Package

Readme

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

iOSAndroid

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_modulesreact-native-file-openerios ➜ 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');
  1. 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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial