React Native Image Upload Example

Jun 28, 2022 . Admin

Hi Guys,

This post will give you example of how to upload image in react native. I would like to share with you how to use image upload in react native. if you want to see example of react native image upload example then you are a right place. This tutorial will give you simple example of how to implement image upload in react native. Here, Creating a basic example of image upload example in react native.

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...

#React Native