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.

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

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.