React Native Pick Image From Camera and Gallery Android iOS Tutorial

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.

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.

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

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

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.

2. Import ImagePicker library.

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.

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

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.

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

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

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.

9. Create Custom CSS Style sheet.

container : for Parent View.

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

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

Screenshots in iOS device :

Screenshots in Android Device :

Pick Image

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.

74 Comments

  1. Fantastic tutorial. Good job.

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

  3. Nice tutorial. Wonderful explanation. Thanks….

  4. Nice tutorial. Thanks

  5. Love it! 😀

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

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

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

  9. 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

  10. Hüseyin Sivri

    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

    • 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 .

  11. Hüseyin Sivri

    Thank you.

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

    Thanks & regards

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

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

  14. himanshu bhardwaj

    alert show but take photo and choose from library not working

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

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

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

  18. 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

  19. How can I save the address in the database?

  20. I am getting 500 (internal server error) Sir.

  21. 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.

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

  23. 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})

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

    Thanks.

  25. 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)

    • Usmaan i will soon publish a new tutorial regarding to your query but there is a problem in react native’s runtime permissions.

      • 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)

  26. 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???

  27. Thank you! Helped so much!

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

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

    • 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 .

      • 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 ?

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

    • Default image dialog means the box where images shows after selecting or the dialog box which opens after clicking on selecting button ?

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

    • 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.

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *