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.