How to use Image Upload in React Native?

Hi Guys,

In this article, we will talk about how to implement image upload in react native. This article will give you simple example of how to upload image in react native. this example will help you image upload example in react native. if you want to see example of how to pick and upload image in react native then you are a right place. Let's get started with react native image upload example.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

You can install expo-image-picker to create Image upload:

expo install expo-image-picker

You can install react-native-paper:

npm install react-native-paper

In this step, You will open the App.js file and put the code.

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ToastAndroid, TouchableHighlight } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { Avatar, Button } from 'react-native-paper'

export default function Add() {
    const [galleryPermission, setGalleryPermission] = useState(null);
    const [imageUri, setImageUri] = useState(null);

    const setToastMsg = msg => {
        ToastAndroid.showWithGravity(msg, ToastAndroid.SHORT, ToastAndroid.CENTER);
    }

    const permisionFunction = async () => {

        const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
        console.log(imagePermission.status);

        setGalleryPermission(imagePermission.status === 'granted');

        if (imagePermission.status !== 'granted') {
            setToastMsg('Permission for media access needed.');
        }
    }

    useEffect(() => {
        permisionFunction();
    }, []);

    const pick = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            quality: 1,
        });

        if (!result.cancelled) {
            setImageUri(result.uri);
        }
    }

    const removeImage = () => {
        setImageUri(null);
        setToastMsg('Image Removed');
    }

    return (
        <View>
            <View style={styles.innerContainer}>
                <TouchableHighlight
                    onPress={pick}
                    underlayColor='rgba(0,0,0,0)'
                >
                    <Avatar.Image
                        size={250}
                        source={{ uri: imageUri }}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.innerContainer, { marginTop: 25, flexDirection: 'row' }]}>
                <Button
                    mode='contained'
                    onPress={pick}
                >
                    Upload Image
                </Button>
                <Button
                    mode='contained'
                    onPress={() => removeImage()}
                    style={{ marginLeft: 20 }}
                >
                    Remove Image
                </Button>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    innerContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 100,
    },
});

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...