BarCode and QR Code Scanning in React Native Apps
Tags: reactnative, qrcode, barcode, scanner
Published: 2020-03-29 21:55:06

<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="d854" 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"><p name="4dbe" class="graf graf--p graf-after--figure">This post is all about implementing the QR Code Scanner in your cool new react-native application. In this post, you will learn</p><ul class="postList"><li name="df63" class="graf graf--li graf-after--p">How to implement <code class="markup--code markup--li-code">QRCode Scanner</code> in our app.</li><li name="039a" class="graf graf--li graf-after--li">How to read data from the QR Code in React-Native app.</li><li name="9ab1" class="graf graf--li graf-after--li">How to open a link in the browser after successfully reading data from the QR Code.</li></ul><p name="00df" class="graf graf--p graf-after--li">Before start, first you will need a React-Native app to start with, hence you can follow <a href="https://facebook.github.io/react-native/docs/getting-started"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">how to create a react-native app for beginners</strong> </a>and start after that from here.</p><blockquote name="5aba" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/RNQRCodeScanning"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">RNQRCodeScanning</strong></a><strong class="markup--strong markup--blockquote-strong">.</strong></blockquote><h3 name="63a9" class="graf graf--h3 graf-after--blockquote">What is React-Native</h3><p name="e21e" class="graf graf--p graf-after--h3">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="5626" class="graf graf--p graf-after--p">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, <em class="markup--em markup--p-em">not</em> web views, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="de54" class="graf graf--p graf-after--p">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover QR Code implementation. The vast majority of the code we write will be cross-platform. And yes: you can use React Native to build production-ready mobile applications! Some anecdota: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.<br>&nbsp;The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.</p><p name="f6cd" class="graf graf--p graf-after--p">Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using web views. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.</p><h3 name="3503" class="graf graf--h3 graf-after--p">What and why QR&nbsp;Code?</h3><figure tabindex="0" contenteditable="false" name="8c17" class="graf graf--figure graf-after--h3 is-defaultValue"><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*lyvi6CJEM3hVaHa9dIyJ2w.gif" data-width="1000" data-height="1000" src="https://cdn-images-1.medium.com/max/800/1*lyvi6CJEM3hVaHa9dIyJ2w.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="150d" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">QR code</strong> (abbreviated from <strong class="markup--strong markup--p-strong">Quick Response Code</strong>) is the trademark for a type of <a href="https://en.wikipedia.org/wiki/Matrix_barcode"  class="markup--anchor markup--p-anchor" title="Matrix barcode" rel="noopener"    target="_blank">matrix barcode</a> (or two-dimensional <a href="https://en.wikipedia.org/wiki/Barcode"  class="markup--anchor markup--p-anchor" title="Barcode" rel="noopener"    target="_blank">barcode</a>) first designed in 1994 for the <a href="https://en.wikipedia.org/wiki/Automotive_industry_in_Japan"  class="markup--anchor markup--p-anchor" title="Automotive industry in Japan" rel="noopener"    target="_blank">automotive industry in Japan</a>. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a <a href="https://en.wikipedia.org/wiki/URL"  class="markup--anchor markup--p-anchor" title="URL" rel="noopener"    target="_blank">locator</a>, identifier, or <a href="https://en.wikipedia.org/wiki/Website_visitor_tracking"  class="markup--anchor markup--p-anchor" title="Website visitor tracking" rel="noopener"    target="_blank">tracker</a> that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and <a href="https://en.wikipedia.org/wiki/Kanji"  class="markup--anchor markup--p-anchor" title="Kanji" rel="noopener"    target="_blank">kanji</a>) to store data efficiently; extensions may also be used.</p><p name="76fd" class="graf graf--p graf-after--p">QR code scanning is something almost every smartphone user has done at least once. We scan QR codes in supermarkets, on products in general, and oh, Amazon delivery! It’s a very handy way to recognize products instead of entering 16 digit long ID numbers etc. Similarly, reading ID numbers from Passports, etc could be very handy if you are an international hotel owner and require guests to carry passports as IDs. Or maybe you want to read off a vehicle registration number using your phone.</p><p name="608a" class="graf graf--p graf-after--p">Here are some potential use cases for these plugins in React-Native app</p><ul class="postList"><li name="0db3" class="graf graf--li graf-after--p">Online Payment apps&#8202;—&#8202;QR scanners can provide product info to users and paying the facility.</li><li name="acba" class="graf graf--li graf-after--li">Delivery app&#8202;—&#8202;QR Code scan can track/sign off a package and you can pay them by scanning QR Code</li><li name="1dce" class="graf graf--li graf-after--li">Quick access to offers&#8202;—&#8202;Scan QR codes and go to a webpage</li><li name="9a27" class="graf graf--li graf-after--li">Web authentication of a mobile app&#8202;—&#8202;Similar to Whatsapp Web</li><li name="1f11" class="graf graf--li graf-after--li">Event app&#8202;—&#8202;Scan tickets or events passes</li></ul><p name="7ed9" class="graf graf--p graf-after--li">…… and many more</p><p name="a384" class="graf graf--p graf-after--p">All this can now be done in React-Native apps, with the latest open source <a href="https://github.com/moaazsidat/react-native-qrcode-scanner"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">react-native-qrcode-scanner</a> npm package available in React-Native. In this article, we will focus on such implementation. So here are some of the scan plugins and functionalities you can implement with React-native.</p><ol class="postList"><li name="6d99" class="graf graf--li graf-after--p">react-native-qrcode-scanner</li><li name="2626" class="graf graf--li graf-after--li">react-native-scan-view</li><li name="538b" class="graf graf--li graf-after--li"><a href="https://github.com/react-native-community/react-native-camera"  class="markup--anchor markup--li-anchor" rel="nofollow noreferrer noopener noopener noopener noopener"    target="_blank">react-native-camera</a></li></ol><p name="bc8e" class="graf graf--p graf-after--li">….and many more.</p><figure tabindex="0" contenteditable="false" name="8aee" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50%;"></div><img class="graf-image" data-image-id="1*eH7cIE-7QCNrJTBheLvKVw.gif" data-width="1200" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*eH7cIE-7QCNrJTBheLvKVw.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="3c73" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 1:- </strong>Install the react-native-camera plugin by executing this command</p><pre name="6e56" class="graf graf--pre graf-after--p">yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git</pre><p name="7a32" class="graf graf--p graf-after--pre">Here <a href="https://github.com/lwansbrough/react-native-camera"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">react-native-camera</a> is a dependency for this package so you will need to add it in your project.</p><p name="4c75" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2:- </strong>Install the QR Scanner plugin by executing this command</p><pre name="2593" class="graf graf--pre graf-after--p">yarn add <code class="markup--code markup--pre-code">react-native-qrcode-scanner</code></pre><p name="d8fe" class="graf graf--p graf-after--pre">Now, to use react-native-qrcode-scanner, <code class="markup--code markup--p-code">import</code> the <code class="markup--code markup--p-code">react-native-qrcode-scanner</code> module and use the <code class="markup--code markup--p-code">&lt;QRCodeScanner /&gt;</code> tag.</p><p name="f1ad" class="graf graf--p graf-after--p">Here, we are working on <strong class="markup--strong markup--p-strong">react-native version 0.60.5</strong>. Hence we don’t need to link any package externally as in the latest versions above 0.60 react-native provides <strong class="markup--strong markup--p-strong">auto-linking functionality</strong>.</p><h4 name="aac3" class="graf graf--h4 graf-after--p">Add Button to scan a QRCode and to get the&nbsp;result</h4><p name="d865" class="graf graf--p graf-after--h4">Now you are ready to use the QR Code Scanner function provided by the React-Native <code class="markup--code markup--p-code">react-native-qrcode-scanner</code> package and get the result. Before this let us make a beautiful view to access the QRCode function by clicking a button and getting the data in response.</p><figure tabindex="0" contenteditable="false" name="c8ab" 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/enappd/82cd900000ccfaf68eb0261de26d75fe.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">QR Code view</figcaption></figure><p name="c18a" class="graf graf--p graf-after--figure">The Result for the above code is:</p><figure tabindex="0" contenteditable="false" name="38d6" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 369px; max-height: 800px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.8%;"></div><img class="graf-image" data-image-id="1*9QHqR3N08MzJTo1AeAs6aw.jpeg" data-width="369" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*9QHqR3N08MzJTo1AeAs6aw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e0b1" class="graf graf--p graf-after--figure">As we have completed our UI for beautiful interaction, you can simply use the below function to complete a QR Code scan process.</p><p name="0023" class="graf graf--p graf-after--p">Complete UI and Logic of the application —</p><figure tabindex="0" contenteditable="false" name="b733" 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/enappd/0eeb09e673ecf3e1855c3c5c4f376f77.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Complete logic and view</figcaption></figure><p name="085e" class="graf graf--p graf-after--figure">In this tutorial, we have used react-native default Linking property to open the external URL in the browser only when we get a URL after a successful scan. If the result contains a URL then it will navigate to that web page or if it does not contain any URL then it will print the result in both cases.</p><pre name="523c" class="graf graf--pre graf-after--p">onSuccess = (e) =&gt; {<br>const check = e.data.substring(0, 4);<br>console.log('scanned data' + check);<br>this.setState({<br>result: e,<br>scan: false,<br>ScanResult: true<br>})<br>if (check === 'http') <br>{<br>Linking<br>.openURL(e.data)<br>.catch(err =&gt; console.error('An error occured', err));<br>} else {<br>this.setState({<br>result: e,<br>scan: false,<br>ScanResult: true})}}</pre><p name="eabe" class="graf graf--p graf-after--pre">On clicking the “<strong class="markup--strong markup--p-strong">Click to Scan</strong>” button it will initiate the hardware camera and a pop up will appear for camera permission. To set the camera permission you would need to add the following code to the <code class="markup--code markup--p-code">AndroidManifest.xml</code></p><pre name="9af3" class="graf graf--pre graf-after--p">&lt;uses-permission android:name="android.permission.CAMERA" /&gt;</pre><p name="85e7" class="graf graf--p graf-after--pre">By adding this line in your <code class="markup--code markup--p-code">AndroidManifest.xml</code> you are all set to use camera feature in your application to scan a QR Code.&nbsp;<br>Let’s scan some QR Codes…</p><figure tabindex="0" contenteditable="false" name="3eec" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 369px; max-height: 800px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.8%;"></div><img class="graf-image" data-image-id="1*0eRYArds_HhztParw5eEGw.jpeg" data-width="369" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*0eRYArds_HhztParw5eEGw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Camera open to scan a QR&nbsp;Code</figcaption></figure><p name="acf2" class="graf graf--p graf-after--figure">If you are scanning a webpage QR code then on successful scan it will return a URL and in this tutorial we have written a function for that, if it does contain a URL then it will print the result and navigate to the web page in the browser and if it is not an encoded web page QR Code then it will simply print the result and you will see a button below the result to scan another QR Code.<br>Here in the scanning view, you can see we have two buttons at the bottom of the app which are —</p><ol class="postList"><li name="3db4" class="graf graf--li graf-after--p">Ok. Got it</li><li name="4cd6" class="graf graf--li graf-after--li">Stop Scan</li></ol><p name="b98b" class="graf graf--p graf-after--li">Here in the first case, it will call the reactivate() function where this will reactivate the scanning ability of the component. And in the second case, it will just close the camera and navigate back to the home page.</p><p name="7213" class="graf graf--p graf-after--p">Let’s check the results —</p><figure tabindex="0" contenteditable="false" name="feab" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 369px; max-height: 800px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.8%;"></div><img class="graf-image" data-image-id="1*j4nTzBe0wj-FAcCA5IuCdg.jpeg" data-width="369" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*j4nTzBe0wj-FAcCA5IuCdg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Contains a&nbsp;URL</figcaption></figure><p name="7325" class="graf graf--p graf-after--figure">This will open the scanned webpage in the browser.</p><figure tabindex="0" contenteditable="false" name="4616" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 369px; max-height: 800px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.8%;"></div><img class="graf-image" data-image-id="1*g9aH3I-RKwpAKBejl-xRew.jpeg" data-width="369" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*g9aH3I-RKwpAKBejl-xRew.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">QR_CODE Result</figcaption></figure><p name="5283" class="graf graf--p graf-after--figure">There are some methods that you can use to get features according to your requirement —</p><h4 name="b9d6" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">reactivate()</code></h4><p name="e1f6" class="graf graf--p graf-after--h4">Call this method to programmatically enabling scanning again. Use this by attaching a <code class="markup--code markup--p-code">ref</code> like so <code class="markup--code markup--p-code">&lt;QRCodeScanner ref={(node) =&gt; { this.scanner = node }}&gt;</code> and calling <code class="markup--code markup--p-code">this.scanner.reactivate()</code></p><h3 name="f27b" class="graf graf--h3 graf-after--p">Props</h3><h4 name="eb8f" class="graf graf--h4 graf-after--h3"><code class="markup--code markup--h4-code">onRead</code> (required)</h4><p name="cbbd" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">func.isRequired</code> default: <code class="markup--code markup--p-code">(e) =&gt; (console.log('QR code scanned!', e))</code></p><p name="b496" class="graf graf--p graf-after--p">Will call this specified method when a QR code or a barcode is detected in the camera’s view passing in the event emitted upon reading the code.</p><h4 name="9a64" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">fadeIn</code></h4><p name="f6eb" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">bool</code> default: <code class="markup--code markup--p-code">true</code></p><p name="7699" class="graf graf--p graf-after--p">When set to <code class="markup--code markup--p-code">true</code> this ensures that the camera view fades in after the initial load up instead of being rendered immediately. Set this to false to prevent the animated fade in of the camera view.</p><h4 name="192a" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">reactivate</code></h4><p name="c53a" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">bool</code> default: <code class="markup--code markup--p-code">false</code></p><p name="d9ba" class="graf graf--p graf-after--p">When set to <code class="markup--code markup--p-code">false</code>, when a QR code is scanned, the <code class="markup--code markup--p-code">QRCodeScanner</code> will not scan another code until it is re-rendered. When set to <code class="markup--code markup--p-code">true</code> this will reactivate the scanning ability of the component.</p><h4 name="251a" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">reactivateTimeout</code></h4><p name="7c22" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">number</code> default: <code class="markup--code markup--p-code">0</code></p><p name="b59a" class="graf graf--p graf-after--p">Use this to configure how long it should take before the <code class="markup--code markup--p-code">QRCodeScanner</code> should reactivate.</p><h4 name="c39a" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">topContent</code></h4><p name="f783" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">oneOfType([ PropTypes.element, PropTypes.string, ])</code></p><p name="e001" class="graf graf--p graf-after--p">Use this to render any additional content at the top of the camera view.</p><h4 name="f0f2" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">bottomContent</code></h4><p name="1873" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">oneOfType([ PropTypes.element, PropTypes.string, ])</code></p><p name="158e" class="graf graf--p graf-after--p">Use this to render any additional content at the bottom of the camera view.</p><h4 name="70df" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">containerStyle</code></h4><p name="3fe2" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">any</code></p><p name="4167" class="graf graf--p graf-after--p">Use this to pass styling for the outermost container. Useful for adding margin/padding to account for navigation bar.</p><h4 name="bb93" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">cameraStyle</code></h4><p name="7fa3" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">any</code></p><p name="027b" class="graf graf--p graf-after--p">Use this to pass or overwrite styling for the camera window rendered.</p><h4 name="2806" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">topViewStyle</code></h4><p name="028c" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">any</code></p><p name="2aa7" class="graf graf--p graf-after--p">Use this to pass or overwrite styling for the <code class="markup--code markup--p-code">&lt;View&gt;</code> that contains the <code class="markup--code markup--p-code">topContent</code> prop.</p><h4 name="1f88" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">bottomViewStyle</code></h4><p name="aab2" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">any</code></p><p name="f534" class="graf graf--p graf-after--p">Use this to pass or overwrite styling for the <code class="markup--code markup--p-code">&lt;View&gt;</code> that contains the <code class="markup--code markup--p-code">bottomContent</code> prop.</p><h4 name="e83b" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">showMarker</code></h4><p name="7cce" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">boolean</code> default: <code class="markup--code markup--p-code">false</code></p><p name="852b" class="graf graf--p graf-after--p">Use this to show marker on the camera scanning window.</p><h4 name="068f" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">customMarker</code></h4><p name="4d02" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">element</code></p><p name="1f00" class="graf graf--p graf-after--p">Pass a RN element/component to use it as a custom marker.</p><h4 name="bc72" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">markerStyle</code></h4><p name="5c76" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">any</code></p><p name="df59" class="graf graf--p graf-after--p">Use this to add custom styling to the default marker.</p><h4 name="e518" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">notAuthorizedView</code></h4><p name="1275" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">element</code></p><p name="07b9" class="graf graf--p graf-after--p">Pass a RN element/component to use it when no permissions given to the camera (iOS only).</p><h4 name="f9f9" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">cameraType</code></h4><p name="939d" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">oneOf(['front', 'back'])</code> default: <code class="markup--code markup--p-code">'back'</code></p><p name="ea63" class="graf graf--p graf-after--p">Use this to control which camera to use for scanning QR codes, defaults to rear camera.</p><h4 name="29ae" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">checkAndroid6Permissions</code></h4><p name="25f1" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">bool</code> default: <code class="markup--code markup--p-code">false</code></p><p name="b404" class="graf graf--p graf-after--p">Use this to enable permission checking on Android 6</p><h4 name="fbdb" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">permissionDialogTitle</code></h4><p name="2222" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">string</code> default: <code class="markup--code markup--p-code">'Info'</code></p><p name="9cc9" class="graf graf--p graf-after--p">Use this to setting permission dialog title (Android only).</p><h4 name="50c6" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">permissionDialogMessage</code></h4><p name="3c8f" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">string</code> default: <code class="markup--code markup--p-code">'Need camera permission'</code></p><p name="b707" class="graf graf--p graf-after--p">Use this to setting permission dialog message (Android only).</p><h4 name="f81c" class="graf graf--h4 graf-after--p"><code class="markup--code markup--h4-code">cameraProps</code></h4><p name="0b17" class="graf graf--p graf-after--h4">propType: <code class="markup--code markup--p-code">object<br></code>Properties to be passed to the <code class="markup--code markup--p-code">Camera</code> component.</p><p name="ed79" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Using this npm package you can scan a Barcode too. I have not tried that in here but why don’t you give it a try and tell me in the comment section below.</strong></p><p name="097f" class="graf graf--p graf-after--p">Here in the tutorial, successfully implemented the plugin and got the perfect result. <a href="https://github.com/enappd/RNQRCodeScanning"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">You can follow all the steps and achieve this very easily or you can clone my repo on Github for both the plugins here and enjoy 😎 😎 😎 🕺 🕺 🕺..…</strong></a></p><h3 name="40c8" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">In this post, we learned how to integrate the QR Code scanner and use it in React-Native applications. Since the plugin is amazingly light and have great documentation, it is the developers’ first choice when it comes to creating QR code.</p><blockquote name="a560" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/RNQRCodeScanning"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">RNQRCodeScanning</strong></a><strong class="markup--strong markup--blockquote-strong">.</strong></blockquote><h3 name="a141" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3 is-selected">Now that you have learned the implementation of react-native-qrcode-scanner in React-Native, you can also try</p><ul class="postList"><li name="771c" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="ae6c" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue"><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*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="31cd" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>