A React Native Bridge around Native File Selector

React Native: Native File Selector (Android & iOS)

This library is a ReactNative Bridge around native nbsp-team/MaterialFilePicker/ & marmelroy/FileBrowser file picker. It allows you to natively select/pick file from device file system.

Android: nbsp-team/MaterialFilePicker/

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

iOS: marmelroy/FileBrowser

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"
    }
    google()
    ...
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        google()
        ...
    }
}

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>

Note: Android library works compileSdkVersion > 25

iOS

• 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;

• Add FileBrowser in Embedded Binaries & Linked Frameworks and Libraries. You can find this library from below path:

node_modules/react-native-file-selector/ios/FileBrowser/FileBrowser.xcodeproj

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

Prop	Type	Default	Note
title	string		Title on the toolbar
closeMenu	string	true	Color of tint
hiddenFiles: Android	bool	false	If true it shows hidden files as well
path	string		Path of directory
filter	string		Filter to sort the files
filterDirectories: Android	bool		Filter should be applied on directories or not
onDone	func		Function called when file is selected
onCancel	func		Function called when file selector is closed without selecting any file
visible	bool	false	To invoke file selector

Note

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

GitHub