React Native Image Picker | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

Load image from local storage in Android/iOS using React Native

react-native-image-picker package provides ImagePicker component which enables to pick image from Gallery or Camera

Usage

react-native-image-picker library provides an ImagePicker component with storage options like skipBackup or path

Code snippet of ImagePicker :

var options = {
   title: 'Select Image',
   customButtons: [
     { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
   ],
   storageOptions: {
     skipBackup: true,
     path: 'images',
   },
};
ImagePicker.showImagePicker(options, response => {
   if (response.didCancel) {
     console.log('User cancelled image picker');
   } else if (response.error) {
     console.log('ImagePicker Error: ', response.error);
   } else if (response.customButton) {
     console.log('User tapped custom button: ', response.customButton);
   } else {
     console.log("response " + JSON.stringify(response));
   }
});

Custom buttons are for implementing other sources such as google drive etc

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named ImagePickerApp)

react-native init ImagePickerApp

This creates a directory named ImagePickerApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here ImagePickerApp)

cd ImagePickerApp

Add react-native-document-picker to current project using yarn

yarn add react-native-image-picker

or using npm

npm install react-native-image-picker --save

iOS

After yarn add command, cd into ios folder inside project directory and usepod command to install any required CocoaPods dependencies:

cd ios && pod install && cd ..

Permissions

Requesting permission to access camera and external storage in Android

For Android applications, READ_EXTERNAL_STORAGE and CAMERA permissions has to be added in AndroidManifest.xml file

Find and open ImagePickerApp (project directory) → android → app → src → main → AndroidManifest.xml

Add below permission (before <application tag , inside <manifest element )

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

App Code

Following code implements image picker component

App.js

import React from 'react';
import { StyleSheet, Text, View, Button, Image, Alert } from 'react-native';
import ImagePicker from 'react-native-image-picker';


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filePath: {},
    };
  }

  chooseFile = () => {
    var options = {
      title: 'Select Image',
      customButtons: [
        { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
      ],
      storageOptions: {
        skipBackup: true,
        path: 'down',
      },
    };

    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);
      if (response.didCancel) {
        Alert.alert('User cancelled image picker');
      }
      else if (response.error) {
        Alert.alert('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        Alert.alert('User tapped custom button: ', response.customButton);
      }
      else {
        let source = response;
        this.setState({
          filePath: source,
        });
      }
    });
  };

  renderImage() {
    return (
      <View style={{alignItems: 'center',  justifyContent: 'center'}}>
        <Image
          source={{ uri: this.state.filePath.uri }}
          style={{ width: 250, height: 250 }}/>
        <Text style={{ alignItems: 'center' }}>
           Uri : {this.state.filePath.uri}
        </Text>
      </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        { (this.state.filePath.uri != null) ? this.renderImage():null }
        <Button title="Choose File" onPress={this.chooseFile.bind(this)} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});