React Native ImagePicker : Pick Image from Camera and Gallery in Android
Published: 2022-11-18 02:54:00

[Image Picker](https://github.com/react-native-image-picker/react-native-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](https://reactnative.dev/docs/permissionsandroid) 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](https://github.com/react-native-image-picker/react-native-image-picker#the-response-object).

For the full list of options [check](https://github.com/react-native-image-picker/react-native-image-picker#options)