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.
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"
}
}
######最后加上
subprojects {
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
compileSdkVersion 25
buildToolsVersion '25.0.0'
}
}
}
}
- Add below color attributes in your app
res/values/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';
RNFileSelector.Show(
{
title: 'Select File',
onDone: (path) => {
console.log('file selected: ' + path)
},
onCancel: () => {
console.log('cancelled')
}
}
)<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
Credits
Contribution
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.
License
This library is provided under the MIT License.
RNFileSelector @ Pranav Raj Singh Chauhan
Other Contributions
