React Native: capture and choose images in Android and IOS

3 min readSep 27, 2021

Learn the use of machine learning and computer vision in Android, Flutter & React Native with our Mobile Machine Learning courses. You can avail discount on following React Native Machine learning courses

ChatGPT & React Native — Build Chatbots for Android & IOS

Machine Learning use in React Native — The Practical Guide

Choosing or Capturing images in React native can be tricky at times but the process is quite simple.

So in this story, I will teach you to get images from the gallery or capture images using a camera and then getting those images as bitmaps in our mobile applications.

So firstly we will create a new React Native project using the CLI approach.

After that open that project in VSCode or in any other code editor you use.

So open the command prompt and create a new project using

npx react-native init ImagePickerMedium

Navigate to the project folder using

cd ImagePickerMedium

Open the project in VS Code using

code .

Now open the App.js file and remove all the code present inside it and paste below code

Now when you will run the application you will see

1: Text “Pick Images from Camera & Gallery”

2: Image

3: button with title “Choose File”

4: button with title “LaunchCamera”

So the flow of this application will be once the user will click on the ChooseFile button gallery will be opened and we can choose an image from the gallery. Once the user will choose the image that image will be displayed inside the image widget which is being displayed on the screen.

And upon click on the LaunchCamera button camera will be opened and he can capture that image using the device camera. Once the user will capture the image that image will be displayed inside the image widget which is being displayed on the screen.

So the code we just pasted contains the GUI of the application that we are going to build and now we will add image picker code inside it.

Adding Image Picker Library

In order to choose or capture the images, we will use a library named ImagePicker, and using it we can easily choose or capture images. So to use the library firstly we will add that library to the project. So run the command

npm add react-native-image-picker

Choosing Images from Galley

In order to choose an image from the gallery, we will use the launchImageLibrary method of this library. So we will first import it inside the App.js file so add the line in the imports

import {launchCamera, launchImageLibrary} from ‘react-native-image-picker’;

Now we will replace chooseImage method with the code below

Run the application again and click on the choose image button and see whether it works or not.

Capturing images using Camera

Now to capture images using a camera we will use the launch camera method. So we already imported it from the image picker. Now just replace launchCamera method with the code below.

Run the application again and see if the launch camera button is working or not.

So the complete code in App.js will be

Mobile Machine Learning

Learn the use of machine learning and computer vision in Android, Flutter & React Native with our Mobile Machine Learning courses. You can avail discount on the following Mobile Machine learning courses