Pick a picture from your device and upload it to the server in React Native

Amir Diafi
4 min readMay 13, 2021

In this tutorial, we gonna learn how to make a React native picker and upload the result to the server.

firstly let’s make out react native app that we name it PickedApp

in your terminal run:

1- npx react-native init PickedApp2- cd PickedApp3- npx react-native run ios/android

We Got:

Let’s make some changes:

we should get this result:

Now let’s make the methods that will be picked the picture.

Step One :

we need to install a library for this action; there are many libraries that make this for us in react native, but we’ll go with this library:

because it gives us the option to crop the image if we need that, and this is a helpful and cool feature.

to install it just run the next command in the CMD at the root of your project.

npm install react-native-image-crop-picker

Step Tow :

run the following command

cd ios
pod install
----or----npx pod-install

Step Three :


In Xcode open Info.plist and add string key NSPhotoLibraryUsageDescription with the value that describes why you need access to user photos.

More info here https://forums.developer.apple.com/thread/62229. Depending on what features you use, you also may need NSCameraUsageDescription and NSMicrophoneUsageDescription keys.

Inside your project folder go to the iOS folder then to your project folder select Info.plist and add the following code inside the <dict> tag.

path in this project /ios/PickedApp/Info.plist

Now everything has been added for iOS probably.

Android :

  • VERY IMPORTANT Add the following to your build.gradle's repositories section. (android/build.gradle)
  • Add useSupportLibrary (android/app/build.gradle)
  • Use Android SDK >= 26 (android/app/build.gradle)
  • Minimum Gradle version if you are using react-native-image-crop-picker >= 0.35.0


Reference for more details https://github.com/ivpusic/react-native-image-crop-picker/issues/1406

  • [Optional] If you want to use the camera picker in your project, add the following to app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/>
  • [Optional] If you want to use the front camera, also add the following to app/src/main/ AndroidManifest.xml
<uses-feature android:name="android.hardware.camera" android:required="false" /><uses-feature android:name="android.hardware.camera.front" android:required="false" />

now everything is added probably in both iOS and Android.

now let’s use this library to upload or take an image:

first, we need to import the library:

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

second, we need to create one function that will handle the image picked ( take a photo or pick one from the gallery)

Note: The camera does not wroking on iOS simulator, so we’ll test just the gallery method.

You need to accept permission to access the user gallery

Now everything is working perfectly on iOS:

and we got the result in the console.log:

Response =  {"creationDate": "1522437259", "cropRect": {"height": 3024, "width": 3024, "x": 1002, "y": 0}, "data": null, "duration": null, "exif": null, "filename": "IMG_0006.HEIC", "height": 104, "localIdentifier": "CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001", "mime": "image/jpeg", "modificationDate": null, "path": "/Users/mac/Library/Developer/CoreSimulator/Devices/9F67E0B4-8156-45C2-AE3E-7D870A9F069B/data/Containers/Data/Application/DDF10039-FD02-4948-81F1-8F50078C16B1/tmp/react-native-image-crop-picker/3DC019EE-C95B-4903-B019-037DB1F0F8F5.jpg", "size": 8706, "sourceURL": "file:///Users/mac/Library/Developer/CoreSimulator/Devices/9F67E0B4-8156-45C2-AE3E-7D870A9F069B/data/Media/DCIM/100APPLE/IMG_0006.HEIC", "width": 104}

Now let’s show the image inside the add box:

we store the data in the state in response.

we check if the response from the state not undefined, we’ll show the picked image in the box.

the result on iOS:

the result on Android:

The Whole code:

Congratulations we did it successfully.

Now we need to upload it to the server-side to store it in a server.
add this function inside your component:

now we need to add a button to publish upload this image to the server.

and voila we have done.


The source code on GitHub: