How to use Image Upload in React Native?

Published On: 28/06/2022 | Category: 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:

Step 1: Download Project

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

expo init ExampleApp
Step 2: Install and Setup

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
Step 3: App.js

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();

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

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

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

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

        if (!result.cancelled) {

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

    return (
            <View style={styles.innerContainer}>
                        source={{ uri: imageUri }}
            <View style={[styles.innerContainer, { marginTop: 25, flexDirection: 'row' }]}>
                    Upload Image
                    onPress={() => removeImage()}
                    style={{ marginLeft: 20 }}
                    Remove Image

const styles = StyleSheet.create({
    innerContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 100,
Run Project

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

expo start

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

Output :

It will help you...