Create File Picker in React Native Android iOS Example Tutorial

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.

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.

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.

Complete Source Code of My AndroidManifest.xml file after adding Read permission:

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.

2. Import DocumentPicker package from react-native-document-picker library in your react native project.

3. Create our main export default class named as App. This would be our main Root class.

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.

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:

  1. DocumentPicker.types.allFiles
  2. DocumentPicker.types.audio
  3. DocumentPicker.types.images
  4. DocumentPicker.types.pdf
  5. DocumentPicker.types.plainText

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.

7. Creating Style.

8. Complete Source Code for App.js file class:

Screenshots:

Create File Picker in React Native Android iOS Example Tutorial

7 Comments

  1. hii sir ,when pick doc its never asked me permission dialog for read file from storage how to add multiple permission dialog before open camera or pick file etc

  2. hii sir , i make video on react-native-charts-wrapper for ios becoze i face lots of error in ios to run charts lib please share this video or use video to make tutorial on that top.
    https://www.youtube.com/watch?v=N5YaXv8Apxc&t=5s

  3. How do i get complete list of of song on clicking button in next activity

  4. Sir How do i get complete list of of song on clicking button in next activity
    For react native

  5. How do i get complete list of songs on clicking button

Leave a Reply

Your email address will not be published. Required fields are marked *