Unlock the Power of File Picking in React Native

What is react-native-document-picker?

This library is a game-changer for React Native developers. It allows you to pick documents and files of any format from a user’s device, both on iOS and Android. Under the hood, it leverages UIDocumentPickerViewController on iOS and Intent.ACTION_GET_CONTENT on Android, making it a seamless experience for users.

Getting Started

Let’s create a simple React Native project to demonstrate how to pick documents. We’ll start by initializing a new project using the latest version of React Native (0.67 at the time of writing). Once the project is created, open it in your preferred code editor and remove the placeholder code in App.js.

Designing the UI

Next, let’s add some style and build a simple button that triggers our document-picking logic. After adding these changes, App.js should look like this:

Setting up react-native-document-picker

Now that our UI is almost done, it’s time to implement the functionality. Install the react-native-document-picker library by running the following command:

npm install react-native-document-picker

For iOS, we need to install the pod dependencies. Open the terminal in the root of your project and run the following command:

npx pod-install

Picking Documents

With the libraries installed, let’s implement the logic to open the document picker and select a file. Add the following code to your App.js file:

import DocumentPicker from 'eact-native-document-picker';

const App = () => {
  const [fileResponse, setFileResponse] = useState(null);

  const handleDocumentSelection = async () => {
    try {
      const response = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      setFileResponse(response);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <View>
      <Button title="Pick Document" onPress={handleDocumentSelection} />
      {fileResponse && (
        <Text>Selected File: {fileResponse.uri}</Text>
      )}
    </View>
  );
};

Selecting Specific File Formats

What if you want to restrict the file formats that users can select? That’s where the type property comes in. We can pass an array of DocumentPicker.types to specify the allowed file formats. For example, to allow only PDF files, we can pass the following code:

const handleDocumentSelection = async () => {
  try {
    const response = await DocumentPicker.pick({
      type: [DocumentPicker.types.pdf],
    });
    setFileResponse(response);
  } catch (err) {
    console.error(err);
  }
};

Selecting Multiple Files

But what if you want to allow users to select multiple files at once? That’s where the allowMultiSelection property comes in. Add this property to your config object, and you’re good to go!

const handleDocumentSelection = async () => {
  try {
    const response = await DocumentPicker.pickMultiple({
      type: [DocumentPicker.types.allFiles],
    });
    setFileResponse(response);
  } catch (err) {
    console.error(err);
  }
};

The Final Result

We’ve now implemented document-picking functionality into our React Native app. With the file URI, we can either display the document in-app or upload it to our backend or S3 bucket according to our business needs.

A huge thanks to the awesome open-source work and the react-native-document-picker library, which makes it easy to integrate file-picking functionality into our React Native applications.