Skip to content

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

License

Notifications You must be signed in to change notification settings

fuzzpedal/react-native-imagepicker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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'
});

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%