slavik0329/react-native-imagepicker

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

react-native-imagepicker

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

Setup

1. npm install react-native-imagepicker
2. You need to include the RCTCameraRoll.xcodeproj (react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj) in your project Libraries, and then make sure libRCTCameraRoll.a is included under "Link Binary With Libraries" in the Build Phases tab. Get more info on official site: Linking Libraries. Steps are very similar.
3. IMPORTANT: some versions before v0.17 have 2 bugs (#4411, #4412). So you need to replace file react-native/Libraries/CameraRoll/RCTImagePickerManager.m with this one or update to v0.17.

Usage

Basics

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

imagePicker.open({
    takePhoto: true,
    useLastPhoto: true,
    chooseFromLibrary: true
}).then(function(imageUri) {
    console.log('imageUri', imageUri);
}, function() {
    console.log('user cancel');
});

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

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

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

imageUri usage

imageUri from Promise can be directly passed to <Image/> or FormData

...
render() {
    <Image source={uri: imageUri, isStatic: true}/>
} 
...

var fd = new FormData();

fd.append('photo', {
    uri: imageUri,
    type: 'image/jpeg',
    name: 'photo.jpg'
});