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.

![react native image picker](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover1.jpg)
## Installing React Native Image Picker

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

&#96;&#96;&#96;
npm install react-native-image-picker --save
&#96;&#96;&#96;

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

&#96;&#96;&#96;
react-native link react-native-image-picker
&#96;&#96;&#96;

## 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 &#96;showImagePicker&#96; method from the &#96;ImagePicker&#96; module. It takes an object as an argument with the following properties:

* &#96;title&#96;: The title of the image picker
* &#96;cancelButtonTitle&#96;: The title of the cancel button
* &#96;takePhotoButtonTitle&#96;: The title of the take photo button
* &#96;chooseFromLibraryButtonTitle&#96;: The title of the choose from library button

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

&#96;&#96;&#96;javascript
import ImagePicker from &#x27;react-native-image-picker&#x27;;

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

ImagePicker.showImagePicker(options, (response) =&gt; {
  console.log(&#x27;Response = &#x27;, response);

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

    const source = { uri: response.uri };

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

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

## 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 &#96;takePhotoButtonTitle&#96; option to &#96;true&#96; in the &#96;showImagePicker&#96; method. Here is an example of how to take a photo with the camera:

&#96;&#96;&#96;javascript
import ImagePicker from &#x27;react-native-image-picker&#x27;;

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

ImagePicker.showImagePicker(options, (response) =&gt; {
  console.log(&#x27;Response = &#x27;, response);

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

    const source = { uri: response.uri };

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

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

## 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.

Image Picker Tutorial in React Native

About

Legal

Products

Resources

Category: