The react-native-image-picker package allows React Native developers to access the device's camera and photo library. It provides a simple way to capture images and videos or select them from the device's gallery.

What are react-native-image-picker's main functionalities?

Launch Camera

This feature allows you to launch the device's camera to capture a photo. The `launchCamera` function takes an options object to specify the media type and camera type, and a callback function to handle the response.

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

const options = {
  mediaType: 'photo',
  cameraType: 'back',
};

launchCamera(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else {
    const source = { uri: response.uri };
    console.log('Image URI: ', source.uri);
  }
});

Launch Image Library

This feature allows you to open the device's image library to select a photo. The `launchImageLibrary` function takes an options object to specify the media type and a callback function to handle the response.

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

const options = {
  mediaType: 'photo',
};

launchImageLibrary(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else {
    const source = { uri: response.uri };
    console.log('Image URI: ', source.uri);
  }
});

Video Recording

This feature allows you to launch the device's camera to record a video. The `launchCamera` function takes an options object to specify the media type as video and the camera type, and a callback function to handle the response.

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

const options = {
  mediaType: 'video',
  cameraType: 'back',
};

launchCamera(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled video recording');
  } else if (response.error) {
    console.log('VideoPicker Error: ', response.error);
  } else {
    const source = { uri: response.uri };
    console.log('Video URI: ', source.uri);
  }
});

Other packages similar to react-native-image-picker

Readme

Source

react-native-image-picker

A React Native module that allows you to use the native UIImagePickerController UI to either select a photo from the device library or directly from the camera, like so: Screenshot of the UIActionSheet

Install

npm install react-native-image-picker@latest --save
In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
Go to node_modules ➜ react-native-image-picker ➜ select the UIImagePickerManager folder
Compile and have fun!

Usage

In your React Native javascript code, bring in the native module:

var UIImagePickerManager = require('NativeModules').UIImagePickerManager;

Use it like so:

When you want to display the picker:


// Specify any or all of these keys
var options = {
  title: 'Select Avatar',
  cancelButtonTitle: 'Cancel',
  takePhotoButtonTitle: 'Take Photo...',
  chooseFromLibraryButtonTitle: 'Choose from Library...',
  returnBase64Image: false,
  returnIsVertical: false,
  quality: 0.2
};

// The first arg will be the options object for customization, the second is
// your callback which sends string: type, string: response
UIImagePickerManager.showImagePicker(options, (type, response) => {
  if (type !== 'cancel') {
    var source;
    if (type === 'data') { // New photo taken OR passed returnBase64Image true -  response is the 64 bit encoded image data string
      source = {uri: 'data:image/jpeg;base64,' + response, isStatic: true};
    } else { // Selected from library - response is the URI to the local file asset
      source = {uri: response};
    }

    this.setState({avatarSource:source});
  } else {
    console.log('Cancel');
  }
});

Then later, if you want to display this image in your render() method:

<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

Keywords

FAQs

What is react-native-image-picker?

Is react-native-image-picker well maintained?

Last updated on 18 Aug 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install