React Native ImagePicker : Pick Image from Camera and Gallery in Android

Image Picker is a javascript library for react native that provides two methods one for taking image from camera and other from gallery. For using library first install react-native-image-picker in the project directory:

npm i react-native-image-picker

We need permissions for read and write in mobile storage. For that first navigate to your Project > android > app > src > debug > AndroidManifest.xml file and add:

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Finally, add the following code:

import {
    View, Text, StyleSheet, TouchableOpacity, PermissionsAndroid
} from 'react-native'
import React, { useState } from 'react'
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';



export class ImagePickerApp extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show: false,
            cameraPhoto: null,
            galleryPhoto: null,

            options: {
                saveToPhotos: true,
                mediaType: 'photo',
            }
        }
    }

    openCamera = async () => {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            const result = await launchCamera(this.options);
            this.cameraPhoto = result.assets[0].uri
        }
    };

    openGallery = async () => {
        const result = await launchImageLibrary(this.options);
        this.galleryPhoto = result.assets[0].uri
        console.log(this.galleryPhoto)
    };


    render() {
        return (
            <View style={{ height: '100%', width: '100%', justifyContent: 'center', alignItems: "center" }}>
                <TouchableOpacity style={styles.Button} onPress={this.openCamera}
                >
                    <Text>Open Camera</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.Button} onPress={this.openGallery}
                >
                    <Text>Open Gallery</Text>
                </TouchableOpacity>

            </View>
        )
    }

}


const styles = StyleSheet.create({
    Button: {
        margin: 5,
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: '#dddddd',
        borderWidth: 1,
        borderRadius: 20,
        backgroundColor: "pink"
    },


})

Here we imported PermissionsAndroid from react native. The PermissionsAndroid.PERMISSIONS has multiple permissions for android like permission for location, phone numbers etc. Here is the full list.

Here you can see two functions openCamera and openGallery which will be called on onPress() functions of our buttons.

We used launchCamera and launchImageLibrary methods from library that can have options and a callback. These methods are promise-based.

launchImageLibrary(options?, callback)

You can call these methods without options and callback.

The callback helps us handle Response Object.

For the full list of options check