A ReactNative Bridge around native libraries allows you to select/pick file

React Native: Native File Selector

This library is a ReactNative Bridge around native libraries. It allows you to natively select/pick file from device file system:

Note: It allows you to pick file without using Intent/Third Party Software

Note: It allows you to select only local files associate to app sandbox.

? Getting started

$ npm install react-native-file-selector --save

$ react-native link react-native-file-selector

Android

• Add below snippet in your app build.gradle file

repositories {
    maven {
        url  "http://dl.bintray.com/lukaville/maven"
    }
    maven { url "https://maven.google.com" }
    ...
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven { url "https://maven.google.com" }
        ...
    }
}

Note: This library is supported Android 27 > above

• Add below color attributes in your app res/color.xml. You can provide your own color codes

    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

iOS

• After react-native link react-native-file-selector, please verify node_modules/react-native-file-selector/ios/ contains Pods folder. If does not exist please execute pod install command on node_modules/react-native-file-selector/ios/, if any error => try pod repo update then pod install

• After verification, open your project and create a folder 'RNFileSelector' under Libraries.

• Drag node_modules/react-native-file-selector/ios/pods/Pods.xcodeproject into RNFileSelector, as well as the RNFileSelector.xcodeproject if it does not exist.

• Add the FileBrowser.framework into your project's Embedded Binaries and make sure the framework is also in linked libraries.

• Go to your project's Build Settings -> Frameworks Search Path and add ${BUILT_PRODUCTS_DIR}/FileBrowser non-recursive.

• Add below snippet in your app AppDelegate.m. This basically adds navigation controller in order to push list of files screen

  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];
  navigationController.navigationBar.hidden = YES;

  self.window.rootViewController = navigationController;

//  self.window.rootViewController = rootViewController;

• Now build your iOS app through Xcode

? Usage

import RNFileSelector from 'react-native-file-selector';

• API Way

RNFileSelector.Show(
    {
        title: 'Select File',
        onDone: (path) => {
            console.log('file selected: ' + path)
        },
        onCancel: () => {
            console.log('cancelled')
        }
    }
)

• React Way

<RNFileSelector title={"Select File"} visible={this.state.visible} onDone={() => {
    console.log("file selected: " + path);
}} onCancel={() => {
    console.log("cancelled");
}}/>

? Props

Note

• Filter
  • Android: Please find regex/Pattern for defining filter
  • iOS: Array of file extension needs to be ignore

GitHub