react-native-image-picker-with-bytes

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:

Requires iOS 8 or higher

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 Make sure you have 'Create Groups' selected
• Make sure UIImagePickerManager.m is listed under 'Compile Sources' in your project's 'Build Phases' tab
• 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', // specify null or empty string to remove the title
  cancelButtonTitle: 'Cancel',
  takePhotoButtonTitle: 'Take Photo...', // specify null or empty string to remove this button
  chooseFromLibraryButtonTitle: 'Choose from Library...', // specify null or empty string to remove this button
  customButtons: {
    'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
  },
  maxWidth: 100,
  maxHeight: 100,
  quality: 0.2,
  allowsEditing: false, // Built in iOS functionality to resize/reposition the image
  noData: false, // Disables the base64 `data` field from being generated (greatly improves performance on large photos)
  storageOptions: { // if this key is provided, the image will get saved in the documents directory (rather than a temporary directory)
    skipBackup: true, // image will NOT be backed up to icloud
    path: 'images' // will save image at /Documents/images rather than the root
  }
};

// The first arg will be the options object for customization, the second is
// your callback which sends bool: didCancel, object: response.
//
// response.data is the base64 encoded image data
// response.uri is the uri to the local file asset on the device
// response.isVertical will be true if the image is vertically oriented
// response.width & response.height give you the image dimensions
UIImagePickerManager.showImagePicker(options, (didCancel, response) => {
  console.log('Response = ', response);

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

      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:
UIImagePickerManager.launchCamera(options, (didCancel, response)  => {
  // Same code as in above section!
});

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