React Native Image Picker Example


Share:
Published By: Admin, Published On: Jul 01, 2021, Category: React Native
Hi Guys,

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 project

In the first step Run the following command for create project.

expo init MyWebtuts 
Step 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 MyWebtuts 
Run the following command
yarn add expo-image-picker
Step 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 start
Output

It will help you...

Share: