A React Native module which wraps ActionSheetIOS, CameraRoll and undocummented ImagePickerIOS to select a photo from the PhotoLibrary or CameraRoll. No external plugins needed.
npm install react-native-imagepicker
- 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. - 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.
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
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'
});