React native by default dose not support File Picker functionality but using the react-native-document-picker NPM library we can implement file picker in both Android and iOS devices. One more thing Android emulator does support the File picker but in iOS devices iPhone did not support file picker. If you want to test file picker functionality in iOS devices then you have to use real devices for testing purpose. Using the document file picker we can pic all the type of files from our mobile phones. We can also select separate files like images files, plain text files, audio files, pdf files and all the files present in mobile system. So in this tutorial we would Create File Picker in React Native Android iOS Example Tutorial.
Contents in this project Create File Picker in React Native Android iOS Example Tutorial:
1. The first step of this tutorial is we have to manually install the react-native-document-picker library in our react native project. So open your project’s root folder path in Command Prompt or Terminal and execute the below command to install the library.
|
1
|
npm install react–native–document–picker —save
|
Screenshot of Command Prompt:
Screenshot of Command Prompt after done installing:
2. After done installing the library next step is to link the react-native-document-picker library to our react native project. So execute the below command to link the library.
|
1
|
react–native link react–native–document–picker
|
Screenshot:
3. Configure Project for Android device:
We have to add READ_EXTERNAL_STORAGE permission in our AndroidManifest.xml file present in React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml file. So open the file in any Text editor and put the below reading permission inside it.
|
1
|
<uses–permission android:name=“android.permission.READ_EXTERNAL_STORAGE”/>
|
Complete Source Code of My AndroidManifest.xml file after adding Read permission:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<manifest xmlns:android=“http://schemas.android.com/apk/res/android”
package=“com.project”>
<uses–permission android:name=“android.permission.INTERNET” />
<uses–permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE”/>
<uses–permission android:name=“android.permission.READ_EXTERNAL_STORAGE”/>
<application
android:name=“.MainApplication”
android:label=“@string/app_name”
android:icon=“@mipmap/ic_launcher”
android:roundIcon=“@mipmap/ic_launcher_round”
android:allowBackup=“false”
android:theme=“@style/AppTheme”>
<activity
android:name=“.MainActivity”
android:label=“@string/app_name”
android:configChanges=“keyboard|keyboardHidden|orientation|screenSize”
android:windowSoftInputMode=“adjustResize”>
<intent–filter>
<action android:name=“android.intent.action.MAIN” />
<category android:name=“android.intent.category.LAUNCHER” />
</intent–filter>
</activity>
<activity android:name=“com.facebook.react.devsupport.DevSettingsActivity” />
</application>
</manifest>
|
4. Configure project for iOS devices:
1. We have to enable Singing profile in Xcode for iOS devices because this library gives us iCloud file picking system and to use it we have to enable Singing Profile in our react native project from Xcode. So GoTo Your_React_Native_Project -> ios -> xcodeproj file and select Project Root directory.
2. Now we have to select Add Account under Singing tab.
3. Login-in using your Apple ID like i did in below screenshot and Select your account as Team.
3. Now you have to go in Capabilities Tab and Enable the iCloud. It will ask you to select your development team so you have to select your team name here. Now all the configuration has been done for iOS devices.
5. Now its time to Start coding for app, So open your project’s App.js file and Import StyleSheet, Text, TouchableOpacity, View and Alert component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, TouchableOpacity, View, Alert } from ‘react-native’;
|
2. Import DocumentPicker package from react-native-document-picker library in your react native project.
|
1
|
import DocumentPicker from ‘react-native-document-picker’;
|
3. Create our main export default class named as App. This would be our main Root class.
|
1
2
3
4
|
export default class App extends Component {
}
|
4. Create constructor() in your main class and make 1 States named as singleFileOBJ. This state is used to hold the selected file details like file name, file type, file size and file URI path in local storage device.
|
1
2
3
4
5
6
|
constructor(props) {
super(props);
this.state = {
singleFileOBJ: ”,
};
}
|
5. Create a ASYNC function named as SingleFilePicker(). We would call this function on button onPress event. In this funciton first we would open the Local storage and select the file and store the file details like File name, file size, file type and file URI in state.
There are 5 different options also available for file separate extension file:
- DocumentPicker.types.allFiles
- DocumentPicker.types.audio
- DocumentPicker.types.images
- DocumentPicker.types.pdf
- DocumentPicker.types.plainText
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
async SingleFilePicker() {
try {
const res = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],
});
this.setState({ singleFileOBJ: res });
} catch (err) {
if (DocumentPicker.isCancel(err)) {
Alert.alert(‘Canceled’);
} else {
Alert.alert(‘Unknown Error: ‘ + JSON.stringify(err));
throw err;
}
}
}
|
6. Now we would create 4 Text components and 1 Touchable Opacity button in render’s return block. Each Text component is used to display file selected values like file name, file type, file size and file URI.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>
File Name: {this.state.singleFileOBJ.name ? this.state.singleFileOBJ.name : ”}
</Text>
<Text style={styles.text}>
file Type: {this.state.singleFileOBJ.type ? this.state.singleFileOBJ.type : ”}
</Text>
<Text style={styles.text}>
File Size: {this.state.singleFileOBJ.size ? this.state.singleFileOBJ.size : ”}
</Text>
<Text style={styles.text}>
File URI: {this.state.singleFileOBJ.uri ? this.state.singleFileOBJ.uri : ”}
</Text>
<TouchableOpacity
activeOpacity={0.5}
style={styles.button}
onPress={this.SingleFilePicker.bind(this)}>
<Text style={styles.buttonText}>
Click Here To Pick File
</Text>
</TouchableOpacity>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#fff’,
padding: 16,
justifyContent: ‘center’,
},
button: {
width: ‘100%’,
backgroundColor: ‘#0091EA’,
borderRadius:9,
},
buttonText: {
color: ‘#fff’,
fontSize: 21,
padding: 10,
textAlign: ‘center’
},
text: {
color: ‘#000’,
fontSize: 16,
padding: 10,
textAlign: ‘left’
},
});
|
8. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, TouchableOpacity, View, Alert } from ‘react-native’;
import DocumentPicker from ‘react-native-document-picker’;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
singleFileOBJ: ”,
};
}
async SingleFilePicker() {
try {
const res = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],
});
this.setState({ singleFileOBJ: res });
} catch (err) {
if (DocumentPicker.isCancel(err)) {
Alert.alert(‘Canceled’);
} else {
Alert.alert(‘Unknown Error: ‘ + JSON.stringify(err));
throw err;
}
}
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>
File Name: {this.state.singleFileOBJ.name ? this.state.singleFileOBJ.name : ”}
</Text>
<Text style={styles.text}>
file Type: {this.state.singleFileOBJ.type ? this.state.singleFileOBJ.type : ”}
</Text>
<Text style={styles.text}>
File Size: {this.state.singleFileOBJ.size ? this.state.singleFileOBJ.size : ”}
</Text>
<Text style={styles.text}>
File URI: {this.state.singleFileOBJ.uri ? this.state.singleFileOBJ.uri : ”}
</Text>
<TouchableOpacity
activeOpacity={0.5}
style={styles.button}
onPress={this.SingleFilePicker.bind(this)}>
<Text style={styles.buttonText}>
Click Here To Pick File
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#fff’,
padding: 16,
justifyContent: ‘center’,
},
button: {
width: ‘100%’,
backgroundColor: ‘#0091EA’,
borderRadius:9,
},
buttonText: {
color: ‘#fff’,
fontSize: 21,
padding: 10,
textAlign: ‘center’
},
text: {
color: ‘#000’,
fontSize: 16,
padding: 10,
textAlign: ‘left’
},
});
|
Screenshots:
Also Read :
React Native Change ListView Mode To GridView Dynamically on Button Click
Solve Could not connect to development server Error in React Native
Google Analytics Implement in React Native Android iOS App Tutorial
React Native Vertical ScrollView Android iOS Example Tutorial
React Native Horizontal ProgressBar Android iOS Example Tutorial
