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

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:
react-native-image-crop-picker

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 :

iOS:
run the following command

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

Step Three :

iOS

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

3.3.3
3.4.3
3.5.4
3.6.4
4.0.1

here:

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: