How to Create Image Picker in React Native

Hey fellow developers! 🚀 Ever wanted to spruce up your React Native app by letting users pick images effortlessly? Well, you're in for a treat! Today, I'll walk you through the process of creating an image picker using the fantastic react-native-image-picker library.

In this guide, we'll break down each step so you can seamlessly integrate image selection into your app.

So, let's see how to create an image picker in react native, react native image picker, react-native-image-picker npm, how to use react native image picker, and how to create a custom image picker in react native.

Grab your code editor, and let's dive into the world of hassle-free image picking in React Native! 📸✨

First, install the react-native-image-picker library. Open your terminal and run the following command:

npm install react-native-image-picker
//OR
yarn add react-native-image-picker

For iOS, you'll also need to install pods in the iOS directory and then return to the root project directory. You can accomplish this by using the following commands:

cd ios
pod install
cd ..

To access the device's camera and photo library, configuring the necessary permissions is essential. Include permissions for each platform by:

Android

Open the AndroidManifest.xml file located in the android/app/src/main directory of your project. Insert the following line inside the <manifest> tag:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS

Open the Info.plist file located in the ios/yourProjectName directory, and insert the following lines within the <dict> tag:

<key>NSPhotoLibraryUsageDescription</key>
<string>Allow access to the photo library for selecting images</string>

To incorporate an image picker, importing the necessary function is essential. Open the JavaScript file where you intend to implement the image picker and include the following import statement:

import {launchImageLibrary} from 'react-native-image-picker';

Next, create a function that will handle image selection.

const openImagePicker = () => {
    const options = {
      mediaType: 'photo',
      includeBase64: false,
      maxHeight: 2000,
      maxWidth: 2000,
    };

    launchImageLibrary(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('Image picker error: ', response.error);
      } else {
        let imageUri = response.uri || response.assets?.[0]?.uri;
        setSelectedImage(imageUri);
      }
    });
  };

To implement a camera image picker, we need to import the necessary function. Open the JavaScript file where you intend to implement the image picker and add the following import statement:

import {launchCamera} from 'react-native-image-picker';

Next, create a function that will handle image selection using the launchCamera.

handleCameraLaunch = () => {
    const options = {
      mediaType: 'photo',
      includeBase64: false,
      maxHeight: 2000,
      maxWidth: 2000,
    };
  
    launchCamera(options, response => {
      if (response.didCancel) {
        console.log('User cancelled camera');
      } else if (response.error) {
        console.log('Camera Error: ', response.error);
      } else {
        let imageUri = response.uri || response.assets?.[0]?.uri;
        setSelectedImage(imageUri);
        console.log(imageUri);
      }
    });
  }

To activate the image picker, we must invoke the newly created handler functions. This can be achieved by associating them with a button's onPress event or any other user interaction within your app's UI.

Here's an example implementation using a button:

<Button title="Choose from Device" onPress={openImagePicker} />
<Button title="Open Camera" onPress={handleCameraLaunch} />

Example:

App.js

import React, { useState } from 'react';
import { Button, Image, View } from 'react-native';
import {launchImageLibrary, launchCamera} from 'react-native-image-picker';


const App = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const openImagePicker = () => {
    const options = {
      mediaType: 'photo',
      includeBase64: false,
      maxHeight: 2000,
      maxWidth: 2000,
    };

    launchImageLibrary(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('Image picker error: ', response.error);
      } else {
        let imageUri = response.uri || response.assets?.[0]?.uri;
        setSelectedImage(imageUri);
      }
    });
  };
  
  handleCameraLaunch = () => {
    const options = {
      mediaType: 'photo',
      includeBase64: false,
      maxHeight: 2000,
      maxWidth: 2000,
    };
  
    launchCamera(options, response => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled camera');
      } else if (response.error) {
        console.log('Camera Error: ', response.error);
      } else {
        // Process the captured image
        let imageUri = response.uri || response.assets?.[0]?.uri;
        setSelectedImage(imageUri);
        console.log(imageUri);
      }
    });
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
     {selectedImage && (
          <Image
            source={{ uri: selectedImage }}
            style={{ flex: 1 }}
            resizeMode="contain"
          />
    )}
    <View style={{ marginTop: 20 }}>
      <Button title="Choose from Device" onPress={openImagePicker} />
    </View>
    <View style={{ marginTop: 20,marginBottom: 50 }}>
      <Button title="Open Camera" onPress={handleCameraLaunch} />
    </View>
  </View>
  );
};

export default App;

Run your React Native application and test the image picker by pressing the button to select an image.

That's it! You've successfully created an image picker in React Native using react-native-image-picker.

Happy coding! 📸✨

You might also like:

• Read Also: How to Integrate Maps in React Native
• Read Also: How to Upload and Preview an Image in React Native
• Read Also: Laravel 10 Import and Export CSV and Excel Files
• Read Also: How To Export CSV File In Laravel 10 Example