React Native image picker tutorial. React native is a powerful library that helps you develop robust apps for iOS and Android.

In this tutorial, we will show you how to select and show images from the device photo gallery using the expo image picker package.

In this guide, we will learn how to pick images from the image gallery in React Native using the expo-image-picker library.

This package offers easy access to the system’s UI and helps you select images and videos from the phone’s library or taking a photo with the camera.

It is easy to add to react native app and provides top-notch platform compatibility, be it Android device, android emulator, iOS device iOS simulator and web. It works everywhere great.

React Native Expo Image Picker Example

• Step 1: Install React Native CLI
• Step 2: Create React Native App
• Step 3: Install Expo Image Picker Package
• Step 4: Create Gallery Component
• Step 5: Register Component in App Js
• Step 6: Test Application

Install React Native CLI

Before taking any further step, ensure that you have installed Node 12 LTS or greater in your development machine.

Run any of the command (npm or yarn) to begin installing the Expo CLI.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Create React Native App

In this step, you should create the new React Native application, ignore this step if app is already created.

expo init RnBlogProject

Next, go to the app folder.

cd RnBlogProject

Install Expo Image Picker Package

This step will show you how to install the expo-image-picker package in react native application using the suggested command.

expo install expo-image-picker

Create Gallery Component

Next, you need to create a gallery_component.js file a inside the reactive native application folder.

Then import * as ImagePicker from the ‘expo-image-picker’ package, also import Button, Image, View, Platform from the ‘react-native’ package.

Next, update code the in gallery_component.js file.

import React, { useState, useEffect } from 'react';

import * as ImagePicker from 'expo-image-picker';
import { Button, Image, View, Platform } from 'react-native';



export default function GalleryComponenet() {
	const [image, setImage] = useState(null);
	
	useEffect(() => {
		(async () => {
		if (Platform.OS !== 'web') {
			const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
			if (status !== 'granted') {
			alert('Sorry, Camera roll permissions are required to make this work!');
			}
		}
		})();
	}, []);
	
	const chooseImg = async () => {
		let result = await ImagePicker.launchImageLibraryAsync({
			mediaTypes: ImagePicker.MediaTypeOptions.All,
			aspect: [4, 3],
			quality: 1,			
			allowsEditing: true,
		});
	
		console.log(result);
	
		if (!result.cancelled) {
		   setImage(result.uri);
		}
	};
	
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>		
			<Button title="Choose image from camera roll" onPress={chooseImg} />
			{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
		</View>
	);
}

Register Component in App Js

At last, you move to the main app js file, here we need to register the GalleryComponenet in the primary app js file.

Open the App.js file; and add the following code.

import React from 'react';

import GalleryComponenet from './gallery_component.js'


export default function App() {
  return (
    <GalleryComponenet/>
  );
}

Test Application

You have to test the react native app; hence, install the Expo Client on your smartphone. You can get the expo client either from Google Play Store or App Store.

Next, scan the visible QR code but before that make sure to run either of the command.

# npm
npm start

# yarn
yarn start

Wait for some time while your project is being compiled. Ensure that your development machine and smartphone are on the same network; you will see your project on your smartphone if everything goes well.

Summary

In this tutorial, we have learned how to pick an image from the image gallery in react native application using the expo image picker plugin.

If you want to explore more about expo image picker, we profoundly suggest looking for the documentation, which in my view, is excellent and gives excellent examples.