Miss any of our Open RFC calls?Watch the recordings here! »

react-native-file-picker

0.0.19 • Public • Published

react-native-file-picker

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

Thanks to @Lichwa for creating this component

Install

iOS

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

Android

  1. npm install react-native-file-picker@latest --save
// file: android/settings.gradle
...
 
include ':react-native-file-picker'
project(':react-native-file-picker').projectDir = new File(settingsDir, '../node_modules/react-native-file-picker/android')
// file: android/app/build.gradle
...
 
dependencies {
    ...
    compile project(':react-native-file-picker')
}
<!-- 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.filepicker.FilePickerPackage; // 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 FilePickerPackage() // Add package 
        );
    }
...
}
 

Usage

  1. In your React Native javascript code, bring in the native module:
import FilePickerManager from 'react-native-file-picker';
  1. Use it like so:

When you want to display the picker:

 
FilePickerManager.showFilePicker(null, (response) => {
  console.log('Response = ', response);
 
  if (response.didCancel) {
    console.log('User cancelled file picker');
  }
  else if (response.error) {
    console.log('FilePickerManager Error: ', response.error);
  }
  else {
    this.setState({
      file: response
    });
  }
});

News

Compatible with Android X

Compatible with all versions of RN

Compatible with files from Google Drive

Requesting permission if not exist

Retrieving fileName and file type

Install

npm i react-native-file-picker

DownloadsWeekly Downloads

1,441

Version

0.0.19

License

ISC

Unpacked Size

141 kB

Total Files

34

Last publish

Collaborators

  • avatar