enappd logo
  • Tutorials
  • Ionic Apps
  • React Native Apps
  • Why Enappd
  • Home
  • Enappd Store
  • Blogs & Tutorials
  • FAQs
< All Blogs
Blog sections
➤ 1. Create a basic React Native app ➤ 2. Set up React Native Image Picker ➤ 3.How to Use React Native Image Picker ➤ App.js ➤ Conclusion
Popular App Starters
React Redux Grocery starter
React Native Spotify Starter
React Native Netflix Starter
React Native Full App


How to pick images from Camera & Gallery in React Native app



If you would like access to the entire source code, you can check out the GitHub repo here. For step-by-step tutorial, continue reading below.

Picking images from Gallery and Camera is one of the most important and basic functionalities that is needed in almost all the apps. Advanced functionalities are built upon this basic core facility. For picking the image, we will use a popular and superior library called react-native-image-picker. Which provides the ImagePicker component in which you can provide the image picking option from Gallery or Camera.

We’ll follow a stepped approach to create an ImagePicker app in React Native. Following are the steps

  • Step 1 — Create a basic React Native app
  • Step 2 — Set up React Native Image Picker 
  • Step 3 — Use React Native Image Picker to pick images in app

So let’s dive right in!



ouch ! Let’s ….. not dive 

1. Create a basic React Native app

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App.

Assuming that you have node installed, you can use npm to install the react-native-cli command-line utility. Open the terminal and run the following command to the bottom

npm install -g react-native-cli

Now, let’s create a new React Native project, e.g. RNimagePicker

react-native init RNimagePicker

When the above command is done, open the main folder in your preferred editor. When we open the project in a code editor, its structure looks like this.



Folder Structure

2. Set up React Native Image Picker

To useReact Native Image Picker we need to install react-native-image-picker dependency.

Installation of Dependency

To add React Native Image Picker to our React Native Project, we need to run the following command at the root of the project

npm install react-native-image-picker --save
or
yarn add react-native-image-picker

This command will copy all the dependencies into your node_modules directory, You can find the directory in node_modules the directory named react-native-image-picker.

Linking of Dependency

To use react-native-image-picker library we have to link some dependencies in Android and iOS project files. So, we need to run the following command at the root of the project

react-native link react-native-image-picker

Permissions

You will also need to add some permissions on Android.

Now we will see how to give permissions in Android to use Camera and read Storage.

We are going using a Native API Camera and choose the image from the Gallery. So, we need to provide some permission to access the Camera and Gallery.

We are going to add the following permissions in the AndroidManifest.xml

Project → android → app → src → debug → AndroidManifest.xml


Android Permission

Your AndroidManifest.xmlshould look like this:



Android Manifest.xml

3.How to Use React Native Image Picker

React Native Image Picker library provides an ImagePicker component in which you can set the options like the title of the picker, your custom buttons (name and title of the button) and storage options like skipBackup, etc..

Options that you get in React Native Image Picker are the following:

  • Title
  • Cancel ButtonTitle
  • Take PhotoButtonTitle
  • Choose From Library ButtonTitle
  • Custom Buttons
  • Camera Type
  • Media Type
  • Max Width
  • Max Height
  • Quality
  • Video Quality
  • Duration Limit
  • Rotation
  • Allows Editing
  • No Data
  • Storage Options
  • PermissionDenied

The code snippet of ImagePicker


Image Picker options

In the above code, we will open an Image picker as you Click on “chooseImage” and will show the selected image on the Image component. Selection options are Camera and Gallery by default but we have also added a custom button which will simply generate an alert when we click on it.



Click on Choose File

Directly Launch Camera

To implement the functionality of launching the Camera directly as you click on “Direct Launch Camera”, use the code below. It will directly open the camera and will show the clicked image on the Image Component.


Directly Launch Camera


Click on Launch Camera

Directly Launch Image Library

To Directly Launch the Image Library you can use the following code below. It will directly open the Image Library and will show the Selected image on the Image Component.


Directly Launch Image Library


Click On Launch Image Library

App.js


This React Native module allows you to use native UI to select a photo/video from the device library as well as from the camera directly.

Your Screen should look like this:



Android Screens

Finally, for your reference all the screens for this image picker functionality will look similar to those shown below:



Android Screens

Conclusion

In this post, you learned in a quick fashion to implement React Native Image Picker in your React Native App. This enables your app to pick images/videos from the Camera and Gallery. It is one of the most important and basic functionalities that is needed in almost all the apps. Advanced functionalities are build up upon this basic core facility. You can find the complete code in this Github repo over here.




Next Steps

If you liked this blog, you will also find the following React Native blogs interesting and helpful. Feel free to ask any questions in the comment section

  • Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
  • How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision | Pull to Refresh
  • Payments — Apple Pay | Stripe payments
  • Authentication — Google Login| Facebook login | Phone Auth | Twitter login
  • Create Instagram / Whatsapp Story Feature in React Native
  • React Native life cycle hooks | Implement Redux | Async actions with Redux
  • Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

React Native Full App by Enappd
React Native Full App by Enappd



pick-images-from-camera-gallery-in-react-native-app
Aditya Sharma

Full Stack Developer

Share

SHARE BLOG

PUBLISHED BY

pick-images-from-camera-gallery-in-react-native-app

Aditya Sharma

Full Stack Developer
ENAPPD

Integrations

  • Firebase
  • Capacitor
  • Cordova
  • Socket
  • Sentry
  • Redux
  • Bot

UI/UX

  • Dark mode
  • Dev tools

Authentication

  • Google
  • Facebook
  • Twitter
  • Anonymous
  • Passwordless
  • Phone
  • Email

Features

  • Maps
  • Push Notifications
  • Camera
  • Contacts
  • APIs
  • SMS
  • Chat
  • Localization
  • PDF
  • Geolocation
  • PWAs
  • RTL

Payments

  • Paypal
  • Stripe
  • Braintree
  • Apple pay

Cloud

  • AWS
  • Heroku
  • Firebase functions
  • Node JS

Testing

  • Unit testing

enappd logo
ENAPPD
Ionic, React native, Vue, Flutter and
Firebase App starters, themes and templates
CONNECT WITH US
About Enappd | Terms | Privacy Policy
All rights reserved © Enappd 2018-2022

Browse Templates and Starters

Ionic 6 Starters React Native Starters Firebase Starters Free Starters Full App Starters

BestSellers

Ionic 6 Full App - Angular Capacitor Ionic 6 Full App - React Capacitor Ionic 6 Full App - Vue Capacitor Ionic 5 Full App - Angular Cordova Ionic 5 Taxi Booking Complete Platform Ionic 5 Grocery Shopping Complete Platform

Other Links

Privacy Policy Terms and Conditions Licensing Options