Nerd For Tech
Published in

Nerd For Tech

How to pick Image or video from Internal Storage in React Native App

Use of Image picker in native Application

Hello Native Developers..!!

When you start building your application then at some stage you have to add an upload media feature in your application. Nowadays above 90% of mobile applications allow users to pick images or videos from their internal storage and upload them to their application. It’s very common on social media. Whether you are posting pictures or updating profile photos, you generally pick the media from the internal storage of your device. As a developer, how to add such a feature to your application? Let’s see how it works with a quick guide. So, let’s start with a cup of coffee.

Photo by Caspar Camille Rubin on Unsplash

Set-up and Installation of React Native App

Start an expo-CLI project in your preferred directory using the command: expo init Picker (You can name it as per your choice). Choose the blank template and complete the installation of javascript dependencies. After that, install the following package in the parent directory using the command:

npm install expo-image-picker

expo-image-picker has built-in functionality that helps you with picking images and videos from the internal storage of the device.

We are done with the installation part. Let’s begin the hack now.

Code of Image Picker in React Native (Javascript)

App.js

import React, { useState, useEffect } from 'react';
import { StyleSheet ,Text, View, Button, Image} from 'react-native';
import * as ImagePicker from 'expo-image-picker';

Import the above components from the respective package as we are going to use them in our project.

const [hasGalleryPermission, setHasGalleryPermission] = useState(null);
const [image, setImage] = useState(null);
useEffect(() => {
(async () => {
const galleryStatus = await ImagePicker.requestMediaLibraryPermissionsAsync();
setHasGalleryPermission(galleryStatus.status === 'granted');
})();
}, []);

We are asking permission to access the gallery from the user. The initial state of the permission is set to null but when the user permits to access the gallery then the state of the permission is going to change. That’s why we use react-hook’s useState here.

The data of useEffect is stored in an array asynchronously. If you remove that array then every time user opens the app, the app will ask the gallery permission which is kind of annoying and also gives a bad user experience.

const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
console.log(result);if (!result.cancelled) {
setImage(result.uri);
}
};
if (hasGalleryPermission === false) {
return <Text>No access to Gallery</Text>;
}

Here you can customize the media pick from internal storage. I set the mediaTypes to Image only but you can use “ImagePicker.MediaTypeOptions.All” to import images and videos both or you can use “ImagePicker.MediaTypeOptions.Videos” to import videos from internal storage. You can allow editing to use by default edits like crop image feature and much more. You can also choose aspects of the media, most of us prefer [4,3], you can customize these values accordingly. Add the number of quantities you are importing at a time. For example, Instagram set the feature to 10, you can not import more than 10 photos from internal storage at a time. You can also customize this according to your app.

If the user denies the gallery access then “No access to Gallery” text will appear on the screen.

<View style={{ flex: 1, justifyContent:'center'}}>
<Button title="Pick Image From Gallery" onPress={() => pickImage()} />
{image && <Image source={{uri: image}} style={{flex:1/2}}/>}
</View>

As we mainly focus on how these things function instead of styling. You can style them accordingly. Now run this application in the terminal window and run this on your device with the expo app. Pick one image from the gallery. I took one image and it appears like this on screen.

Pick Image from Internal storage(gallery) in React Native

Now check your terminal window, where you run this project using the command: npm start. There you will see the full information of the image. Like, what’s the height of the image. URI of that image, what’s the type, width of the image. Lots of information is there as we console log it in the pickImage function. You can use this information to enhance your application further.

That’s all for this article. If you lost somewhere then the full code is here.

import React, { useState, useEffect } from 'react';
import { Text, View, Button, Image} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
export default function App() {
const [hasGalleryPermission, setHasGalleryPermission] = useState(null);
const [image, setImage] = useState(null);
useEffect(() => {
(async () => {
const galleryStatus = await ImagePicker.requestMediaLibraryPermissionsAsync();
setHasGalleryPermission(galleryStatus.status === 'granted');
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
console.log(result);if (!result.cancelled) {
setImage(result.uri);
}
};
if (hasGalleryPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1, justifyContent:'center'}}>
<Button title="Pick Image From Gallery" onPress={() => pickImage()} />
{image && <Image source={{uri: image}} style={{flex:1/2}}/>}
</View>
);
}

Thanks for Reading !!, and if this article is helpful for you then Clap until your hands bleed.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Let’s Understand Hoisting in JavaScript

How web performance, CSS Grid and PWA are related

How to Convert DOCX to HTML in JavaScript

Practical way to organize your SASS files

Graphql Client with React & Apollo

A beginner’s guide to getting started with React

Frontend Weekly Digest #66 (2 — 8 July 2018)

How to get worksheets from an Excel XLSX spreadsheet in Node.JS

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
Rohit Kumar Thakur

Rohit Kumar Thakur

ninza7.me

More from Medium

Deploy a React Native App to the Google Play Store

What is React Native?

Firebase Push Notification In React Native

How to Set Up React-Native on Your WSL2 for Android Development