A React Native module which wraps ActionSheetIOS, CameraRoll and ImagePickerIOS to select a photo from the PhotoLibrary or CameraRoll. No external plugins needed.
npm install --save react-native-imagepicker
- Setup CameraRoll
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
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'
});
- ImagePickerIOS take photo with wrong orientation #12249. Fixed in RN >= 0.48.