QR Code and Barcode Scanning with Ionic & Capacitor
Tags: ionic, capacitor, qrcode, barcode
Published: 2020-03-29 22:10:39

<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="c2a3" 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="ec02" class="graf graf--p graf-after--figure">This post is about scanning QR code or Barcode in your cool new Capacitor Ionic app.</p><p name="039a" class="graf graf--p graf-after--p">Since this post is a mix of Ionic, Angular and Capacitor, it is possible you landed here by mistake. If you are looking for barcode scanner implementation in</p><ul class="postList"><li name="b27e" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Ionic 4 with Angular in Cordova</strong>&#8202;—&#8202;Read <a href="https://medium.com/enappd/ionic-4-qr-code-barcode-scanning-73a39675560b?source=friends_link&amp;sk=0e3ff5e0e8caec8ac58c3c7a3e8916c1"  class="markup--anchor markup--li-anchor"    target="_blank">this blog post</a></li><li name="9fb4" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">React Native</strong>&#8202;—&#8202;Read <a href="https://medium.com/enappd/barcode-and-qr-code-scanning-in-react-native-apps-8118530f4c15?source=friends_link&amp;sk=a9482dc8b90fa265e03d67bc367bd44f"  class="markup--anchor markup--li-anchor"    target="_blank">this blog post</a></li><li name="7075" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Ionic 4 with Angular in Capacitor</strong>&#8202;—&#8202;Continue reading this post</li></ul><p name="8eac" class="graf graf--p graf-after--li">As you can see from above, there are several options available for Hybrid app development these days, and it is easy to get confused between them. This post is focussed on <strong class="markup--strong markup--p-strong">Ionic framework</strong> with <strong class="markup--strong markup--p-strong">Angular</strong> as the front-end framework, and <a href="https://capacitor.ionicframework.com/docs/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Capacitor</strong></a> as runtime and build environment.</p><blockquote name="6fe6" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code for this tutorial is available on Github repo </strong><a href="https://github.com/enappd/ionic-capacitor-barcode-scanner"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-capacitor-barcode-scanner</strong></a></blockquote><p name="4297" class="graf graf--p graf-after--blockquote">Let’s see a brief intro to each of the included frameworks:</p><ol class="postList"><li name="97a5" class="graf graf--li graf-after--p">Ionic</li><li name="6f30" class="graf graf--li graf-after--li">Capacitor</li></ol><p name="94e0" class="graf graf--p graf-after--li">(If you already know about the frameworks, skip the next couple of sections)</p><h3 name="05bc" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;?</h3><p name="c1c7" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a hybrid mobile app development SDK. It provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging <a href="https://cordova.apache.org/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Cordova</a> environment.</p><p name="369e" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><p name="d3f4" class="graf graf--p graf-after--p">It is important to note the contribution of Cordova/Capacitor in this. Ionic is only a UI wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Cordova/Capacitor is the build environment that containerizes (sort of) this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera etc.</p><h3 name="c469" class="graf graf--h3 graf-after--p">Capacitor&#8202;—&#8202;How is it different from Cordova&nbsp;?</h3><p name="21c5" class="graf graf--p graf-after--h3">Cordova helps build Ionic web app into a mobile device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.</p><p name="b5fd" class="graf graf--p graf-after--p">Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, <em class="markup--em markup--p-em">and</em> the web. Ionic people call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.</p><blockquote name="c69a" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Capacitor is very similar to Cordova, but with some key differences in the app workflow</em></strong></blockquote><p name="5f29" class="graf graf--p graf-after--blockquote">Here are the differences between Cordova and Capacitor</p><ol class="postList"><li name="0171" class="graf graf--li graf-after--p">Capacitor considers each platform project a <em class="markup--em markup--li-em">source asset</em> instead of a <em class="markup--em markup--li-em">build time asset</em>. That means, Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time</li><li name="4f71" class="graf graf--li graf-after--li">Because of the above, Capacitor does not use <code class="markup--code markup--li-code">config.xml</code> or a similar custom configuration for platform settings. Instead, configuration changes are made by editing <code class="markup--code markup--li-code">AndroidManifest.xml</code> for Android and <code class="markup--code markup--li-code">Info.plist</code> for Xcode</li><li name="3aaa" class="graf graf--li graf-after--li">Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like <code class="markup--code markup--li-code">ionic run ios</code>&nbsp;. You will have to run iOS apps using Xcode, and Android apps using Android studio</li><li name="0582" class="graf graf--li graf-after--li">Since platform code is not a <em class="markup--em markup--li-em">source asset, </em>you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers</li></ol><p name="39a8" class="graf graf--p graf-after--li">In essence, Capacitor is like a fresh, more flexible version of Corodva.</p><h4 name="f5b0" class="graf graf--h4 graf-after--p">Plugins</h4><p name="9c16" class="graf graf--p graf-after--h4">Cordova and <a href="https://ionicframework.com/docs/native"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Ionic Native</a> plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be <a href="https://capacitor.ionicframework.com/docs/cordova/known-incompatible-plugins/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">incompatible with Capacitor.</a> For Barcode Scanning functionality, we’ll use the <a href="https://github.com/phonegap/phonegap-plugin-barcodescanner"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Phonegap Plugin Barcode Scanner</a>.</p><h3 name="97ae" class="graf graf--h3 graf-after--p">QR code and&nbsp;Barcode</h3><p name="6280" class="graf graf--p graf-after--h3">QR code or barcode 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.</p><figure tabindex="0" contenteditable="false" name="3e4c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 393px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><img class="graf-image" data-image-id="0*cGmFrmddJKleImkR" data-width="739" data-height="415" src="https://cdn-images-1.medium.com/max/800/0*cGmFrmddJKleImkR"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">We scan QR codes in supermarkets, and on products in&nbsp;general</figcaption></figure><p name="608a" class="graf graf--p graf-after--figure">Here are some potential use cases for these plugins in an Ionic 4 app</p><ul class="postList"><li name="0db3" class="graf graf--li graf-after--p">Super market app&#8202;—&#8202;QR/barcode scanners can provide product info to users</li><li name="acba" class="graf graf--li graf-after--li">Delivery app&#8202;—&#8202;Barcode scan can track/sign off a package</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="a384" class="graf graf--p graf-after--li">All this can now be done in Ionic apps, with the latest plugins available in Ionic 4 and Capacitor.</p><h3 name="e0c8" class="graf graf--h3 graf-after--p">Structure of&nbsp;post</h3><p name="1215" class="graf graf--p graf-after--h3">I always go step-by-step for readers of all experience level. If you know certain steps, feel free to skip them</p><p name="0242" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1:</strong> Create a basic Ionic Angular app</p><p name="6cff" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2:</strong> Connect Capacitor with your app</p><p name="afd3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3: </strong>Setup Barcode Scanner Plugin and functions</p><p name="a7c6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4: </strong>Build and Test your app on Android</p><p name="151c" class="graf graf--p graf-after--p">Let’s get started with Ionic Capacitor Barcode scanning&nbsp;!</p><h3 name="200b" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic Angular&nbsp;app</h3><blockquote name="0684" class="graf graf--blockquote graf-after--h3"><em class="markup--em markup--blockquote-em">I have covered this topic in detail in </em><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener nofollow noopener"    target="_blank"><em class="markup--em markup--blockquote-em">this blog</em></a><em class="markup--em markup--blockquote-em">.</em></blockquote><p name="a933" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="4efc" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.16.0 at the time of this blog post)</li><li name="1ce4" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.6.0 )</li><li name="0b2b" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="9724" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">blank</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-capacitor-barcode-scanner</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="8f05" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="3d59" class="graf graf--p graf-after--pre">Make slight modifications to the home page as you like. My app’s home page looks like this</p><figure tabindex="0" contenteditable="false" name="f781" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 387px; max-height: 679px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.5%;"></div><img class="graf-image" data-image-id="1*Xi7q3emCoXmRs94ewoqpFA.png" data-width="387" data-height="679" alt="Demo home page for capacitor barcode scanning app" src="https://cdn-images-1.medium.com/max/800/1*Xi7q3emCoXmRs94ewoqpFA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Demo home page for capacitor barcode scanning&nbsp;app</figcaption></figure><h3 name="5524" class="graf graf--h3 graf-after--figure">Step 2— Integrate Capacitor in the&nbsp;app</h3><p name="6e4f" class="graf graf--p graf-after--h3">Capacitor can be attached to an existing Ionic app as well. To attach Capacitor to your existing Ionic app, run</p><pre name="8fac" class="graf graf--pre graf-after--p">$ ionic integrations enable capacitor</pre><p name="84e3" class="graf graf--p graf-after--pre">This will attach Capacitor to your Ionic app. After this, you have to <code class="markup--code markup--p-code">init</code> the Capacitor app with</p><pre name="b4a2" class="graf graf--pre graf-after--p">$ npx cap init YOUR_APP_NAME YOUR_APP_ID</pre><p name="3025" class="graf graf--p graf-after--pre">You should already be having <code class="markup--code markup--p-code">YOUR_APP_NAME</code> and <code class="markup--code markup--p-code">YOUR_APP_ID</code> in <code class="markup--code markup--p-code">config.xml</code>&nbsp;. Use the same here, so that there is no mismatch or confusion.</p><h3 name="bda3" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Setup Barcode Scanner&nbsp;Plugin</h3><p name="183d" class="graf graf--p graf-after--h3">Install the following packages by executing the following commands</p><pre name="b78a" class="graf graf--pre graf-after--p">$ ionic cordova plugin add phonegap-plugin-barcodescanner<br>$ npm install @ionic-native/barcode-scanner</pre><p name="5afa" class="graf graf--p graf-after--pre">Although we are installing a Cordova plugin, it will work equally well with Capacitor. Now import the Barcode module in your projects <code class="markup--code markup--p-code">app.module.ts</code> and then inject it inside the provider.</p><figure tabindex="0" contenteditable="false" name="7896" 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/7e68be1aba6c6e2bae0c47f6f7b010b6.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Code for scanning barcode in Capacitor Ionic&#8202;—&#8202;app.module.ts</figcaption></figure><p name="e2f7" class="graf graf--p graf-after--figure">Now you can inject it as a dependency inside your page’s constructor and access it all over the app components.</p><p name="d884" class="graf graf--p graf-after--p">After this, you can simply use the following function to complete a scan process.</p><figure tabindex="0" contenteditable="false" name="a24f" 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/8329fbab97bf70f94c8d04296087fdf6.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Code for scanning a barcode in Capacitor Ionic&#8202;—&#8202;home.page.ts</figcaption></figure><p name="1de3" class="graf graf--p graf-after--figure">This function will open the phone’s camera, allow you to scan a barcode, and in result will provide <code class="markup--code markup--p-code">success</code> or <code class="markup--code markup--p-code">error</code>&nbsp;.</p><p name="7719" class="graf graf--p graf-after--p">You can also pass an <code class="markup--code markup--p-code">options</code> object in the <code class="markup--code markup--p-code">scan({options})</code> function. These options are</p><pre name="a4b4" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">preferFrontCamera</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">showFlipCameraButton</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">showTorchButton</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">torchOn</strong>: true, // Android, launch with the torch switched on (if   available)<br><strong class="markup--strong markup--pre-strong">saveHistory</strong>: true, // Android, save scan history (default false)<br><strong class="markup--strong markup--pre-strong">prompt</strong> : "Place a barcode inside the scan area", // Android<br><strong class="markup--strong markup--pre-strong">resultDisplayDuration</strong>: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500<br><strong class="markup--strong markup--pre-strong">formats</strong> : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED<br><strong class="markup--strong markup--pre-strong">orientation</strong> : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device</pre><p name="255f" class="graf graf--p graf-after--pre">This plugin will, of course, require a camera and file saving access on the device, so take care of that as per your device. Since iOS 10 it’s mandatory to add <code class="markup--code markup--p-code">NSCameraUsageDescription</code>.</p><blockquote name="eaa0" class="graf graf--blockquote graf-after--p"><code class="markup--code markup--blockquote-code">NSCameraUsageDescription</code> describes the reason that the app accesses the user's camera. When the system prompts the user to allow access, this string is displayed as part of the dialog box. If you didn't provide the usage description, the app will crash before showing the dialog. Also, Apple will reject apps that access private data but don't provide a usage description.</blockquote><p name="a88c" class="graf graf--p graf-after--blockquote">To add <code class="markup--code markup--p-code">NSCameraUsageDescription</code> entry, you can use the <code class="markup--code markup--p-code">edit-config</code> tag in the <code class="markup--code markup--p-code">config.xml</code> like this:</p><pre name="28f0" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge"&gt;<br>    &lt;string&gt;To scan barcodes&lt;/string&gt;<br>&lt;/edit-config&gt;</code></pre><p name="ecd1" class="graf graf--p graf-after--pre">Let’s go and check what we get on clicking on barcode scan button.</p><h3 name="330a" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 4: </strong>Build and Test your app on&nbsp;Android</h3><p name="600d" class="graf graf--p graf-after--h3">Before adding a platform, you need to build your Capacitor assets</p><pre name="046d" class="graf graf--pre graf-after--p">// Build web assets<br>$ <strong class="markup--strong markup--pre-strong">ionic build</strong></pre><p name="e8a6" class="graf graf--p graf-after--pre">Now add a new platform, in our case&#8202;—&#8202;Android</p><pre name="5622" class="graf graf--pre graf-after--p">// Add android platform<br>$ <strong class="markup--strong markup--pre-strong">npx cap add android</strong></pre><p name="4aa0" class="graf graf--p graf-after--pre">Sync any changes done to the code in the platform, and then open the default editor for building the app on device</p><pre name="c8d4" class="graf graf--pre graf-after--p">// Copy all changes to Android platform<br>$ <strong class="markup--strong markup--pre-strong">npx cap sync<br></strong>// Open the project in Android studio<br>$ <strong class="markup--strong markup--pre-strong">npx cap open android</strong></pre><p name="0067" class="graf graf--p graf-after--pre">This opens up the Android Studio, and you can build the app on your device. Once built, test the app with different QR codes and Barcodes. Following is what I get when I test on different codes on my laptop</p><figure tabindex="0" contenteditable="false" name="4885" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*uOvYfM1zSmb5q2D1I-I4TA.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*uOvYfM1zSmb5q2D1I-I4TA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Capacitor QRcode and Barcode scanning&nbsp;example</figcaption></figure><p name="2ed4" class="graf graf--p graf-after--figure">Congrats! You have successfully completed a Barcode and QRcode scanner app 🎉 🎉</p><p name="beaf" class="graf graf--p graf-after--p">You can scan a lot of other varieties as well. Following are the types of codes supported by this plugin</p><figure tabindex="0" contenteditable="false" name="b090" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 398px; max-height: 639px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 160.60000000000002%;"></div><img class="graf-image" data-image-id="1*2EsvkL9gza6HG_VVR390zQ.png" data-width="398" data-height="639" alt="Types of codes supported by Phonegap Barcode Scanner plugin" src="https://cdn-images-1.medium.com/max/800/1*2EsvkL9gza6HG_VVR390zQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Types of codes supported by Phonegap Barcode Scanner&nbsp;plugin</figcaption></figure><h3 name="5082" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">In this post, we learned how to integrate Barcode scanner and QR Code scanner <code class="markup--code markup--p-code">phonegap-plugin-barcodescanner</code> in Ionic 4 Capacitor apps. This plugin has great documentation and it supports a lot of code varieties to be scanned. Hence it is developers’ first choice in scanning with Ionic apps. Using this, you can easily integrate QRcode or barcode scanning functionality in any of your Ionic Capacitor apps.</p><blockquote name="1b97" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code for this tutorial is available on Github repo </strong><a href="https://github.com/enappd/ionic-capacitor-barcode-scanner"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-capacitor-barcode-scanner</strong></a></blockquote><h3 name="16b3" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">phonegap-plugin-barcodescanner</strong></code>in Ionic Capacitor, you can also try</p><h4 name="35e7" class="graf graf--h4 graf-after--p">Ionic React Capacitor</h4><ul class="postList"><li name="6e18" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/twitter-login-in-ionic-react-capacitor-app/121"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter Login in Ionic React Capacitor Apps</a></li><li name="5a6e" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-react-capacitor-apps/118"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook Login in Ionic React Capacitor Apps</a></li><li name="8885" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-ionic-apps-in-react-using-capacitor/26"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">How to make basic apps in ionic-react</a>-capacitor</li><li name="6594" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Camera and Image gallery in Ionic-React-Capacitor</a></li><li name="4f4f" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/111"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Push notification in Ionic-React-Capacitor apps</a></li><li name="c5a7" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/play-music-in-ionic-capacitor-apps/112"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Playing Music in Ionic Capacitor apps</a></li><li name="66fd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Adding Icon and Splash in Ionic React Capacitor apps</a></li><li name="d39b" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/html5-games-in-ionic-capacitor-using-phaser/115"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create HTML5 games in Ionic Capacitor apps using Phaser</a></li></ul><p name="9ed9" class="graf graf--p graf-after--li is-selected">If you need a base to start your next <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="7553" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="1*9eKBtNJaAYPMzyZvyifWIQ.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/1*9eKBtNJaAYPMzyZvyifWIQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="9d27" class="graf graf--h4 graf-after--figure">More Ionic Angular&nbsp;Blogs</h4><ul class="postList"><li name="85a8" class="graf graf--li graf-after--h4">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="5acf" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="dfc7" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="6667" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="91ad" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="a628" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="779c" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="38ee" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="0711" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="12ae" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 Angular app with Cordova</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="001a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 560px; max-height: 353px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="0*lqQcM0JyxN7nFQdL.jpeg" data-width="560" data-height="353" src="https://cdn-images-1.medium.com/max/800/0*lqQcM0JyxN7nFQdL.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full App with huge number of layouts and&nbsp;features</figcaption></figure><p name="199f" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>