react-native-imagepicker
v2.0.0
Published
A React Native module which wraps ActionSheetIOS, CameraRoll and ImagePickerIOS to select a photo from the library or camera
Downloads
7
Maintainers
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
npm install --save react-native-imagepicker
- 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
- ImagePickerIOS take photo with wrong orientation #12249.
You can replace
RCTImagePickerManager.m
with version from PR.