react-native-image-picker / react-native-image-picker

:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

react-native-image-picker 🎆

A React Native module that allows you to select a photo/video from the device library or camera.

Installation

yarn add react-native-image-picker

New Architecture

To take advantage of the new architecture run-

iOS

RCT_NEW_ARCH_ENABLED=1 npx pod-install ios

Android

Set newArchEnabled to true inside android/gradle.properties

Pre-Fabric (AKA not using the new architecture)

npx pod-install ios

Post-install Steps

iOS

Add the appropriate keys to your Info.plist depending on your requirement:

Requirement	Key
Select image/video from photos	NSPhotoLibraryUsageDescription
Capture Image	NSCameraUsageDescription
Capture Video	NSCameraUsageDescription & NSMicrophoneUsageDescription

Android

No permissions required (saveToPhotos requires permission check).

Note: This library does not require Manifest.permission.CAMERA, if your app declares as using this permission in manifest then you have to obtain the permission before using launchCamera.

API Reference

Methods

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

launchCamera()

Launch camera to take photo or video.

launchCamera(options?, callback);

// You can also use as a promise without 'callback':
const result = await launchCamera(options?);

See Options for further information on options.

The callback will be called with a response object, refer to The Response Object.

launchImageLibrary

Launch gallery to pick image or video.

launchImageLibrary(options?, callback)

// You can also use as a promise without 'callback':
const result = await launchImageLibrary(options?);

See Options for further information on options.

The callback will be called with a response object, refer to The Response Object.

Options

Option	iOS	Android	Web	Description
mediaType	OK	OK	OK	photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now.
maxWidth	OK	OK	NO	To resize the image.
maxHeight	OK	OK	NO	To resize the image.
videoQuality	OK	OK	NO	low, medium, or high on iOS, low or high on Android.
durationLimit	OK	OK	NO	Video max duration (in seconds).
quality	OK	OK	NO	0 to 1, photos.
cameraType	OK	OK	NO	'back' or 'front' (May not be supported in few android devices).
includeBase64	OK	OK	OK	If true, creates base64 string of the image (Avoid using on large image files due to performance).
includeExtra	OK	OK	NO	If true, will include extra data which requires library permissions to be requested (i.e. exif data).
saveToPhotos	OK	OK	NO	(Boolean) Only for launchCamera, saves the image/video file captured to public photo.
selectionLimit	OK	OK	OK	Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1.
presentationStyle	OK	NO	NO	Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext.
formatAsMp4	OK	NO	NO	Converts the selected video to MP4 (iOS Only).
assetRepresentationMode	OK	NO	NO	A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'.

The Response Object

key	iOS	Android	Web	Description
didCancel	OK	OK	OK	true if the user cancelled the process
errorCode	OK	OK	OK	Check ErrorCode for all error codes
errorMessage	OK	OK	OK	Description of the error, use it for debug purpose only
assets	OK	OK	OK	Array of the selected media, refer to Asset Object

Asset Object

key	iOS	Android	Web	Photo/Video	Requires Permissions	Description
base64	OK	OK	OK	PHOTO ONLY	NO	The base64 string of the image (photos only)
uri	OK	OK	OK	BOTH	NO	The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri.
originalPath	NO	OK	NO	BOTH	NO	The original file path.
width	OK	OK	OK	BOTH	NO	Asset dimensions
height	OK	OK	OK	BOTH	NO	Asset dimensions
fileSize	OK	OK	NO	BOTH	NO	The file size
type	OK	OK	NO	BOTH	NO	The file type
fileName	OK	OK	NO	BOTH	NO	The file name
duration	OK	OK	NO	VIDEO ONLY	NO	The selected video duration in seconds
bitrate	---	OK	NO	VIDEO ONLY	NO	The average bitrate (in bits/sec) of the selected video, if available. (Android only)
timestamp	OK	OK	NO	BOTH	YES	Timestamp of the asset. Only included if 'includeExtra' is true
id	OK	OK	NO	BOTH	YES	local identifier of the photo or video. On Android, this is the same as fileName

Note on file storage

Image/video captured via camera will be stored in temporary folder allowing it to be deleted any time, so don't expect it to persist. Use saveToPhotos: true (default is false) to save the file in the public photos. saveToPhotos requires WRITE_EXTERNAL_STORAGE permission on Android 28 and below (The permission has to obtained by the App manually as the library does not handle that).

For web, this doesn't work.

ErrorCode

Code	Description
camera_unavailable	Camera not available on device
permission	Permission not satisfied
others	Other errors (check errorMessage for description)

License

MIT

react-native-image-picker's Issues

[Android] Cant select images in the library

When i reach the photo gallery all the pictures are disabled , Any ideas why ?

Send file object to Parse for upload

This is an amazing package, thank you so much for building it, I was wondering how can I get file object that can be attached to a Parse object?

width and height of the image

Thank you so much for this module AGAIN :)

It would be great to be able to get the original image dimensions.
I am using the component that displays image in full screen mode and it would be great to display it using the original proportions

Scale size in response

When specifying maxWidth, is there a way to return the new scaled size?

Update: Reviewing the code, I think the issue is only is iOS.

hope more nicer

Who can make it just like instagram take photo

I can't get the picture successful

[Android] Build failed

Hey guys,

I used the guide to add image picker to my app, however, when I run react-native run-android I run into this issue

I saw that someone had this issue in the past, but there was a fix for it. However, I'm having this issue now. Thanks for your help!

is it possible to get both 'uri' and 'data uri' returned when chosen select from the library

In my application I need to save the value of an image as a URI and at the same time I need to send it as data object.

Is it possible to add another option to pass to ImagePicker that will it to return both?

Thank you

Android support

It would be great to have support for this library on Android, using a native module or the React Native Camera Roll API

how to access state from UIImagePickerManager.launchImageLibrary function

this line this.setState({ avatarSource: source });
gave error " this.setState({ avatarSource: source }) _this2.setState is not a function ", any possible other cause of it? I tried different methods to fix it, but still no luck access this in launchImageLibrary.

Code is copied from index.ios.js /node_modules/react-native-image-picker/Example

UIImagePickerManager.launchImageLibrary(options, (didCancel, response) => {
console.log('Response = ', response);
if (didCancel) {
console.log('User cancelled image picker');
} else {
if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
console.log('User pick one image');
// You can display the image using either:
//const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
//this.startuploadnewcargo();
const source = {
uri: response.uri.replace('file://', ''),
isStatic: true
};
this.setState({ avatarSource: source });
console.log('after setState showImagePicker');
}
}
});
}

It works great on simulator ,but failed with real device

hi,
it works great on simulator ,but on the real device (iOS 8.1)showing this error message:
undefined is not an object(evaluating 'UIImagePickerManager.showImagePicker")

Is there something wrong with linking lib ?

Your early reply will be appreciated.Thanks !

Image Compression

So far this has been working great. After taking a picture through the camera it grabs the UIImage *image = info[UIImagePickerControllerOriginalImage]; which is quite large. Any idea on how to get the image size smaller?

document path changes while reinstall app

should use a image path relative to document path, and a method to get document path for replacement

Show videos in gallery

Hi, thank you for this package. It helped me a lot, but I was wondering if there is a possibility to also pick a video from the library? thanks

[Android] could you update readme for android installation react-native 0.18.0-rc

my MainActivity.java file is

package com.testapp;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "testapp";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage());
    }
}

Custom button actions?

Hi, I'm just testing out the module, great job.
I can define custom buttons text, but how do I link them to actions, the same way UIImagePickerManager.showImagePicker does?

Thanks!

Get image details

Hi,
When I pick an image from the camera roll the response returns:
../BDBBE016-79D4-4950-82F8-A3E7B97634F9.jpg

Is there a way to get the real file name and it's size?

Thanks!

is it possible to get both image url and data url

Some minor bug in new version

I am testing my app in simulator
The old version response has assets-library:// uri,
The new version response has file:/// uri that is not displayed in simulator :)

response = 'assets-library://asset/asset.JPG?id=88B4CF5E-2B29-4220-AB0E-2F7F1B7C1238&ext=JPG'

response =  {
  data: "/9j/4AAQ...,
  isVertical: false,
  uri: "file:///Users/Ellen/Library/Developer/CoreSimulator/Devices/E7DAB3E2-1E01-4B4C-8F1A-    92B6A16DA4E4/data/Containers/Data/Application/05195A50-2F9A-4EAD-BDDE-63E5DC57ADF8/tmp/DEE0E119-9404-47F4-B2E2-7AF61BE67C4B.jpg"
}

showImagePicker from Modal not working

When calling showImagePicker from Facebook's Modal component I get the following error:

Warning: Attempt to present <UIImagePickerController: 0x7f8cde1afc00> on <UIViewController: 0x7f8cded45ba0> whose view is not in the window hierarchy!

Locationinfo

Hey,

I'm new to React native and trying to build a Camera app.
I need to get the locationinformation from a imageresponse. Is this possible with react-native-image-picker?

Thanks in advance!

//O

Sending a image to backend server

Hey there. I am trying to send a image which i get from the response and send it via fetch to my server.

 UIImagePickerManager.showImagePicker(options, (didCancel, response) => {
        console.log('Response = ', response);
        if (didCancel) {
            console.log('User cancelled image picker');
        }
        else {
            var fileName = response.uri.substring(response.uri.lastIndexOf("/") + 1);
            var fsPath = response.uri;
            var binaryResponse = response.data;
            fetch('http://XXXX/user/avatar', {
                method: 'POST', // default 'POST',support 'POST' and 'PUT'
                headers: {
                    'Authorization': AuthStore.getUserTokenWithBearer()
                },
                body: JSON.stringify({image: fsPath})
            }).then(function (response) {
                console.log(response)
            }).catch(function(error){
                console.log(error);
            });
        }

I know this isn´t a modules issue, but trying to find solution from stackoverflow or any other sources failed. Maybe someone has tried this with this component and success?

image chosen from 'My photo stream' displayed as empty

Great component. I am trying to use it in our open source chat app.
It works great if the image was chosen from anything other then 'My Photo Stream'. The same image in 'My photo stream' and in 'Camera Roll' has different url. And the 'Camera Roll' one works fine.

Customize titles in popup (i18n)

Pass titles with params for customize the texts like:

cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Take Photo...", @"Choose from Library..."

no height and width in response

I just installed the new version but when choosing the photo from the library response does not have width and height. Do I need to specify some options?

Cannot read property 'showImagePicker' of undefined

Not able to implement the image picker. It seems like UIImagePickerManager is not defined..

console.log(require('NativeModules'));
=> Object {..}
ActionSheetManager: Object
ActivityIndicatorViewManager: Object
AlertManager: Object
AppState: Object
AsyncLocalStorage: Object
CameraManager: Object
CameraRollManager: Object
ContextExecutor: Object
DatePickerManager: Object
DevMenu: Object
EventDispatcher: Object
ExceptionsManager: Object
HTTPRequestHandler: Object
ImageLoader: Object
ImagePickerIOS: Object
ImageRequestHandler: Object
ImageStoreManager: Object
ImageViewManager: Object
LinkingManager: Object
LocationObserver: Object
MapManager: Object
NavItemManager: Object
NavigatorManager: Object
Networking: Object
PerfStats: Object
PerformanceLogger: Object
PickerManager: Object
ProgressViewManager: Object
RawTextManager: Object
Reachability: Object
ScrollViewManager: Object
SegmentedControlManager: Object
SettingsManager: Object
SliderManager: Object
SourceCode: Object
StatusBarManager: Object
SwitchManager: Object
TabBarItemManager: Object
TabBarManager: Object
TextFieldManager: Object
TextManager: Object
TextViewManager: Object
Timing: Object
UIManager: Object
Vibration: Object
ViewManager: Object
WebSocketExecutor: Object
WebSocketManager: Object
WebViewExecutor: Object
WebViewManager: Object
proto: Object

console.log(UIImagePickerManager);
=> undefined

Here is my code: https://gist.github.com/klausbreyer/bdafe5ab0638bc60cbeb
And Xcode integration see screenshots below:

error:

uploading image from camera taking more time

@marcshilling it was great, It's very useful module, But what the problem is that when i choose image from camera, it take more time when compare with the image from library.

Is it too hard to do multiple image selection?

Cancel from Photos doesn't show under type or response.

If I cancel from the first popup it will let me know but if I click choose from gallery the cancel button on the right of the next page won't tell me it errored out

How to get an asset URI from the base64 image

Hi,
Good stuff with the component! Thanks a lot!

I am able to successfully upload an image to s3 when I choose an existing image from the camera roll. However, I am unable to do so with the base64 data that the 'take picture from camera' returns.

So my questions are:

1. Were you able to upload a base64 image to s3 use xhr? If yes, can you share some code? (specifically the part where/if you converted the base64 so amazon could handle it?)
2. Do you know how I can save the base64 data to an image in the camera roll in order for me to get the asset uri which I can easily upload to s3?

Thanks a lot!

Let Source

I'm missing something. When I include the line,

let source

and compile, the app launches with a white screen; nothing more.

When I comment out that line, all seems to work fine, including selecting a photo from my library, EXCEPT after tapping the "Take Photo" option, which presents an error:

return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));

Thread 1 : Signal SIGBRT

Any idea what I'm missing?

How to select multiple images from library ?

[Android] Do I need to add <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

I could not load the saved image from camera in Android

Do I need: <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> ?

Licence

Hi Marc,
I would like to use your component in our project but I didn't find any information about licence. Have you considered it? I think it is a blocker for almost anybody to use your cool component.

Ability to restrict options

It would be nice to add an option to the JavaScript API that would allow you to only show one option or the other. We have had problems uploading images from the camera, so we want to restrict users to only using images from their library.

If this is something you'd like in the library, I'd be willing to try for a PR in the next day or two.

Build failure

Hi , Just added image picker using the guide but i get this error :

Any ideas ?

UPDATE : solved the issue by adding a missing android folder , maybe you should look into it.

Image Quality. How should I handle it?

I'm using this for the first time and I'm not really experienced in the mobile world.

I want to use this to get a photo and then post it to a server. The photo needs a certain level of quality.

By setting quality to 1.0 it does not put an enough quality for me. Is there any way of handling this?

Why is the example so low? 0.2 in quality?

If anyone can offer explanation and advice I would appreciate it

showImagePicker from Modal still not working

When calling showImagePicker from Facebook's Modal component I get the following error:

Attempting to load the view of a view controller while it is deallocating is not allowed and may result in undefined behavior

Warning: Attempt to present UIImagePickerController: 0x7f8cde1afc00 on UIViewController: 0x7f8cded45ba0 whose view is not in the window hierarchy!

Upload through fetch

Any suggestions on uploading an image to a server using fetch?

Please rename Android folder to lower case

Building the Android app under Linux fails because the include statement in the settings.gradle looks for the android folder with lower case "a" which does not exist. Renaming the "Android" folder to lower case "android" fixed this issue for me.

noData field not being respected

I try setting noData: true and noData: false and I see a data field in the response object either way. Are you sure it works?

`this.setState` no effect

In the function UIImagePickerManager.showImagePicker, use this.setState set some state, no effect...

Code like :

  componentDidMount: function() {
    var self = this;
    UIImagePickerManager.showImagePicker({title: 'select...'}, function (type, response) {
      console.log(self.state.imageSource);
      self.setState({imageSource: {uri: response}});
      console.log(self.state.imageSource);  // no effect
    });
  },

React native version 0.6.

How can the taken photo/selected be displayed in the app?

I have installed the default react app and then added the code from this project, but when I try to reload it I get a "Cannot read property 'avatarSource' of null"

undefined is not an object

I am getting an error that reads: undefined is not an object(evaluating 'NativeViewSnapshotter.SaveSnapshotToPath') from ViewSnapshotter.ios.js. Any idea how to resolve this?

android build error (cannot find symbol [f])

/Users/james/Dropbox/Development/react/Builder/node_modules/react-native-image-picker/android/src/main/java/com/imagepicker/ImagePickerModule.java:333: error: cannot find symbol
f.createNewFile();
^
symbol: variable f
location: class ImagePickerModule
/Users/james/Dropbox/Development/react/Builder/node_modules/react-native-image-picker/android/src/main/java/com/imagepicker/ImagePickerModule.java:339: error: cannot find symbol
fo = new FileOutputStream(f);
^
symbol: variable f
location: class ImagePickerModule
/Users/james/Dropbox/Development/react/Builder/node_modules/react-native-image-picker/android/src/main/java/com/imagepicker/ImagePickerModule.java:348: error: cannot find symbol
return f.getAbsolutePath();
^
symbol: variable f
location: class ImagePickerModule

Broken when opened in landscape

If you call UIImagePickerManager.showImagePicker while in landscape and then click Take Photo... it comes up with weird orientation (up and down moves image left and right).

If user rotates the phone to landscape after tapping Take Photo... everything is fine.

User can fix it by rotating to portrait and back.

[Android] Can't display image with uri

As given instruction in readme.md file i make changes but it is not working, So is there anything else which i need to configure apart from the given instruction.

I am following this way.

1 react-native init imageUploaderAndroid
2 npm install react-native-image-picker@latest --save
3 changes in file: android/settings.gradle
4 changes in // file: android/app/build.gradle
5 changes in // file: android/app/src/main/java/com/myappli/MainActivity.java

Project structure.
imageUploaderAndroid

• android
• ios
• node_modules
• index.ios.js
• index.android.js

Image is not saving in Camera Roll

When I take a photo the image is not being saved in the Camera Roll

I am using the following options

UIImagePickerManager.showImagePicker({
    title: 'Select Photo',
    cancelButtonTitle: 'Cancel',
    takePhotoButtonTitle: 'Take Photo',
    chooseFromLibraryButtonTitle: 'Choose from Library',
    returnBase64Image: false,
    returnIsVertical: false,
    quality: 0.8,
    noData: true,
    storageOptions: {
        skipBackup: true
    }
}

I have also tried setting storageOptions.path to different values.

Build Error

iOS _this2.setSrare is not a function

I am working on a project with react-native 0.17.
The majority part of image picker code is according to iOS Example/index.iOS.js file, which invoke selectPhotoTapped() method like this

    <TouchableOpacity onPress={::this.selectPhotoTapped}>
    <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
    { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
    <Image style={styles.avatar} source={this.state.avatarSource} />
    }
    </View>
    </TouchableOpacity>

It worked well with react-native 0.12,but in 0.17, it told me that '{::this.selectPhotoTapped}' was 'unexpected token'.And I modified to '{this.selectPhotoTapped}'.
But after picking up image from the library,I can't get response.ui,either can I get the image path.

I am new to react-native,if there had something wrong,I will appreciate for your help!

[Android] IOException: open failed: ENOENT (No such file or directory)

when I pick up a image from system,I got this error:

W/System.err( 5279): java.io.IOException: open failed: ENOENT (No such file or directory)
W/System.err( 5279):    at java.io.File.createNewFile(File.java:941)
W/System.err( 5279):    at com.imagepicker.ImagePickerModule.getResizedImage(ImagePickerModule.java:331)
W/System.err( 5279):    at com.imagepicker.ImagePickerModule.onActivityResult(ImagePickerModule.java:245)
W/System.err( 5279):    at com.imagepicker.ImagePickerPackage.handleActivityResult(ImagePickerPackage.java:46)
W/System.err( 5279):    at com.jarvis.MainActivity.onActivityResult(MainActivity.java:65)
W/System.err( 5279):    at android.app.Activity.dispatchActivityResult(Activity.java:6139)
W/System.err( 5279):    at android.app.ActivityThread.deliverResults(ActivityThread.java:3535)
W/System.err( 5279):    at android.app.ActivityThread.handleSendResult(ActivityThread.java:3582)
W/System.err( 5279):    at android.app.ActivityThread.access$1300(ActivityThread.java:144)
W/System.err( 5279):    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1327)
W/System.err( 5279):    at android.os.Handler.dispatchMessage(Handler.java:102)
W/System.err( 5279):    at android.os.Looper.loop(Looper.java:135)
W/System.err( 5279):    at android.app.ActivityThread.main(ActivityThread.java:5221)
W/System.err( 5279):    at java.lang.reflect.Method.invoke(Native Method)
W/System.err( 5279):    at java.lang.reflect.Method.invoke(Method.java:372)
W/System.err( 5279):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
W/System.err( 5279):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
W/System.err( 5279): Caused by: android.system.ErrnoException: open failed: ENOENT (No such file or directory)
W/System.err( 5279):    at libcore.io.Posix.open(Native Method)
W/System.err( 5279):    at libcore.io.BlockGuardOs.open(BlockGuardOs.java:186)
W/System.err( 5279):    at java.io.File.createNewFile(File.java:934)
W/System.err( 5279):    … 16 more
W/System.err( 5279):    at com.jarvis.MainActivity.onActivityResult(MainActivity.java:65)
W/System.err( 5279):    at android.app.Activity.dispatchActivityResult(Activity.java:6139)
W/System.err( 5279):    at android.app.ActivityThread.deliverResults(ActivityThread.java:3535)
W/System.err( 5279):    at android.app.ActivityThread.handleSendResult(ActivityThread.java:3582)
W/System.err( 5279):    at android.app.ActivityThread.access$1300(ActivityThread.java:144)
W/System.err( 5279):    at android.app.ActivityThread$H.handleMessage(Activity

"showImagePicker " is being exported

Unfortunately, I'm not getting this consistently, so I'm not sure wtf is going on yet. Still digging :(