<h3><span style="color: #000080;"><strong>React Native Image Picker</strong></span></h3>
<p>A <strong><span style="color: #008000;">React Native Image Picker library</span> </strong>allows you select a photo/video from the device library or directly from the camera.</p>
<p>So in this tutorial I have create react native <span style="color: #008000;"><strong>ImagePickerApp</strong></span> that picks selected image from mobile phone gallery and clicked image from mobile phone camera and displayed in Image component.</p>
<p>Get <strong>GITHUB</strong> code from <a href="https://github.com/arunk7839/ReactNativeImagePickerApp"><strong><span style="color: #00ff00;">HERE</span></strong></a>.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="Y48MleNRvYg" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=Y48MleNRvYg" placeholder><amp-img src="https://i.ytimg.com/vi/Y48MleNRvYg/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/Y48MleNRvYg/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span></p>
<ul>
<li>Start a new React Native project. If you don’t know how then read my this <a href="https://c1ctech.com/installing-react-native-on-windows/"><strong>tutorial</strong></a>.</li>
<li>After creating project Open Command Prompt in your system .</li>
<li>Now using command prompt locate your project’s root folder .</li>
<li>Type <strong><span id="crayon-5b1f5986ee055133118229" class="crayon-syntax crayon-syntax-inline crayon-theme-classic crayon-theme-classic-inline crayon-font-monaco" style="color: #008000;"><span class="crayon-pre crayon-code"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">react</span><span class="crayon-o">&#8211;</span><span class="crayon-m">native</span><span class="crayon-o">&#8211;</span><span class="crayon-v">image</span><span class="crayon-o">&#8211;</span><span class="crayon-v">picker</span><span class="crayon-sy">@</span><span class="crayon-v">latest</span><span class="crayon-h"> </span><span class="crayon-o">&#8212;</span><span class="crayon-v">save</span></span></span></strong> inside your project.</li>
<li>After successfully installed the <span style="color: #008000;"><strong>React Native Image Picker library</strong></span> you would see message like below screenshot.</li>
</ul>
<p><img class="alignnone wp-image-515 size-full" src="https://c1ctech.com/wp-content/uploads/2018/06/img_pker_cmd.png" alt="" width="1546" height="377" /></p>
<h3><span style="color: #000080;"><strong>Configure Project for Android Devices :</strong></span></h3>
<ul>
<li>Add the following lines to <span style="color: #008000;"><strong>android/settings.gradle</strong></span>:</li>
</ul>
<pre><span style="color: #0000ff;"><code>include <span class="pl-s"><span class="pl-pds">'</span>:react-native-image-picker<span class="pl-pds">'</span></span>
project(<span class="pl-s"><span class="pl-pds">'</span>:react-native-image-picker<span class="pl-pds">'</span></span>)<span class="pl-k">.</span>projectDir <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-k">File</span>(rootProject<span class="pl-k">.</span>projectDir, <span class="pl-s"><span class="pl-pds">'</span>../node_modules/react-native-image-picker/android<span class="pl-pds">'</span></span>)
</code></span></pre>
<p> ;</p>
<ul>
<li>Update the android build tools version to 2.2.+ in <strong><span style="color: #008000;">android/build.gradle:</span></strong></li>
</ul>
<pre><code><span class="pl-en">buildscript</span> {
 <span class="pl-k">..</span>.
 dependencies {
 classpath <span class="pl-s"><span class="pl-pds">'</span>com.android.tools.build:gradle:2.2.+<span class="pl-pds">'</span></span> <span class="pl-c">// <;- USE 2.2.+ version</span>
 }
 <span class="pl-k">..</span>.
}</code></pre>
<ul>
<li>Update the gradle version to 2.14.1 in <strong><span style="color: #008000;">android/gradle/wrapper/gradle-wrapper.properties:</span></strong></li>
</ul>
<pre><code>distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip</code></pre>
<p> ;</p>
<ul>
<li>Add the compile line to the dependencies in <span style="color: #008000;"><strong>android/app/build.gradle:</strong></span></li>
</ul>
<pre><code><span class="pl-en">dependencies</span> {
 compile project(<span class="pl-s"><span class="pl-pds">'</span>:react-native-image-picker<span class="pl-pds">'</span></span>)
}</code></pre>
<p> ;</p>
<ul>
<li>Add the required permissions in <strong><span style="color: #008000;">AndroidManifest.xml:</span></strong></li>
</ul>
<pre><code><;<span class="pl-ent">uses-permission</span> <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>android.permission.CAMERA<span class="pl-pds">"</span></span> />;
<;<span class="pl-ent">uses-permission</span> <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>android.permission.WRITE_EXTERNAL_STORAGE<span class="pl-pds">"</span></span>/>;</code></pre>
<p> ;</p>
<ul>
<li>Add the import and link the package in <strong><span style="color: #008000;">MainApplication.java</span></strong>:</li>
</ul>
<pre><code><span class="pl-k">import</span> <span class="pl-smi">com.imagepicker.ImagePickerPackage</span>; <span class="pl-c">// <;-- add this import</span>

<span class="pl-k">public</span> <span class="pl-k">class</span> <span class="pl-en">MainApplication</span> <span class="pl-k">extends</span> <span class="pl-e">Application</span> <span class="pl-k">implements</span> <span class="pl-e">ReactApplication</span> {
 <span class="pl-k">@Override</span>
 <span class="pl-k">protected</span> <span class="pl-k">List<;<span class="pl-smi">ReactPackage</span>>;</span> <span class="pl-en">getPackages</span>() {
 <span class="pl-k">return</span> <span class="pl-smi">Arrays</span><span class="pl-k">.</span><span class="pl-k"><;</span><span class="pl-smi">ReactPackage</span><span class="pl-k">>;</span>asList(
 <span class="pl-k">new</span> <span class="pl-smi">MainReactPackage</span>(),
 <span class="pl-k">new</span> <span class="pl-smi">ImagePickerPackage</span>() <span class="pl-c">// <;-- add this line</span>
 <span class="pl-c">// OR if you want to customize dialog style</span>
 <span class="pl-k">new</span> <span class="pl-smi">ImagePickerPackage</span>(<span class="pl-smi">R</span><span class="pl-k">.</span>style<span class="pl-k">.</span>my_dialog_style)
 );
 }
}</code></pre>
<p> ;</p>
<h3><span style="color: #000080;"><strong>Start Coding :</strong></span></h3>
<ul>
<li> Import <strong><span style="color: #008000;">StyleSheet, Text, View, Button,Image</span></strong> component.</li>
<li>Import <span style="color: #008000;"><strong>ImagePicker</strong></span> library.</li>
</ul>
<div>
<div><strong><span style="color: #0000ff;"><code>import ImagePicker from "react-native-image-picker";</code></span></strong></div>
<ul>
<li>Open App.Js and inside render() write the below JSX code:</li>
</ul>
<pre><code>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>;
 );
}</code></pre>
</div>
<div>
<div></div>
<div>
<ul>
<li>Create <span style="color: #008000;"><strong>State</strong></span> inside your main class and inside that state create variable named as <span style="color: #008000;"><strong>pickedImage</strong><strong> = null</strong></span> .</li>
</ul>
<p>The <span style="color: #008000;"><strong>pickedImage</strong></span> variable is used to store the selected image <span style="color: #008000;"><strong>URI path</strong></span>.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

</div>
<div><span style="color: #000000;"><code>state = {</code></span></div>
<div><span style="color: #000000;"><code>pickedImage : null</code></span></div>
<div><span style="color: #000000;"><code>}</code></span></div>
<div></div>
</div>
<ul>
<li>Inside <strong><span style="color: #008000;">render</span></strong>() I have created two buttons <strong><span style="color: #008000;">Pick</span><span style="color: #008000;"> Im</span><span style="color: #008000;">age</span></strong>, <strong><span style="color: #008000;">Reset.</span></strong></li>
</ul>
<p>When I press <strong><span style="color: #008000;">Pick Image </span></strong><span style="color: #008000;"><span style="color: #000000;">button pickImageHandler function will called and Inside <strong><span style="color: #0000ff;">pickImageHandler() </span></strong><span style="color: #0000ff;"><span style="color: #000000;">I have used one built_in function</span></span></span></span></p>
<div>
<div><span style="color: #000000;"><strong><span style="color: #0000ff;">showImagePicker()</span> .</strong></span></div>
<div></div>
</div>
<div>
<pre><code><span style="color: #008000;">/**
* 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)
*/</span>

 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 }
 });

 }
 });
 }</code></pre>
</div>
<div></div>
<p>When I press <strong><span style="color: #008000;">Reset </span></strong><span style="color: #008000;"><span style="color: #000000;">button <strong><span style="color: #0000ff;">resetHandler </span></strong>function will called and Inside <strong><span style="color: #0000ff;">reset<strong>Handler</strong>() </span></strong>again I set <strong><span style="color: #008000;">pickedImage</span></strong> variable defined in state</span></span></p>
<p>to null by calling reset().</p>
<pre><code>reset = () =>; {
 this.setState({
 pickedImage: null
 });
}</code></pre>
<h3><span style="color: #000080;"><strong>Complete source code :</strong></span></h3>
<pre><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
 });
 }

 <span style="color: #008000;">/**
 * 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)
 */</span>

 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%"
 }
});</code></pre>
<ul>
<li>Run your application:</li>
</ul>
<p><img class="wp-image-533 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/06/Screenshot_1528806442-576x1024.png" alt="" width="391" height="695" />