Image Picker Tutorial in React Native

React Native Image Picker is a React Native module that allows you to select an image from the device images library or directly from the camera. It is a great way to provide a better user experience in your app. In this tutorial, we will learn how to install and use React Native Image Picker in a React Native app.

Installing React Native Image Picker

First, we need to install the React Native Image Picker module, which we can do using the following command:

npm install react-native-image-picker --save

Once the package is installed, we need to link the native dependencies. To do this, we need to use the following command:

react-native link react-native-image-picker

Selecting Images from the Camera Roll

Now that the module is installed and linked, we can start using it in our project. To select an image from the camera roll, we can call the showImagePicker method from the ImagePicker module. It takes an object as an argument with the following properties:

• title: The title of the image picker
• cancelButtonTitle: The title of the cancel button
• takePhotoButtonTitle: The title of the take photo button
• chooseFromLibraryButtonTitle: The title of the choose from library button

The showImagePicker method returns a promise that resolves with an object containing the selected image's uri and width and height. Here is an example of how to use the showImagePicker method:

import ImagePicker from 'react-native-image-picker';

const options = {
  title: 'Select Avatar',
  cancelButtonTitle: 'Cancel',
  takePhotoButtonTitle: 'Take Photo...',
  chooseFromLibraryButtonTitle: 'Choose from Library...',
  cameraType: 'back',
  mediaType: 'photo',
  videoQuality: 'high',
  durationLimit: 10,
  maxWidth: 600,
  maxHeight: 600,
  quality: 0.8,
  angle: 0,
};

ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    const source = { uri: response.uri };

    // You can also display the image using the uri
    // const source = { uri: response.uri };

    this.setState({
      avatarSource: source,
    });
  }
});

Taking Photos with the Camera in React Native

React Native Image Picker also provides the ability to take a photo with the camera. To do this, we can set the takePhotoButtonTitle option to true in the showImagePicker method. Here is an example of how to take a photo with the camera:

import ImagePicker from 'react-native-image-picker';

const options = {
  title: 'Select Avatar',
  cancelButtonTitle: 'Cancel',
  takePhotoButtonTitle: true,
  chooseFromLibraryButtonTitle: 'Choose from Library...',
  cameraType: 'back',
  mediaType: 'photo',
  videoQuality: 'high',
  durationLimit: 10,
  maxWidth: 600,
  maxHeight: 600,
  quality: 0.8,
  angle: 0,
};

ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    const source = { uri: response.uri };

    // You can also display the image using the uri
    // const source = { uri: response.uri };

    this.setState({
      avatarSource: source,
    });
  }
});

Conclusion

In this tutorial, we learned how to install and use React Native Image Picker in a React Native app. We also looked at how to select an image from the camera roll and take a photo with the camera. With the help of React Native Image Picker, we can provide a better user experience in our app.