react-native-imagepicker

A React Native module which wraps ActionSheetIOS, CameraRoll and ImagePickerIOS to select a photo from the library or camera

Usage no npm install needed!

<script type="module">
  import reactNativeImagepicker from 'https://cdn.skypack.dev/react-native-imagepicker';
</script>

README

react-native-imagepicker

A React Native module which wraps ActionSheetIOS, CameraRoll and ImagePickerIOS to select a photo from the PhotoLibrary or CameraRoll. No external plugins needed.

Setup

  1. npm install --save react-native-imagepicker
  2. Setup CameraRoll

Usage

Basics

const imagePicker = require('react-native-imagepicker');
imagePicker.open({
    takePhoto: true,
    useLastPhoto: true,
    chooseFromLibrary: true
}).then(({ uri, width, height }) => {
    console.log('image asset', uri, width, height);
}, (error) => {
    // Typically, user cancel  
    console.log('error', error);
});

Each button (takePhoto, useLastPhoto, chooseFromLibrary) can be configure in following way

imagePicker.open({
    cancelTitle: 'Your custom title',
    takePhoto: {
        title: 'Your custom title',
        config: { /* Config object to ImagePickerIOS.openCameraDialog() */ }
    },
    useLastPhoto: {
        title: 'Your custom title',
        config: { /* Config object to CameraRoll.getPhotos() */ }
    },
    chooseFromLibrary: {
        title: 'Your custom title',
        config: { /* Config object to ImagePickerIOS.openSelectDialog() */ }
    },
    ...
})

Also you can disable some of buttons

const imagePicker = require('react-native-imagepicker');

imagePicker.open({
    takePhoto: 'Custom title',  // Shorthand for custom title
    useLastPhoto: false, // disable this button
    chooseFromLibrary: true // get default values
})

uri usage

uri can be directly passed to <Image/> or FormData

...
render() {
    <Image source={{ uri: uri, isStatic: true }}/>
} 
...
const fd = new FormData();
fd.append('photo', {
    uri: uri,
    type: 'image/jpeg',
    name: 'photo.jpg'
});

Known bugs

  1. ImagePickerIOS take photo with wrong orientation #12249. You can replace RCTImagePickerManager.m with version from PR.