Package Exports

react-native-file-chooser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-file-chooser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-file-chooser

A React Native module that allows you to use native UI to select a file from the device library Based on react-native-image-chooser

Supports choosing files from Google Drive

Install

iOS

This component does not currently work on iOS, instead use react-native-document-chooser

Android

npm install react-native-file-chooser --save

// file: android/settings.gradle
...

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

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':react-native-file-chooser')
}

<!-- file: android/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.myApp">

    <uses-permission android:name="android.permission.INTERNET" />

    <!-- add following permissions -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <!-- -->
    ...

// file: MainApplication.java
...

import com.filechooser.FileChooserPackage; // import package

public class MainApplication extends Application implements ReactApplication {

   /**
   * 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(),
            new FileChooserPackage() // Add package
        );
    }
...
}

Usage

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

import { NativeModules } from 'react-native'
const FilePicker = NativeModules.FileChooser

Use it like so:

When you want to display the chooser:

FilePicker.show(
{
  title: 'Audio Picker',
  mimeType: 'audio/*',
}, 
(response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled file chooser');
  }
  else if (response.error) {
    console.log('FileChooserManager Error: ', response.error);
  }
  else {
    this.setState({
      file: response
    });
  }
});