React Native Image Picker Example
Jul 01, 2021 . Admin
In this blog,I will learn you how to use image picker in react native. We will show example of image picker in react native. You can easliy create react native image picker. First i will import ImagePicker namespace from expo-image-picker, after I will make image picker using in react native.
Step 1 - Create projectIn the first step Run the following command for create project.
expo init MyWebtutsStep 2 - Installation of Dependency
In the step, Run the following command for installation of dependency.
To use ImagePicker you need to install expo-image-picker package.
To install this open the terminal and jump into your project
cd paper MyWebtutsRun the following command
yarn add expo-image-pickerStep 3 - App.js
In this step, You will open App.js file and put the code.
import React, { useState, useEffect } from 'react'; import { Button, Image, View, Platform } from 'react-native'; import * as ImagePicker from 'expo-image-picker'; export default function ImagePickerExample() { const [image, setImage] = useState(null); useEffect(() => { (async () => { if (Platform.OS !== 'web') { const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (status !== 'granted') { alert('Sorry, we need camera roll permissions to make this work!'); } } })(); }, []); const pickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.All, allowsEditing: true, aspect: [4, 3], quality: 1, }); console.log(result); if (!result.cancelled) { setImage(result.uri); } }; return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="Pick an Image" onPress={pickImage} /> {image && <Image source={{ uri: image }} style={{ width: 200,marginTop:20, height: 200 }} />} </View> ); }Step 3 - Run project
In the last step run your project using bellow command.
expo startOutput
It will help you...