React Native Pick Image From Camera and Gallery Android iOS Tutorial

admin September 8, 2017 September 8, 2017React Native

Selecting image from mobile phone gallery and capture image from camera is very typical for beginners in react native. But now we would do this type of functionality in our react native application using an external library called as React Native Image Picker library. This library supports all type of react native versions and also comes with both android and iOS full application support. So in this tutorial we would going to create a react native application that pick image from mobile phone gallery and select image from mobile phone camera and after selecting show that image inside Image component.

What we are doing in current project – Must Read 😛 :

Selecting Image from both Android and iOS mobile phone gallery.
Capturing image from both Android and iOS device camera.
Show captured image inside Image component.
Show selected image from gallery inside Image component.

Important Note : You must follow all the steps exactly as i did in this tutorial, So don’t skip any step and read the full tutorial. Happy Reading 🙂 .

Contents in this project React Native Pick Image From Camera and Gallery Tutorial :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. After creating project Start Command Prompt in your system using Run As Administrator .

3. Now using command prompt locate your project’s folder .

4. Type npm install react-native-image-picker@latest --save inside your project like i did in below screenshot.

5. After successfully installed the React Native Image Picker library you would see message like below screenshot.

6. After installing the library type react-native link command inside your project’s folder. This command would refresh the complete project folder. This command is very important .

7. Screenshot after running react-native link command.

8. Configure Project for Android Devices :

1. Open build.gradle file present in your folder located in YourProject/android .

2. Replace classpath ‘com.android.tools.build:gradle:2.2.+’ on previous line.

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {

       classpath 'com.android.tools.build:gradle:2.2.+'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

repositories {

jcenter()

}

dependencies {

classpath 'com.android.tools.build:gradle:2.2.+'

// NOTE: Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

allprojects {

repositories {

mavenLocal()

jcenter()

maven {

// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

url "$rootDir/../node_modules/react-native/android"

}

3. Now open YourProjectName/android/gradle/wrapper/gradle-wrapper.properties file and replace previous distributionUrl line to this distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip .Below is the complete source code of gradle-wrapper.properties file.

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

distributionBase=GRADLE_USER_HOME

distributionPath=wrapper/dists

zipStoreBase=GRADLE_USER_HOME

zipStorePath=wrapper/dists

distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

4. Open AndroidManifest.xml file present inside YourProjectName\android\app\src\main and Add CAMERA permission and WRITE_EXTERNAL_STORAGE permission.

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

1 2	<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

5. Complete source code of AndroidManifest.xml file after adding both permissions.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.imagepickerproject"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
	
	<uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.imagepickerproject"

android:versionCode="1"

android:versionName="1.0">

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-sdk

android:minSdkVersion="16"

android:targetSdkVersion="22" />

<application

android:name=".MainApplication"

android:allowBackup="true"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:windowSoftInputMode="adjustResize">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

9. Configure Project for iOS device :

1. Open ImagePickerProject.xcodeproj file in Xcode in MAC.

2. Open Info.plist file in Xcode.

3. Click on small plus icon present just above the Information Property List .

4. Select Privacy – Camera Usages Description permission like i did in below screenshot.

6. Again Select Privacy – Photo Library Usages permission .

7. Now front of both permissions double click and Add some text like i did, So you remember why this permisson is added.

Here you go now your application is successfully configured for iOS devices. Now its time to start coding .

10. Start Coding :

1. Import AppRegistry, StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image component.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio,
  TouchableOpacity,
  Image,
} from 'react-native';

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

PixelRatio,

TouchableOpacity,

Image,

} from 'react-native';

2. Import ImagePicker library.

import ImagePicker from 'react-native-image-picker';

1	import ImagePicker from 'react-native-image-picker';

3. Create State inside your mail class and inside that state create variable named as ImageSource = null .

The ImageSource variable is used to store the selected image URI path.

class ImagePickerProject extends React.Component {
  
    state = {

      ImageSource: null,
    
    };

}

class ImagePickerProject extends React.Component {

state = {

ImageSource: null,

};

}

4. Create function selectPhotoTapped() . This is a inbuilt function of this library.

selectPhotoTapped() {
      const options = {
        quality: 1.0,
        maxWidth: 500,
        maxHeight: 500,
        storageOptions: {
          skipBackup: true
        }
      };

selectPhotoTapped() {

const options = {

quality: 1.0,

maxWidth: 500,

maxHeight: 500,

storageOptions: {

skipBackup: true

}

};

5. Now before ending selectPhotoTapped() function create another function inside its scope named as ImagePicker.showImagePicker() . This is also inbuilt function of React Native Image Picker Library.

selectPhotoTapped() {
      const options = {
        quality: 1.0,
        maxWidth: 500,
        maxHeight: 500,
        storageOptions: {
          skipBackup: true
        }
      };
  
      ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);
  
        if (response.didCancel) {
          console.log('User cancelled photo picker');
        }
        else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        }
        else {
          let source = { uri: response.uri };
  
          // You can also display the image using data:
          // let source = { uri: 'data:image/jpeg;base64,' + response.data };
  
          this.setState({

            ImageSource: source

          });
        }
      });
    }

selectPhotoTapped() {

const options = {

quality: 1.0,

maxWidth: 500,

maxHeight: 500,

storageOptions: {

skipBackup: true

}

};

ImagePicker.showImagePicker(options, (response) => {

console.log('Response = ', response);

if (response.didCancel) {

console.log('User cancelled photo picker');

}

else if (response.error) {

console.log('ImagePicker Error: ', response.error);

}

else if (response.customButton) {

console.log('User tapped custom button: ', response.customButton);

}

else {

let source = { uri: response.uri };

// You can also display the image using data:

// let source = { uri: 'data:image/jpeg;base64,' + response.data };

this.setState({

ImageSource: source

});

}

});

}

6. Create a Parent View inside the render’s return block.

render() {
      return (
        <View style={styles.container}>

          

        </View>
      );
    }

render() {

return (

</View>

);

}

7. Now inside the Parent View component create TouchableOpacity and call the selectPhotoTapped() function on its onPress.

render() {
      return (
        <View style={styles.container}>

          <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>

            

          </TouchableOpacity>

        </View>
      );
    }

render() {

return (

</TouchableOpacity>

</View>

);

}

8. Now Create a Sub View inside TouchableOpacity now using ? ( Ternary Operator ) Set condition that If ImageSource variable === null then it will show a Text component inside the TouchableOpacity or if There is Image Selected( ImageSource variable is full) then it will show the selected image inside the Image component.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>

            <View style={styles.ImageContainer}>

            { this.state.ImageSource === null ? <Text>Select a Photo</Text> :
              <Image style={styles.ImageContainer} source={this.state.ImageSource} />
            }

            </View>

</TouchableOpacity>

{ this.state.ImageSource === null ? <Text>Select a Photo</Text> :

}

</View>

</TouchableOpacity>

9. Create Custom CSS Style sheet.

container : for Parent View.

ImageContainer : for Image Component ( In which the Selected or Captured Image will be displayed. ).

const styles = StyleSheet.create({

    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#FFF8E1'
    },

    ImageContainer: {
      borderRadius: 10,
      width: 250,
      height: 250,
      borderColor: '#9B9B9B',
      borderWidth: 1 / PixelRatio.get(),
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#CDDC39',
      
    },

  });

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#FFF8E1'

ImageContainer: {

borderRadius: 10,

width: 250,

height: 250,

borderColor: '#9B9B9B',

borderWidth: 1 / PixelRatio.get(),

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#CDDC39',

});

10. Complete source code for index.android.js / index.ios.js file.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio,
  TouchableOpacity,
  Image,
} from 'react-native';

import ImagePicker from 'react-native-image-picker';

class ImagePickerProject extends React.Component {
  
    state = {

      ImageSource: null,
    
    };
  
    selectPhotoTapped() {
      const options = {
        quality: 1.0,
        maxWidth: 500,
        maxHeight: 500,
        storageOptions: {
          skipBackup: true
        }
      };
  
      ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);
  
        if (response.didCancel) {
          console.log('User cancelled photo picker');
        }
        else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        }
        else {
          let source = { uri: response.uri };
  
          // You can also display the image using data:
          // let source = { uri: 'data:image/jpeg;base64,' + response.data };
  
          this.setState({

            ImageSource: source

          });
        }
      });
    }
  
    render() {
      return (
        <View style={styles.container}>

          <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>

            <View style={styles.ImageContainer}>

            { this.state.ImageSource === null ? <Text>Select a Photo</Text> :
              <Image style={styles.ImageContainer} source={this.state.ImageSource} />
            }

            </View>

          </TouchableOpacity>

        </View>
      );
    }
  
  }
  
  const styles = StyleSheet.create({

    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#FFF8E1'
    },

    ImageContainer: {
      borderRadius: 10,
      width: 250,
      height: 250,
      borderColor: '#9B9B9B',
      borderWidth: 1 / PixelRatio.get(),
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#CDDC39',
      
    },

  });

AppRegistry.registerComponent('ImagePickerProject', () => ImagePickerProject);

100

101

102

103

104

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

PixelRatio,

TouchableOpacity,

Image,

} from 'react-native';

import ImagePicker from 'react-native-image-picker';

class ImagePickerProject extends React.Component {

state = {

ImageSource: null,

};

selectPhotoTapped() {

const options = {

quality: 1.0,

maxWidth: 500,

maxHeight: 500,

storageOptions: {

skipBackup: true

}

};

ImagePicker.showImagePicker(options, (response) => {

console.log('Response = ', response);

if (response.didCancel) {

console.log('User cancelled photo picker');

}

else if (response.error) {

console.log('ImagePicker Error: ', response.error);

}

else if (response.customButton) {

console.log('User tapped custom button: ', response.customButton);

}

else {

let source = { uri: response.uri };

// You can also display the image using data:

// let source = { uri: 'data:image/jpeg;base64,' + response.data };

this.setState({

ImageSource: source

});

}

});

}

render() {

return (

{ this.state.ImageSource === null ? <Text>Select a Photo</Text> :

}

</View>

</TouchableOpacity>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#FFF8E1'

ImageContainer: {

borderRadius: 10,

width: 250,

height: 250,

borderColor: '#9B9B9B',

borderWidth: 1 / PixelRatio.get(),

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#CDDC39',

});

AppRegistry.registerComponent('ImagePickerProject', () => ImagePickerProject);

Screenshots in iOS device :

Screenshots in Android Device :

Important Note : In iOS simulator camera will not be worked, because iOS simulator dose not support camera so you need a real iOS mobile phone device to Test camera.

Integrate Firebase SDK in React Native Android Project

React Navigation 5.x Send Data From One Screen To Another React Native Example Tutorial

Add Custom External Text Fonts in React Native App Android iOS Tutorial

74 Comments

Dave
October 18, 2017 at 9:37 am

Fantastic tutorial. Good job.

Reply
- admin
  October 18, 2017 at 1:00 pm
  
  Thanks Dave 🙂
  
  Reply
Lakshya Gupta
December 1, 2017 at 8:04 am

undefined is not an object (evaluating ‘ImagePickerManager.showImagePicker’)
Getting this error

Reply
- admin
  December 1, 2017 at 11:37 am
  
  Lakshya please install the library again .
  
  Reply
- Anup Samanta
  December 19, 2017 at 8:56 am
  
  Dear Lakshya, I think you missed this command ‘react-native link’ to run from terminal . After installing : ‘npm install [email protected] –save’, you must have to run the command ‘react-native link’.
  
  Reply
- Mandar
  April 4, 2018 at 12:55 pm
  
  undefined is not an object (evaluating ‘ImagePickerManager.showImagePicker’)
  Getting this error . ….. got same isuue me as well …. what you did exactly to solve this
  
  Reply
  - admin
    April 4, 2018 at 3:53 pm
    
    Try to reinstall the library .
    
    Reply
  - Rodrigo Soares
    July 27, 2018 at 2:48 am
    
    I have to do Manual Installation to solve this.
    https://github.com/react-community/react-native-image-picker
    
    Reply
- Pranjal Narola
  September 10, 2018 at 6:29 am
  
  I’ve same problem any solution ??
  I’ve android emulator
  
  Reply
Anup
December 19, 2017 at 8:50 am

Nice tutorial. Wonderful explanation. Thanks….

Reply
- admin
  December 19, 2017 at 10:35 am
  
  Welcome Anup 🙂 .
  
  Reply
Shivam
February 8, 2018 at 10:24 am

Nice tutorial. Thanks

Reply
- admin
  February 8, 2018 at 1:13 pm
  
  Welcome Shivam 🙂 .
  
  Reply
Rishabh
February 11, 2018 at 12:27 pm

Love it! 😀

Reply
- admin
  February 11, 2018 at 3:02 pm
  
  Welcome Rishabh 🙂 .
  
  Reply
Ramesh
February 14, 2018 at 7:38 am

how to save the image taken with camera in different location?

Reply
- admin
  February 14, 2018 at 7:43 am
  
  Ramesh currently i have not tried yet this type of functionality .
  
  Reply
Bikash
February 15, 2018 at 11:43 am

Thank you
It works pretty well with the Android Emulator and also on the device.

Reply
- admin
  February 15, 2018 at 1:24 pm
  
  Welcome bro 🙂 .
  
  Reply
Saravanan R
March 11, 2018 at 10:34 pm

Great tutorial ! Helped me a lot !! Thanks!!! 🙂

Reply
- admin
  March 12, 2018 at 1:12 am
  
  Welcome Saravanan 🙂 .
  
  Reply
george
March 26, 2018 at 9:10 am

i Got like
error: cannot find symbol
new ImagePickerPackage(),
^
symbol: class ImagePickerPackage
2 errors
Incremental compilation of 1 classes completed in 5.908 secs.
:app:compileDebugJavaWithJavac FAILED

Reply
- admin
  March 26, 2018 at 5:00 pm
  
  George try to install the library again .
  
  Reply
  - george
    March 29, 2018 at 8:26 am
    
    thanks … i missed compile project(‘:react-native-image-picker’) in android/App/build.gradle
    
    Reply
    - admin
      March 29, 2018 at 11:48 am
      
      Welcome George 🙂 .
      
      Reply
Hüseyin Sivri
April 4, 2018 at 9:21 am

A great, simple document, thank you very much. I could run camera functionality with your explanations after struggling two whole days.

One more question, how can I enable to retrieve only last n images instead of whole images from a phone?

Thanks & regards,

Huseyin

Reply
- admin
  April 4, 2018 at 10:57 am
  
  Welcome Huseyin 🙂 , what do you mean by ‘how can I enable to retrieve only last n images instead of whole images from a phone?’ please explain your question more briefly .
  
  Reply
Hüseyin Sivri
April 4, 2018 at 2:30 pm

Thank you.

I want to show only latest 3-4 images from the library after taking a photo.

Thanks & regards

Reply
- admin
  April 5, 2018 at 12:59 am
  
  Sorry bro, i don’t know .
  
  Reply
vishal
April 13, 2018 at 10:33 am

undefined is not an object (evaluating ‘ImagePickerManager.showImagePicker’)

Reply
- admin
  April 13, 2018 at 11:14 am
  
  Vishal try to re-install the library again and make sure you have execute the link command after done installation.
  
  Reply
Sanjeep
April 18, 2018 at 1:29 pm

Sir this tutorial is for ios only??????????

Reply
- admin
  April 18, 2018 at 4:27 pm
  
  No, Sanjeep this tutorial works on both Android and iOS devices.
  
  Reply
himanshu bhardwaj
April 24, 2018 at 12:35 pm

alert show but take photo and choose from library not working

Reply
- admin
  April 24, 2018 at 12:51 pm
  
  Trying to re-install the library Himanshu and make sure after install you’ll run react-native link command.
  
  Reply
Swati
April 30, 2018 at 11:51 am

Without pressing any button can image capture with 3 sec countdown timer and after that move to next page??

Reply
Swati
May 1, 2018 at 1:32 pm

Without pressing any button can image capture with 3 sec countdown timer and after that move to next page????

Reply
- admin
  May 1, 2018 at 2:35 pm
  
  Sorry swati we haven’t tried that yet .
  
  Reply
dharma
May 11, 2018 at 11:55 am

how can i captured multiple picture and add into list or in pager

Reply
- admin
  May 13, 2018 at 5:48 am
  
  Sorry dharma i have not tried yet this .
  
  Reply
Swati
June 5, 2018 at 5:15 pm

Helo Sir
Can you help me,
how to use realm database to store employee first name ,last name ,id and image through react native
and also fetch and show the data of employee in screen

Reply
- admin
  June 6, 2018 at 5:47 am
  
  Swati currently we do not how how to save image locally in mobile phone but you can store image URL if your image is online. read our this tutorial this would help you https://reactnativecode.com/insert-data-into-realm-local-database/
  
  Reply
bahar
June 10, 2018 at 6:38 am

How can I save the address in the database?

Reply
- admin
  June 10, 2018 at 7:03 am
  
  Address of selected image ?
  
  Reply
  - bahar
    June 10, 2018 at 10:26 pm
    
    I want to save the photo taken in php my admin
    Saying I have to save the photo’s address
    How can i do this
    
    Reply
    - admin
      June 11, 2018 at 3:31 am
      
      Bahar this.state.ImageSource contain the image URL you can use it to save but if you want to download image or upload image to server than sorry bro.
      
      Reply
Johncy Arul A
June 13, 2018 at 4:14 pm

I am getting 500 (internal server error) Sir.

Reply
- admin
  June 14, 2018 at 7:40 am
  
  Johncy please follow all the steps , it will work .
  
  Reply
Johncy Arul A
June 14, 2018 at 8:35 am

Great Sir..Really Thank you very much.I want to follow all your articles..Please tell me where can i find related topics for React Native.

Reply
Johncy Arul A
June 14, 2018 at 8:36 am

Sorry problem was in my system environment..It does not tracked my changes.

Reply
- admin
  June 15, 2018 at 9:59 am
  
  Ok Johncy 🙂 .
  
  Reply
sina
June 21, 2018 at 5:45 pm

Hi there,
on IOS devices when I try to take a photo the response.uri and response.fileName is undefined. although everything is fine on Android and when getting image from Gallery on IOS. my question is how could I get the uri when taking photo on IOS?

ImagePicker.showImagePicker(options, (data) => {console.log(data.fileName})

Reply
shiak usmaan
July 14, 2018 at 10:50 am

Great Tutorial Admin Bro…
Works pretty well on Android Emulator…

Thanks.

Reply
- admin
  July 14, 2018 at 3:18 pm
  
  Welcome bro 🙂 .
  
  Reply
usmaan
July 15, 2018 at 7:22 am

Once again very well explained tutorial….

Thanks Admin.
Please make Some tutorials on GEOLOCATION.
( How to get user current location & direct them to one point to another point using google maps)

Reply
- admin
  July 16, 2018 at 2:53 am
  
  Usmaan i will soon publish a new tutorial regarding to your query but there is a problem in react native’s runtime permissions.
  
  Reply
  - usmaan
    July 16, 2018 at 6:27 pm
    
    ok admin…..I will be waiting for it…..
    
    Please Help….
    
    What components in react native i need to use to achieve the following:
    
    I have Two user “X” & “Y”
    
    1. how to set a user call it (‘X’) location as default , while user sign-in (in their User account/profile)
    
    2. Then how to show that user “X” location on google maps for any other user call it ( “Y”) and also
    detect user “Y” current location and direct user “Y” to user “X” location by using google maps (Typical google maps with Driving directions in Android Phones)
    
    Reply
    - admin
      July 17, 2018 at 3:30 am
      
      Usmaan currently we do not work on GPS .
      
      Reply
bahar
July 26, 2018 at 10:41 pm

Hello
I used the project before this tutorial, but I can not open the gallery or Durin in this project
Click on the select a photo nothing happens
Project version before me: 0.56.0
Version is 0.55.4
Whether it’s a change of version or another reason???

Reply
- admin
  July 27, 2018 at 3:49 am
  
  Bahar try to create a new project again and install all the libraries again , this should work .
  
  Reply
Rodrigo Soares
July 27, 2018 at 2:46 am

Thank you! Helped so much!

Reply
- admin
  July 27, 2018 at 3:50 am
  
  Welcome bro 🙂 .
  
  Reply
SeniorJs
August 5, 2018 at 5:20 am

Thanks,
This post is useful to me.
Best regards.

Reply
Ralry
August 15, 2018 at 3:31 am

for your camera and gallery permission, how to set if not have mac laptop ?

Reply
- admin
  August 15, 2018 at 4:46 am
  
  Ralry you can setup android permissions using windows pc but to set iOS permissions you need MAC, but you can use MAC in your windows system with VMware with virtual windows system .
  
  Reply
  - Ralry
    August 15, 2018 at 6:35 am
    
    admin, android is ok for me, coz i’m android dev, i dunno ios thing.
    but for ios, this one cannot add code inside info.plist ?
    must use vmware/Mac ?
    
    Reply
harpreet singh
August 23, 2018 at 8:35 pm

how to customize the default dialog in image picker???

Reply
- admin
  August 24, 2018 at 4:30 am
  
  Default image dialog means the box where images shows after selecting or the dialog box which opens after clicking on selecting button ?
  
  Reply
Mujeeb
October 11, 2018 at 4:23 am

Wat about camera run time permission, is it prompt to user to give access to camera and external storage permission??

Reply
- admin
  October 11, 2018 at 10:28 am
  
  Mujeeb this library would automatically calls the camera runtime permission all you have to do is tap the Yes button present on permission dialog screen.
  
  Reply
harsh
February 19, 2019 at 12:03 pm

i am getting issue undefined is not an object (evaluating ‘ImagePickerManager.showImagePicker’)

Reply
- admin
  February 20, 2019 at 12:09 pm
  
  Harsh try to install the library again with administrative privileges.
  
  Reply
waseem
May 20, 2019 at 5:30 am

when i’m install react-native image-picker library, then my project build become fail.

Reply
- admin
  May 20, 2019 at 4:24 pm
  
  Waseem read my this tutorial this would help you: https://reactnativecode.com/execution-failed-for-task-processdebugresources/ .
  
  Reply

React Native Pick Image From Camera and Gallery Android iOS Tutorial

Contents in this project React Native Pick Image From Camera and Gallery Tutorial :

10. Complete source code for index.android.js / index.ios.js file.

Related posts:

74 Comments

Leave a Reply Cancel reply

Search Here