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

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:

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.

Step Tow :

iOS:
run the following command

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

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
  • [Optional] If you want to use the front camera, also add the following to app/src/main/ AndroidManifest.xml

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:

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:

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.

Thanks.

The source code on GitHub:

https://github.com/AmirDiafi/PickedApp

--

--

--

Software Engineer 👨🏻‍💻

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Uncomplicated — (for … in) VS (for … of) loop

DRY out React Code into Presentational Components

Per user storage limit validation with Firebase

How to Convert RTF to HTML in Node.JS

Generics and Inheritance in TypeScript

9 Tricks for Kickass JavaScript Developers in 2019

test this medium post

React — Spring

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amir Diafi

Amir Diafi

Software Engineer 👨🏻‍💻

More from Medium

How to sign and build android app with react native

Crash! Crash! Crash! Integration of Huawei Crash Kit in Application using React Native.

The 7 Reasons Why We Recommend React.js For Developing Mobile App

The Basics of NFT Marketplace Development