https://github.com/doochik/react-native-imagepicker
A React Native module which wraps ActionSheetIOS, CameraRoll and ImagePickerIOS to select a photo from the library or camera
https://github.com/doochik/react-native-imagepicker
Last synced: 9 months ago
JSON representation
A React Native module which wraps ActionSheetIOS, CameraRoll and ImagePickerIOS to select a photo from the library or camera
- Host: GitHub
- URL: https://github.com/doochik/react-native-imagepicker
- Owner: doochik
- License: mit
- Created: 2015-11-29T10:27:58.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-25T19:42:48.000Z (almost 9 years ago)
- Last Synced: 2024-11-27T22:42:40.777Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 19
- Watchers: 2
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-imagepicker
A React Native module which wraps [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html),
[CameraRoll](https://facebook.github.io/react-native/docs/cameraroll.html) and
[ImagePickerIOS](https://facebook.github.io/react-native/docs/imagepickerios.html)
to select a photo from the PhotoLibrary or CameraRoll. No external plugins needed.
## Setup
1. `npm install --save react-native-imagepicker`
2. [Setup CameraRoll](http://facebook.github.io/react-native/releases/docs/cameraroll.html)
## Usage
Basics
```js
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
```js
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
```js
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 `` or `FormData`
```js
...
render() {
}
...
```
```js
const fd = new FormData();
fd.append('photo', {
uri: uri,
type: 'image/jpeg',
name: 'photo.jpg'
});
```
## Known bugs
1. ImagePickerIOS take photo with wrong orientation [#12249](https://github.com/facebook/react-native/pull/12249).
Fixed in RN >= 0.48.