@smrnvmkhl/react-native-image-picker v0.1.2

React Native Image Picker

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. (based on react-native-image-picker)

Installation

yarn add @smrnvmkhl/react-native-image-picker
npx react-native link @smrnvmkhl/react-native-image-picker

Android

iOS

Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription keys to your Info.plist with strings describing why your app needs these permissions.

Info.plist

<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to your microphone (for videos)</string>
  </dict>
</plist>

Usage

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

  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

ImagePicker.open(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 };

    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 you can do the following:

ImagePicker.camera(options, (response) => {});
ImagePicker.library(options, (response) => {});

License

MIT