React Native Image Picker Example

React Native Image Picker

A React Native Image Picker library allows you select a photo/video from the device library or directly from the camera.

So in this tutorial I have create react native ImagePickerApp that picks selected image from mobile phone gallery and clicked image from mobile phone camera and displayed in Image component.

Get GITHUB code from HERE.

• Start a new React Native project. If you don’t know how then read my this tutorial.
• After creating project Open Command Prompt in your system .
• Now using command prompt locate your project’s  root folder .
• Type npm install react–native–image–picker@latest —save  inside your project.
• After successfully installed the React Native Image Picker library you would see message like below screenshot.

Configure Project for Android Devices :

• Add the following lines to android/settings.gradle:

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

• Update the android build tools version to 2.2.+ in android/build.gradle:

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
    }
    ...
}

• Update the gradle version to 2.14.1 in android/gradle/wrapper/gradle-wrapper.properties:

distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

• Add the compile line to the dependencies in android/app/build.gradle:

dependencies {
    compile project(':react-native-image-picker')
}

• Add the required permissions in AndroidManifest.xml:

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

• Add the import and link the package in MainApplication.java:

import com.imagepicker.ImagePickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage() // <-- add this line
            // OR if you want to customize dialog style
            new ImagePickerPackage(R.style.my_dialog_style)
        );
    }
}

Start Coding :

•  Import  StyleSheet, Text, View, Button,Image component.
• Import ImagePicker library.

render() {
  return (
    <View style={styles.container}>
    <Text style={styles.textStyle}>Pick Image From Camera and Gallery </Text>
      <View style={styles.placeholder}>
        <Image source={this.state.pickedImage} style={styles.previewImage} />
      </View>
      <View style={styles.button}>

        <Button title="Pick Image" onPress={this.pickImageHandler} />

        <Button title="Reset" onPress={this.resetHandler} />

      </View>
    </View>
  );
}

• Inside render() I have created two buttons Pick Image, Reset.

When I press Pick Image button pickImageHandler function will called and Inside pickImageHandler() I have used one built_in function

/**
* The first arg is the options object for customization (it can also be null or omitted for default options),
* The second arg is the callback which sends object: response (more info below in README)
*/

 pickImageHandler = () => {
   ImagePicker.showImagePicker({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => {
     if (res.didCancel) {
       console.log("User cancelled!");
     } else if (res.error) {
       console.log("Error", res.error);
     } else {
       this.setState({
         pickedImage: { uri: res.uri }
       });

     }
   });
 }

When I press Reset button resetHandler function will called and Inside resetHandler() again I set pickedImage variable defined in state

to null by calling reset().

reset = () => {
  this.setState({
    pickedImage: null
  });
}

Complete source code :

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


export default class App extends Component {

  state = {
    pickedImage: null
  }

  reset = () => {
    this.setState({
      pickedImage: null
    });
  }

  /**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info below in README)
 */

  pickImageHandler = () => {
    ImagePicker.showImagePicker({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => {
      if (res.didCancel) {
        console.log("User cancelled!");
      } else if (res.error) {
        console.log("Error", res.error);
      } else {
        this.setState({
          pickedImage: { uri: res.uri }
        });

      }
    });
  }

  resetHandler = () =>{
    this.reset();
  }

  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.textStyle}>Pick Image From Camera and Gallery </Text>
        <View style={styles.placeholder}>
          <Image source={this.state.pickedImage} style={styles.previewImage} />
        </View>
        <View style={styles.button}>

          <Button title="Pick Image" onPress={this.pickImageHandler} />

          <Button title="Reset" onPress={this.resetHandler} />

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems:"center"
  },
  textStyle: {
    fontWeight:"bold",
    fontSize:30,
    textAlign:"center",
    color:"red",
    marginTop:10
  },
  placeholder: {
    borderWidth: 1,
    borderColor: "black",
    backgroundColor: "#eee",
    width: "70%",
    height: 280,
    marginTop:50,
  },
  button: {
    width: "80%",
    marginTop:20,
    flexDirection:"row",
    justifyContent: "space-around"
  },
  previewImage: {
      width: "100%",
      height: "100%"
  }
});

• Run your application: