react-native-community/react-native-image-picker


sunrise_over_mountains A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

License: MIT

Language: Java

Keywords: image-picker, picker, react-native


React Native Image Picker

npm version npm MIT Platform - Android and iOS Gitter chat

A React Native module that allows you to use native UI to select a photo/video from the device library or directly from the camera, like so:

iOS Android

Before you open an issue

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you.

React Native Compatibility

To use this library you need to ensure you match up with the correct version of React Native you are using.

p.s. React Native introduced AndroidX support in 0.60, which is a breaking change for most libraries (incl. this one) using native Android functionality.

@react-native-community/imagepicker version Required React Native Version
1.x.x >= 0.60 or >= 0.59 if using Jetifier
0.x.x <= 0.59

Getting Started

yarn add react-native-image-picker
react-native link react-native-image-picker

You will also need to add UsageDescription on iOS and some permissions on Android, refer to the Install doc.

Usage

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

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
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 {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

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

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

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

Directly Launching the Camera or Image Library

To Launch the Camera or Image Library directly (skipping the alert dialog) you can do the following:

// Launch Camera:
ImagePicker.launchCamera(options, (response) => {
  // Same code as in above section!
});

// Open Image Library:
ImagePicker.launchImageLibrary(options, (response) => {
  // Same code as in above section!
});

Notes

On iOS, don't assume that the absolute uri returned will persist. See #107

For more, read the API Reference.

License

MIT

Project Statistics

Sourcerank 15
Repository Size 1.58 MB
Stars 5,603
Forks 1,299
Watchers 109
Open issues 93
Dependencies 838
Contributors 117
Tags 67
Created
Last updated
Last pushed

Top Contributors See all

Marc Shilling Yoann Fuks Nicolas Charpentier Nicolas Charpentier Haitao Li Pedro Belo Johan Janic Duplessis Alexander Matheus Santos mshilling-mindgrub Alexander Ustinov levic92 PJ Cabrera Kevin Stumpf Udi Eugene Sokovikov Chris Geirman Kevin Cooper Alex Figueroa

Packages Referencing this Repo

react-native-image-picker
A React Native module that allows you to use native UI to select media from the device library or...
Latest release 1.1.0 - Updated - 5.6K stars
odgn-react-native-image-picker
A React Native module that allows you to use native UI to select media from the device library or...
Latest release 0.26.8 - Updated - 5.6K stars
@2hats/react-native-image-picker
A React Native module that allows you to use native UI to select media from the device library or...
Latest release 0.26.4 - Updated - 5.6K stars
react-native-image-picker-shefenqi
fork from marcshilling/react-native-image-picker. Make it suitable for shefenqi
Latest release 0.26.10 - Published - 5.6K stars
react-native-image-picker-dyxtest
A React Native module that allows you to use native UI to select media from the device library or...
Latest release 0.0.1 - Published - 5.6K stars
react-native-image-picker-mitrai
A React Native module that allows you to use native UI to select media from the device library or...
Latest release 0.26.10 - Published - 5.6K stars
react-native-xl-image-picker
A React Native module that allows you to use native UI to select media from the device library or...
Latest release 0.28.1 - Published - 5.6K stars

Recent Tags See all

v1.0.2 August 02, 2019
v1.0.1 July 09, 2019
v0.28.1 March 29, 2019
v0.28.0 January 06, 2019
v0.27.2 December 10, 2018
v0.27.1 October 05, 2018
v0.27.0 October 05, 2018
v0.26.10 May 13, 2018
v0.26.7 September 15, 2017
0.26.4 August 14, 2017
v0.26.3 April 12, 2017
v0.26.0 March 04, 2017
v0.25.4 February 17, 2017
v0.25.3 February 17, 2017
v0.25.0 January 11, 2017

Interesting Forks See all

vorjdux/react-native-image-picker
A React Native module that allows you to use the native UIImagePickerController UI to select a ph...
Objective-C - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-08-30 12:44:19 UTC

Login to resync this repository