How to pick images from Camera & Gallery in React Native app
Tags: reactnative, image, camera, gallery
Published: 2020-03-26 18:24:56

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="0cee" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="9cc9" class="graf graf--blockquote graf-after--figure"><em class="markup--em markup--blockquote-em">If you would like access to the entire source code, </em><a href="https://github.com/AdityaGour/reactNative-ImagePicker.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">you can check out the GitHub repo here</em></a><em class="markup--em markup--blockquote-em">. For step-by-step tutorial, continue reading below.</em></blockquote><p name="2a16" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Picking images from Gallery and Camera </strong>is one of the most important and basic functionalities that is needed in almost all the apps. Advanced functionalities are built upon this basic core facility. For picking the image, we will use a popular and superior library called <code class="markup--code markup--p-code">react-native-image-picker</code>. Which provides the <em class="markup--em markup--p-em">ImagePicker</em> component in which you can provide the image picking option from Gallery or Camera.</p><p name="4e4f" class="graf graf--p graf-after--p is-selected">We’ll follow a stepped approach to create an ImagePicker app in React Native. Following are the steps</p><ul class="postList"><li name="06d1" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Create a basic React Native app</li><li name="93d1" class="graf graf--li graf-after--li">Step 2&#8202;—&#8202;Set up React Native Image Picker</li><li name="79e9" class="graf graf--li graf-after--li">Step 3&#8202;—&#8202;Use React Native Image Picker to pick images in app</li></ul><p name="e399" class="graf graf--p graf-after--li">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="feb4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 320px; max-height: 240px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*HfUjPCVB8Eer3q22lcuoew.gif" data-width="320" data-height="240" src="https://cdn-images-1.medium.com/max/600/1*HfUjPCVB8Eer3q22lcuoew.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">ouch&nbsp;! Let’s&nbsp;….. not&nbsp;dive</figcaption></figure><h3 name="6754" class="graf graf--h3 graf-after--figure">1. Create a basic React Native&nbsp;app</h3><p name="c529" class="graf graf--p graf-after--h3">Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use <code class="markup--code markup--p-code">react-native init</code> to make our React Native App.</p><p name="3170" class="graf graf--p graf-after--p">Assuming that you have node installed, you can use <strong class="markup--strong markup--p-strong">npm</strong> to install the <code class="markup--code markup--p-code">react-native-cli</code> command-line utility. Open the terminal and run the following command to the bottom</p><pre name="e032" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install -g react-native-cli</code></pre><p name="7c86" class="graf graf--p graf-after--pre">Now, let’s create a new React Native project, e.g. RNimagePicker</p><pre name="d3d6" class="graf graf--pre graf-after--p">react-native init RNimagePicker</pre><p name="c58e" class="graf graf--p graf-after--pre">When the above command is done, open the main folder in your preferred editor. When we open the project in a code editor, its structure looks like this.</p><figure tabindex="0" contenteditable="false" name="bd1b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 479px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 162.4%;"></div><img class="graf-image" data-image-id="1*vHXGqtNWYFPBChpHzMLWng.jpeg" data-width="295" data-height="479" src="https://cdn-images-1.medium.com/max/600/1*vHXGqtNWYFPBChpHzMLWng.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Folder Structure</figcaption></figure><h3 name="6b4a" class="graf graf--h3 graf-after--figure">2. Set up React Native Image&nbsp;Picker</h3><p name="d559" class="graf graf--p graf-after--h3">To use<a href="https://github.com/react-native-community/react-native-image-picker"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> React Native Image Picke</a>r we need to install <code class="markup--code markup--p-code">react-native-image-picker</code> dependency.</p><h4 name="0c2e" class="graf graf--h4 graf-after--p">Installation of Dependency</h4><p name="ae4d" class="graf graf--p graf-after--h4">To add <a href="https://github.com/react-native-community/react-native-image-picker"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Image Picke</a>r to our React Native Project, we need to run the following command at the root of the project</p><pre name="bfef" class="graf graf--pre graf-after--p">npm install react-native-image-picker --save<br><strong class="markup--strong markup--pre-strong">or<br></strong><code class="markup--code markup--pre-code">yarn add react-native-image-picker</code></pre><p name="df7b" class="graf graf--p graf-after--pre">This command will copy all the dependencies into your node_modules directory, You can find the directory in <code class="markup--code markup--p-code">node_modules</code> the directory named <code class="markup--code markup--p-code">react-native-image-picker</code>.</p><h4 name="8922" class="graf graf--h4 graf-after--p">Linking of Dependency</h4><p name="7f2f" class="graf graf--p graf-after--h4">To use <code class="markup--code markup--p-code">react-native-image-picker</code> library we have to link some dependencies in Android and iOS project files. So, we need to run the following command at the root of the project</p><pre name="8482" class="graf graf--pre graf-after--p">react-native link react-native-image-picker</pre><h4 name="f2cd" class="graf graf--h4 graf-after--pre">Permissions</h4><p name="e9da" class="graf graf--p graf-after--h4">You will also need to add some permissions on Android.</p><p name="58ae" class="graf graf--p graf-after--p">Now we will see how to give permissions in Android to use Camera and read Storage.</p><p name="779a" class="graf graf--p graf-after--p">We are going using a Native API Camera and choose the image from the Gallery. So, we need to provide some permission to access the Camera and Gallery.</p><p name="c081" class="graf graf--p graf-after--p">We are going to add the following permissions in the <strong class="markup--strong markup--p-strong">AndroidManifest.xml</strong></p><p name="5f10" class="graf graf--p graf-after--p">Project → android → app → src → debug → AndroidManifest.xml</p><figure tabindex="0" contenteditable="false" name="fd8b" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/AdityaGour/de4ca5e852a0a592909f84e6235481e9.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Android Permission</figcaption></figure><p name="f06f" class="graf graf--p graf-after--figure">Your <code class="markup--code markup--p-code">AndroidManifest.xml</code>should look like this:</p><figure tabindex="0" contenteditable="false" name="08c0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 175px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 25%;"></div><img class="graf-image" data-image-id="1*HVjlp7mqa7zlMEukdR6SRw.jpeg" data-width="1069" data-height="267" src="https://cdn-images-1.medium.com/max/600/1*HVjlp7mqa7zlMEukdR6SRw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Android Manifest.xml</figcaption></figure><h3 name="e61f" class="graf graf--h3 graf-after--figure">3.How to Use React Native Image&nbsp;Picker</h3><p name="eb0f" class="graf graf--p graf-after--h3"><a href="https://github.com/react-native-community/react-native-image-picker"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Image Picker</a> library provides an ImagePicker component in which you can set the options like the title of the picker, your custom buttons (name and title of the button) and storage options like skipBackup, etc..</p><h4 name="9e6f" class="graf graf--h4 graf-after--p">Options that you get in React Native Image Picker are the following:</h4><ul class="postList"><li name="e3d5" class="graf graf--li graf-after--h4">Title</li><li name="392a" class="graf graf--li graf-after--li">Cancel ButtonTitle</li><li name="9fbf" class="graf graf--li graf-after--li">Take PhotoButtonTitle</li><li name="e24c" class="graf graf--li graf-after--li">Choose From Library ButtonTitle</li><li name="1802" class="graf graf--li graf-after--li">Custom Buttons</li><li name="f59c" class="graf graf--li graf-after--li">Camera Type</li><li name="4f25" class="graf graf--li graf-after--li">Media Type</li><li name="7ae8" class="graf graf--li graf-after--li">Max Width</li><li name="b7dc" class="graf graf--li graf-after--li">Max Height</li><li name="be02" class="graf graf--li graf-after--li">Quality</li><li name="1dab" class="graf graf--li graf-after--li">Video Quality</li><li name="3f54" class="graf graf--li graf-after--li">Duration Limit</li><li name="8f4b" class="graf graf--li graf-after--li">Rotation</li><li name="1992" class="graf graf--li graf-after--li">Allows Editing</li><li name="e357" class="graf graf--li graf-after--li">No Data</li><li name="5a60" class="graf graf--li graf-after--li">Storage Options</li><li name="dde1" class="graf graf--li graf-after--li">PermissionDenied</li></ul><p name="9e50" class="graf graf--p graf-after--li">The code snippet of ImagePicker</p><figure tabindex="0" contenteditable="false" name="e619" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/AdityaGour/2c0f0750a10abd8387d8d05ceafc81cf.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Image Picker options</figcaption></figure><p name="6221" class="graf graf--p graf-after--figure">In the above code, we will open an Image picker as you Click on “chooseImage” and will show the selected image on the Image component. Selection options are Camera and Gallery by default but we have also added a custom button which will simply generate an alert when we click on it.</p><figure tabindex="0" contenteditable="false" name="c5b4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*8ZWJ4OOzQlBBOof-BFtT0Q.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/600/1*8ZWJ4OOzQlBBOof-BFtT0Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Click on Choose&nbsp;File</figcaption></figure><h4 name="8d76" class="graf graf--h4 graf-after--figure"><strong class="markup--strong markup--h4-strong">Directly Launch&nbsp;Camera</strong></h4><p name="0553" class="graf graf--p graf-after--h4">To implement the functionality of launching the Camera directly as you click on “Direct Launch Camera”, use the code below. It will directly open the camera and will show the clicked image on the Image Component.</p><figure tabindex="0" contenteditable="false" name="fdb8" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/AdityaGour/f25b3fe03136100a7fa5437c84cf574b.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Directly Launch Camera</figcaption></figure><figure tabindex="0" contenteditable="false" name="725b" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 308px; max-height: 608px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 197.4%;"></div><img class="graf-image" data-image-id="1*151nylFAyIbJNxXK6ASHeg.jpeg" data-width="308" data-height="608" src="https://cdn-images-1.medium.com/max/600/1*151nylFAyIbJNxXK6ASHeg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Click on Launch&nbsp;Camera</figcaption></figure><h4 name="c75d" class="graf graf--h4 graf-after--figure">Directly Launch Image&nbsp;Library</h4><p name="1b6a" class="graf graf--p graf-after--h4">To Directly Launch the Image Library you can use the following code below. It will directly open the Image Library and will show the Selected image on the Image Component.</p><figure tabindex="0" contenteditable="false" name="4d2c" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/AdityaGour/dfd1f9af302a5c866ab03b28492ffccf.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Directly Launch Image Library</figcaption></figure><figure tabindex="0" contenteditable="false" name="c27a" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 308px; max-height: 608px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 197.4%;"></div><img class="graf-image" data-image-id="1*UkqREgVrE15AWUWDTRI5mQ.jpeg" data-width="308" data-height="608" src="https://cdn-images-1.medium.com/max/600/1*UkqREgVrE15AWUWDTRI5mQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Click On Launch Image&nbsp;Library</figcaption></figure><h3 name="6749" class="graf graf--h3 graf-after--figure">App.js</h3><figure tabindex="0" contenteditable="false" name="c1f4" class="graf graf--figure graf--iframe graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/AdityaGour/dfc4e1534665200dae03a976d32af90c.js %}</div></div></figure><p name="ad55" class="graf graf--p graf-after--figure">This React Native module allows you to use native UI to select a photo/video from the device library as well as from the camera directly.</p><p name="b64d" class="graf graf--p graf-after--p">Your Screen should look like this:</p><figure tabindex="0" contenteditable="false" name="ca8e" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 510px; max-height: 734px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 143.9%;"></div><img class="graf-image" data-image-id="1*FnWP-5IGz4Rh5Pg7ZnK7Ew.jpeg" data-width="510" data-height="734" src="https://cdn-images-1.medium.com/max/600/1*FnWP-5IGz4Rh5Pg7ZnK7Ew.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="86bd" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Android Screens</strong></p><p name="148e" class="graf graf--p graf-after--p">Finally, for your reference all the screens for this image picker functionality will look similar to those shown below:</p><figure tabindex="0" contenteditable="false" name="462f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*wm2ud44B3mCA5XUrF0l-Qg.png" data-width="1200" data-height="1200" src="https://cdn-images-1.medium.com/max/600/1*wm2ud44B3mCA5XUrF0l-Qg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Android Screens</figcaption></figure><h3 name="9e45" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="c286" class="graf graf--p graf-after--h3 graf--trailing">In this post, you learned in a quick fashion to implement <a href="https://github.com/react-native-community/react-native-image-picker"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Image Picker</a> in your React Native App. This enables your app to pick images/videos from the Camera and Gallery. It is one of the most important and basic functionalities that is needed in almost all the apps. Advanced functionalities are build up upon this basic core facility. You can find the complete code in this Github repo over <a href="https://github.com/AdityaGour/reactNative-ImagePicker.git"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p></div></div></section></div></article></main>