React Native V/s Ionic V/s Flutter in 2019
Tags: reactnative, flutter, ionic, comparison
Published: 2020-03-27 04:09:52

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" data-scroll="native"><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="1106" class="section section--body section--first section--last" data-scroll="native"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn" data-scroll="native"><h3 name="3c7a" class="graf graf--h3 graf--leading graf--title" data-scroll="native">React Native V/s Ionic V/s Flutter in&nbsp;2019</h3></div><div class="section-inner sectionLayout--fullWidth"><figure tabindex="0" contenteditable="false" name="edb6" class="graf graf--figure graf--layoutFillWidth is-defaultValue graf-after--h3"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*43Y8P1XAsfxexzbQGDN8GQ.png" data-width="1600" data-height="480" src="https://cdn-images-1.medium.com/max/2560/1*43Y8P1XAsfxexzbQGDN8GQ.png" data-delayed-src="https://cdn-images-1.medium.com/max/2560/1*43Y8P1XAsfxexzbQGDN8GQ.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)"><span class="defaultValue">Type caption for image (optional)</span><br></figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="858c" class="graf graf--p graf-after--figure" data-scroll="native" style="">In this post, we’ll try to compare&#8202;—&#8202;Ionic, React Native and Flutter framework. All three technologies <strong class="markup--strong markup--p-strong">allow you to build mobile apps for both iOS and Android. </strong>All three are great frameworks because they allow developers to quickly prototype and publish apps on multiple platform with single source code.</p><p name="5b3b" class="graf graf--p graf-after--p" data-scroll="native" style="">The first great thing is&#8202;—&#8202;You can publish apps without the need to learn Swift, Objective-C, Java or Kotlin! Instead, you’ll use JavaScript (for React Native, and Ionic) and Dart (for Flutter). Hence you’re able to create native apps for both platforms with one language instead of two&#8202;—&#8202;this obviously reduces the learning effort you have to take to build your mobile app by a lot!</p><p name="3957" class="graf graf--p graf-after--p" data-scroll="native" style="">Great! So how do these technologies differ, which one is the best choice for your next mobile project? Let’s take a look…</p><h3 name="c891" class="graf graf--h3 graf-after--p" data-scroll="native" style="">What is Ionic&nbsp;4?</h3><figure tabindex="0" contenteditable="false" name="4c42" class="graf graf--figure graf-after--h3" data-scroll="native" style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 512px; max-height: 512px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*ZU1eWct801yP-QpUJOaI6Q.png" data-width="512" data-height="512" src="https://cdn-images-1.medium.com/max/800/1*ZU1eWct801yP-QpUJOaI6Q.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Logo</figcaption></figure><p name="56d0" class="graf graf--p graf-after--figure" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by <a href="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------" data-href="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------" class="markup--anchor markup--p-anchor" data-tooltip="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------" data-href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------" class="markup--anchor markup--p-anchor" data-tooltip="https://medium.com/u/14b1be5c1354?source=post_page---------------------------" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Ben Sperry</a> and Adam Bradley of Drifty Co. in 2013. Ionic 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 Cordova.</p><p name="010c" class="graf graf--p graf-after--p" data-scroll="native" style="">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><h3 name="de03" class="graf graf--h3 graf-after--p" data-scroll="native" style="">What Is React&nbsp;Native?</h3><figure tabindex="0" contenteditable="false" name="4a33" class="graf graf--figure graf-after--h3" data-scroll="native" style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 512px; max-height: 512px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*R85ud_A5Ag7i52oQwemI6Q.png" data-width="512" data-height="512" src="https://cdn-images-1.medium.com/max/800/1*R85ud_A5Ag7i52oQwemI6Q.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">React native&nbsp;Logo</figcaption></figure><p name="05ce" class="graf graf--p graf-after--figure" data-scroll="native" style="">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="7fee" class="graf graf--p graf-after--p" data-scroll="native" style="">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML 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, not webviews, 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="9d66" class="graf graf--p graf-after--p" data-scroll="native" style="">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: <a href="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1YipO7A" data-href="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1YipO7A" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1YipO7A" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Facebook</a>, <a href="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1PPEiZH" data-href="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1PPEiZH" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1PPEiZH" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Palantir</a>, and <a href="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1PPEjNg" data-href="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1PPEjNg" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=http%3A%2F%2Fbit.ly%2F1PPEjNg" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.</p><h3 name="f61b" class="graf graf--h3 graf-after--p" data-scroll="native" style="">What is&nbsp;Flutter?</h3><figure tabindex="0" contenteditable="false" name="5a4b" class="graf graf--figure graf-after--h3" data-scroll="native" style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 500px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*gTqZ01Owzh7lMaW4vdkfSQ.png" data-width="500" data-height="500" src="https://cdn-images-1.medium.com/max/800/1*gTqZ01Owzh7lMaW4vdkfSQ.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Flutter Logo</figcaption></figure><p name="4232" class="graf graf--p graf-after--figure" data-scroll="native" style="">Flutter is Google’s portable UI toolkit for crafting high-quality native experiences for mobile, web and desktop in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.</p><p name="879f" class="graf graf--p graf-after--p" data-scroll="native" style="">Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine). See this <a href="https://medium.com/r/?url=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I%2Fedit%23slide%3Did.gbb3c3233b_0_162" data-href="https://medium.com/r/?url=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I%2Fedit%23slide%3Did.gbb3c3233b_0_162" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I%2Fedit%23slide%3Did.gbb3c3233b_0_162" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">architecture diagram</a> for a better picture of the main components.</p><p name="e1b2" class="graf graf--p graf-after--p" data-scroll="native" style="">For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up the development of mobile apps and reduces the cost and complexity of app production across iOS and Android.</p><p name="e0b9" class="graf graf--p graf-after--p" data-scroll="native" style="">For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.</p><h3 name="6fa8" class="graf graf--h3 graf-after--p" data-scroll="native" style="">What’s the point of comparing these 3 Best Tools for Modern App Development?</h3><p name="0b65" class="graf graf--p graf-after--h3" data-scroll="native" style="">When developers (or even non-developers) want to create an app for their startup or business, the first question that pops up in their mind is <strong class="markup--strong markup--p-strong">Which framework is best for app development</strong>. The question becomes important from cost, performance and time point-of-view.</p><p name="2cbb" class="graf graf--p graf-after--p" data-scroll="native" style="">We’ve got your back in case you are finding the best tool to develop a new mobile app or revamp existing app. This post tries to solve all your questions regarding best cross-platform app development tools and what to choose and when.</p><p name="81e3" class="graf graf--p graf-after--p" data-scroll="native" style="">We also want to make one thing clear that what to choose and when always remains subjective and depends on many factors. But this post can help you decide the best framework according to your needs.</p><h3 name="1394" class="graf graf--h3 graf-after--p" data-scroll="native" style="">Flutter vs. React Native vs.&nbsp;Ionic</h3><p name="dd84" class="graf graf--p graf-after--h3" data-scroll="native" style="">Flutter is a software development kit developed by Google by using the Dart programming language. React Native is an SDK developed by Facebook, and the designing of the mobile applications take place JavaScript. Ionic follows a different approach while compared to the other two. With Ionic, you will create a real native app using web app with HTML, JSS, and CSS. The wrapped web content ensures that you can re-use or re-code the code.</p><h3 name="79d2" class="graf graf--h3 graf-after--p" data-scroll="native" style="">Top 11 Attributes to Consider While Selecting the Platforms for Cross-platform Mobile App Development</h3><p name="d822" class="graf graf--p graf-after--h3" data-scroll="native" style="">To decide which one is better for Cross-Platform Mobile App Development lets first define the attributes based on which we will compare all of the above. And, these are:</p><ul class="postList"><li name="5c25" class="graf graf--li graf-after--p" data-scroll="native" style="">The Language Stack</li><li name="fd38" class="graf graf--li graf-after--li" data-scroll="native" style="">Do not repeat yourself(DRY)</li><li name="0cba" class="graf graf--li graf-after--li" data-scroll="native" style="">Rich pre-styled Component Library</li><li name="be67" class="graf graf--li graf-after--li" data-scroll="native" style="">Performance</li><li name="7324" class="graf graf--li graf-after--li" data-scroll="native" style="">User Interface</li><li name="1f12" class="graf graf--li graf-after--li" data-scroll="native" style="">Ecosystem / Third-Party Libraries</li><li name="4e2b" class="graf graf--li graf-after--li" data-scroll="native" style="">Market and Community</li><li name="852c" class="graf graf--li graf-after--li" data-scroll="native" style="">Accessing Native Device Features</li><li name="773c" class="graf graf--li graf-after--li" data-scroll="native" style="">Supported Platforms</li><li name="608b" class="graf graf--li graf-after--li" data-scroll="native" style="">Popular Apps</li><li name="92cd" class="graf graf--li graf-after--li" data-scroll="native" style="">Pricing</li></ul><h3 name="f106" class="graf graf--h3 graf-after--li" data-scroll="native" style="">1. The Language&nbsp;Stack</h3><p name="62d6" class="graf graf--p graf-after--h3" data-scroll="native" style="">With this metric, I want to explore which framework utilizes which programming languages and offer what benefits:</p><p name="6bc6" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> It utilizes JavaScript which is at present one of the most popular, dynamic and high-level programming language. It combines the advantages of JavaScript and React.JS and is backed by Facebook.</p><p name="ed26" class="graf graf--p graf-after--p" data-scroll="native" style="">The solid side of React Native that makes it best among the other three frameworks in terms of PL is that it allows writing a few components in Swift, Objective-C or Java when developers require them. Utilizing native modules and libraries in React Native applications, you can manage computationally heavy operations like video handling or image editing.</p><p name="d772" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic framework:</strong> It uses HTML5, CSS, and JS to develop and run applications, and requires Cordova wrapper to access native platform controllers. Utilizing IONIC, you can also use TypeScript that improves the quality of the code.</p><p name="8155" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> It utilizes Dart to develop high-quality applications for Android, iOS and the web. Dart is an amazing Programming language that offers plenty of benefits and is based on C/C++ and java. Despite being new, the language is soon expected to take the industry by storm.</p><p name="3b30" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the advantages offered by their programming languages:</p><ol class="postList"><li name="0be8" class="graf graf--li graf-after--p" data-scroll="native" style="">React Native (React)</li><li name="19d9" class="graf graf--li graf-after--li" data-scroll="native" style="">Flutter (Dart)</li><li name="f9b3" class="graf graf--li graf-after--li" data-scroll="native" style="">Ionic Framework (Angular)</li></ol><h3 name="b76a" class="graf graf--h3 graf-after--li" data-scroll="native" style="">2. Do not repeat yourself&nbsp;(DRY)</h3><p name="3bd5" class="graf graf--p graf-after--h3" data-scroll="native" style="">With this metric, I want to explore how much of the code you write can be re-used for both platforms.</p><p name="7451" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> Awesome re-usability! The “wrapped web app” concept ensures that you can easily re-use your code&#8202;—&#8202;you’re just building a wrapped web app in the end. The great component library of adaptive components (i.e. automatically styled for the platform the app runs on) also helps.</p><p name="177c" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> Also really great to re-use. The widgets it ships with often don’t adapt to the underlying platform, instead you use <a href="https://medium.com/r/?url=https%3A%2F%2Fmaterial.io%2Fdesign%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fmaterial.io%2Fdesign%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fmaterial.io%2Fdesign%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Material Design</a> on both platforms by default. The Flutter team is providing more and more iOS-styled components though. You can find out on which platform you’re running and manually swap widgets but that’s, of course, a bit more work than required by Ionic. If you need platform-specific re-styling, you can move the position of Flutter on the slider further to the right.</p><p name="4708" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> Also compiles to native defaults but only provides a basic set of components to start with. You have to style most of them on your own, hence more work is required to achieve appropriate styles on both platforms. Generally, code can be re-used though (since you still only use one language and libraries like <a href="https://medium.com/r/?url=http%3A%2F%2Fredux.js.org%2F" data-href="https://medium.com/r/?url=http%3A%2F%2Fredux.js.org%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=http%3A%2F%2Fredux.js.org%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Redux</a> need no adjustment).</p><p name="836a" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the Code Reusability</p><ol class="postList"><li name="49eb" class="graf graf--li graf-after--p" data-scroll="native" style="">Ionic Framework</li><li name="66fa" class="graf graf--li graf-after--li" data-scroll="native" style="">Flutter</li><li name="67e8" class="graf graf--li graf-after--li" data-scroll="native" style="">React Native</li></ol><h3 name="9104" class="graf graf--h3 graf-after--li" data-scroll="native" style="">3. Rich pre-styled Component Library</h3><p name="24ee" class="graf graf--p graf-after--h3" data-scroll="native" style="">How easy is it to build beautiful UIs? Do you have to create and style a lot of components (UI elements) on your own or do you have a rich suite of pre-built ones? Are the components adapting to the underlying platform automatically? That’s what this metric is about.</p><p name="ee02" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> Ionic in its core is a big set of pre-built (and pre-styled) components. The compiler/ toolchain which yields a native app is also part of the Ionic package (handled via its CLI) but it utilizes other packages like <a href="https://medium.com/r/?url=https%3A%2F%2Fcordova.apache.org%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fcordova.apache.org%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fcordova.apache.org%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Cordova</a> or <a href="https://medium.com/r/?url=https%3A%2F%2Fcapacitor.ionicframework.com%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fcapacitor.ionicframework.com%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fcapacitor.ionicframework.com%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Capacitor</a>. The components provided by Ionic automatically adapt to the platform the app runs on and therefore, Ionic makes the creation of beautiful, native-looking apps a breeze!</p><p name="6fa6" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> Flutter also ships with a <a href="https://medium.com/r/?url=https%3A%2F%2Fflutter.io%2Fwidgets%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fflutter.io%2Fwidgets%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fflutter.io%2Fwidgets%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">comprehensive suite</a> of built-in widgets. These mostly use the Material Design, some Cupertino-style (iOS style) widgets exist, too. More and more iOS-styled components are getting added. With all these widgets, you can quickly create nice-looking UIs without doing too much manual styling. Only if you need different looks for different platforms, some effort can be required since the widgets don’t adapt automatically.</p><p name="b857" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> A decent set of built-in components is provided but a lot of them need to be styled by you. And they’re non-adaptive, instead&#8202;—&#8202;just as with Flutter&#8202;—&#8202;you get alternatives for both operating systems. That requires adjustments in your code, where you have to choose, use and style widgets conditionally.</p><p name="ed7e" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the pre-styled Component Library</p><ol class="postList"><li name="a622" class="graf graf--li graf-after--p" data-scroll="native" style="">Ionic Framework</li><li name="a027" class="graf graf--li graf-after--li" data-scroll="native" style="">Flutter</li><li name="e073" class="graf graf--li graf-after--li" data-scroll="native" style="">React Native</li></ol><h3 name="9585" class="graf graf--h3 graf-after--li" data-scroll="native" style="">4. Performance</h3><p name="8887" class="graf graf--p graf-after--h3" data-scroll="native" style="">This metric is the most important one and speaks for itself&#8202;—&#8202;how do the apps made in different frameworks perform from a run-time performance perspective?</p><p name="fbd7" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> The performance it provides is very similar to native applications as it renders code elements specifically to the native APIs. React additionally allow developers to use native modules written in native languages to write code for complicated operations. However, they can’t be reused across two platforms; their main purpose is to provide higher performance.</p><p name="86a0" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> In terms of performance, Ionic loses the game. Its performance isn’t as similar to React Native or flutter offers since it utilizes web technologies to render an application. This approach significantly decreases the speed. Also, it doesn’t utilize native components and tries to create a native look and feel by using web technologies.</p><p name="1710" class="graf graf--p graf-after--p" data-scroll="native" style="">The upside of Ionic is its quick testing process that runs instantly in a browser that streamlines the development process.</p><p name="ee85" class="graf graf--p graf-after--p" data-scroll="native" style="">Ionic offers a poorer performance among these 3 as it’s a wrapped web app in the end. <strong class="markup--strong markup--p-strong">But this is often misunderstood!</strong> “Worse” sounds extremely bad but “worse” doesn’t actually mean “horrible” or even “bad”. Instead, you got worse performance than with the other approaches. In fact, on the devices we got these days, your app will probably run more than smooth! If you only (imaginary!) got 100fps instead of 105fps&#8202;—&#8202;would you notice a difference? You wouldn’t, so <strong class="markup--strong markup--p-strong">keep Ionic in your mind for your next app!</strong></p><p name="8ec8" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> When compared on the basis of app performance, it is the Flutter that takes the crown over its competitors. Because it has advantages of Dart and there is no JavaScript bridge for starting interactions with the device native components, the speed it offers is amazing.</p><p name="2f8a" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the performance they offer:</p><ol class="postList"><li name="7132" class="graf graf--li graf-after--p" data-scroll="native" style="">Flutter</li><li name="fb88" class="graf graf--li graf-after--li" data-scroll="native" style="">React Native</li><li name="a920" class="graf graf--li graf-after--li" data-scroll="native" style="">Ionic</li></ol><h3 name="d05d" class="graf graf--h3 graf-after--li" data-scroll="native" style="">5. User Interface</h3><p name="0850" class="graf graf--p graf-after--h3" data-scroll="native" style="">Users judge apps within the first few seconds of usage and that’s why GUI of an app must be engaging while being easy&#8202;—&#8202;let’s see what these frameworks offer:</p><p name="c779" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> React Native modules associated with native UI controllers, which gives amazing user experience that is very close to native apps. It additionally utilizes the ReactJS library with extensive UI elements and streamlines the UI development.</p><p name="6fe9" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> Ionic UI doesn’t utilize native elements at all and renders everything in HTML and CSS. Then it applies Cordova to give native mobile experience. Angular components that accompany the framework also enable Ionic apps look like the native ones.</p><p name="20d9" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter: </strong>Flutter provides the best User Interfaces<strong class="markup--strong markup--p-strong">. </strong>No doubt Ionic give us cross-platform apps but their efficiency and performance cannot beat Flutter and React Native. They stuck and lack in responsiveness if an app is heavy and more native UI components are used.</p><p name="2226" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the UI they offer:</p><ol class="postList"><li name="1888" class="graf graf--li graf-after--p" data-scroll="native" style="">Flutter</li><li name="5d34" class="graf graf--li graf-after--li" data-scroll="native" style="">React Native</li><li name="379d" class="graf graf--li graf-after--li" data-scroll="native" style="">Ionic</li></ol><h3 name="3f31" class="graf graf--h3 graf-after--li" data-scroll="native" style="">6. Ecosystem / Third-Party Libraries</h3><p name="96ce" class="graf graf--p graf-after--h3" data-scroll="native" style="">What does the ecosystem look like? Is it easy to find help (on <a href="https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Stackoverflow</a> etc) and are there enough third-party libraries available to add that one feature your app needs?</p><p name="fc73" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> Ionic uses JavaScript for its logic&#8202;—&#8202;and whilst you can use it with any (or no) JavaScript framework, it provides especially great support for Angular. Therefore, you benefit from these ecosystems. And the JavaScript, as well as the Angular ecosystem, is huge! Thousands of threads on <a href="https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Stackoverflow</a> and packages on <a href="https://medium.com/r/?url=https%3A%2F%2Fwww.npmjs.com%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fwww.npmjs.com%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fwww.npmjs.com%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">npm</a> help you solve your problems.</p><p name="9b8b" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> Flutter is seeing tremendous growth! You find quite a lot of discussions on Stackoverflow and third-party libraries and packages (on <a href="https://medium.com/r/?url=https%3A%2F%2Fpub.dartlang.org%2Fflutter" data-href="https://medium.com/r/?url=https%3A%2F%2Fpub.dartlang.org%2Fflutter" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fpub.dartlang.org%2Fflutter" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">its own platform</a>). Despite being relatively new, it’s already quite mature and has a decent ecosystem.</p><p name="a58f" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> It uses JavaScript and React, hence you got those ecosystems available. Additionally, React Native on its own has quite a vibrant ecosystem and community, hence you find many threads on Stackoverflow and a lot of third-party packages that add missing functionalities. A downside is that you often need to rely on the ecosystem (like plugins, starters etc.) since only core features are included in React Native itself. React Native’s ecosystem in not as strong as others, and often keeps changing or the third-party plugins can’t keep pace with changing React Native</p><p name="a177" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the Ecosystem / Third-Party Libraries</p><ol class="postList"><li name="9752" class="graf graf--li graf-after--p" data-scroll="native" style="">Ionic</li><li name="6c1e" class="graf graf--li graf-after--li" data-scroll="native" style="">Flutter</li><li name="928b" class="graf graf--li graf-after--li" data-scroll="native" style="">React Native</li></ol><h3 name="f91c" class="graf graf--h3 graf-after--li" data-scroll="native" style="">7. Market and Community</h3><p name="2c97" class="graf graf--p graf-after--h3" data-scroll="native" style="">Having a dynamic ecosystem is something worth being thankful for&#8202;—&#8202;but it matters how popular is an option? Let’s see:</p><p name="db93" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> React Native is the king when it comes to market and community recognition. The network of its developers is quickly growing and as of now has many experienced React Native Engineers. This makes it easy to kick start a React project. It utilizes an amazingly popular library (React) and the most essential web development language (JavaScript) and provides real native applications. These qualities make it a strong platform and are the reasons behind its fame.</p><p name="97a1" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> It is the second most popular framework after React. It empowers developers to build native mobile apps in the fastest possible way. Ionic has a huge community support, as well as a <a href="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com" data-href="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">great marketplace</a> where you can find a lot of starters and templates to jump start any app from <a href="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Ftaxi-booking-complete-platform-ionic-4" data-href="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Ftaxi-booking-complete-platform-ionic-4" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Ftaxi-booking-complete-platform-ionic-4" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Uber</a> to <a href="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Fionic-4-spotify-pwa-and-app-starter" data-href="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Fionic-4-spotify-pwa-and-app-starter" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Fionic-4-spotify-pwa-and-app-starter" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Spotify</a>.</p><p name="d11e" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> Flutter is a new framework for community right now and not very popular. But, it’s intensely advertised by Google that shows they want to make it a major thing in mobile world. Whilst it still has some tingle points, using it is fun and you can go rapidly from idea to prototype to app.</p><p name="00d2" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on their industry recognition and reliability:</p><ol class="postList"><li name="07b8" class="graf graf--li graf-after--p" data-scroll="native" style="">React Native</li><li name="d644" class="graf graf--li graf-after--li" data-scroll="native" style="">Ionic</li><li name="8dc0" class="graf graf--li graf-after--li" data-scroll="native" style="">Flutter</li></ol><h3 name="1e6d" class="graf graf--h3 graf-after--li" data-scroll="native" style="">8. Accessing Native Device&nbsp;Features</h3><p name="15d8" class="graf graf--p graf-after--h3" data-scroll="native" style="">Your mobile apps most likely need access to some native device feature like the camera or GPS. How easy is it to get that access? And how easy is it for relatively new features (e.g. AR APIs provided by Android/ iOS)?</p><p name="48ba" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> Ionic uses Cordova or its own solution, Capacitor, to give you access to native device features. It provides a <a href="https://medium.com/r/?url=https%3A%2F%2Fionicframework.com%2Fdocs%2Fnative%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fionicframework.com%2Fdocs%2Fnative%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fionicframework.com%2Fdocs%2Fnative%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">very decent set of packages</a> to access common native device functionalities like the camera. You can also write your own wrappers around native functionalities and then include them in your code of course. Also, Ionic/Cordova and/or Angular plugins are very stable, and update readily with platform updates.</p><p name="6508" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> Over the last year, the Flutter team put a lot of effort into providing official packages for some of the most common native device features you need access to. There also is a very vibrant ecosystem and hence you find a package for pretty much any native feature you might want to access. You can also write and connect real native code if you need to.</p><p name="200d" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> Being the most popular solution, you find a rich set of third-party packages as well as some built-in APIs for accessing native platform functionalities. Relying on third-party packages (which you mostly have to do) of course has the disadvantage that the core maintainers of that package might quit, hence the support is not on the same level as it is with Ionic or NativeScript.</p><p name="affb" class="graf graf--p graf-after--p" data-scroll="native" style="">Here is how you can rank these frameworks based on the Accessing Native Device Features&nbsp;:</p><ol class="postList"><li name="383f" class="graf graf--li graf-after--p" data-scroll="native" style="">Flutter</li><li name="917e" class="graf graf--li graf-after--li" data-scroll="native" style="">React Native</li><li name="4869" class="graf graf--li graf-after--li" data-scroll="native" style="">Ionic</li></ol><h3 name="559a" class="graf graf--h3 graf-after--li" data-scroll="native" style="">9. Supported Platforms</h3><p name="a0ee" class="graf graf--p graf-after--h3" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> Android 4.1+&nbsp;, iOS 8+</p><p name="661a" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> Android 4.4+&nbsp;, iOS 8+&nbsp;, Windows 10</p><p name="b322" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter</strong>: Not sure</p><h3 name="9bca" class="graf graf--h3 graf-after--p" data-scroll="native" style="">10. Popular&nbsp;Apps</h3><p name="17e5" class="graf graf--p graf-after--h3" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> Facebook, Instagram, UberEats, Airbnb (they later removed RN from usage. Read More here&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fsoftwareengineeringdaily.com%2F2018%2F09%2F24%2Fshow-summary-react-native-at-airbnb%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fsoftwareengineeringdaily.com%2F2018%2F09%2F24%2Fshow-summary-react-native-at-airbnb%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fsoftwareengineeringdaily.com%2F2018%2F09%2F24%2Fshow-summary-react-native-at-airbnb%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Why Airbnb left React Native</a>)</p><p name="6672" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> JustWatch, Pacifica, Nationwide and many more.</p><p name="e145" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter:</strong> Hamilton</p><h3 name="d719" class="graf graf--h3 graf-after--p" data-scroll="native" style="">11. Pricing</h3><p name="deeb" class="graf graf--p graf-after--h3" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">React Native:</strong> Completely open-source frameworks. Engineers can utilize this system and their libraries for free.</p><p name="1ea6" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Flutter: </strong>Completely open-source frameworks. Engineers can utilize this system and their libraries for free.</p><p name="d739" class="graf graf--p graf-after--p" data-scroll="native" style=""><strong class="markup--strong markup--p-strong">Ionic:</strong> It is a free open source framework for developing cross-platform mobile applications. But, the organization offers its Pro Development Environment which is paid. The company guarantees that Ionic Pro accelerates the development process.</p><h3 name="3104" class="graf graf--h3 graf-after--p" data-scroll="native" style="">Final Words</h3><h4 name="284c" class="graf graf--h4 graf-after--h3" data-scroll="native" style="">Which Framework Is Best, When, And&nbsp;Why?</h4><figure tabindex="0" contenteditable="false" name="e950" class="graf graf--figure graf-after--h4" data-scroll="native" style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 254px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 36.3%;"></div><img class="graf-image" data-image-id="1*NtbHYbdIapeJ1kmQcBLH-Q.png" data-width="800" data-height="290" src="https://cdn-images-1.medium.com/max/800/1*NtbHYbdIapeJ1kmQcBLH-Q.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">A broad comparison tell us this&nbsp;much</figcaption></figure><p name="5cb7" class="graf graf--p graf-after--figure" data-scroll="native" style="">Ionic is popular for its easy learning curve due to web technologies while Flutter requires developers learning Dart to build apps. Also, Ionic is not a preferable choice for intense graphical apps or game development because of wrapper plugins that cause performance issues sometimes. Flutter is new and gradually growing with the support from best developers of Google and the community.</p><p name="91b9" class="graf graf--p graf-after--p is-selected" data-scroll="native" style="">But, let us say that all these frameworks are best at their own. While choosing a framework for your cross-platform app development, you need to analyze many factors like budget, time, application size, platforms, and so on.</p><p name="8e13" class="graf graf--p graf-after--p" data-scroll="native" style="">Let us know your views on different frameworks via comments below.</p><h3 name="42b4" class="graf graf--h3 graf-after--p" data-scroll="native" style="">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3" data-scroll="native" style="">Now that you have learnt the major differences between Ionic framework, react native and flutter for mobile app development.</p><ul class="postList"><li name="bf8d" class="graf graf--li graf-after--p" data-scroll="native" style="">How To in React Native&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fpick-images-from-camera-gallery-in-react-native-app%2F78" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fpick-images-from-camera-gallery-in-react-native-app%2F78" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fpick-images-from-camera-gallery-in-react-native-app%2F78" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Image picker</a>| <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fintergrate-firebase-in-react-native-app%2F73" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fintergrate-firebase-in-react-native-app%2F73" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fintergrate-firebase-in-react-native-app%2F73" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Integrate Firebase</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Freact-native-firebase-crud-image-upload-and-phone-authentication%2F86" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Freact-native-firebase-crud-image-upload-and-phone-authentication%2F86" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Freact-native-firebase-crud-image-upload-and-phone-authentication%2F86" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Push notifications</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fgeolocation-geocoding-react-native-apps%2F84" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fgeolocation-geocoding-react-native-apps%2F84" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fgeolocation-geocoding-react-native-apps%2F84" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Geolocation</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Freact-native-life-cycle-hooks%2F79" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Freact-native-life-cycle-hooks%2F79" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Freact-native-life-cycle-hooks%2F79" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Life cycle hooks</a></li><li name="fc97" class="graf graf--li graf-after--li" data-scroll="native" style="">How To in Ionic&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimage-picker-in-ionic-4-app%2F67%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimage-picker-in-ionic-4-app%2F67%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimage-picker-in-ionic-4-app%2F67%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Image picker</a>| <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-firebase-in-ionic-4-apps%2F23%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-firebase-in-ionic-4-apps%2F23%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-firebase-in-ionic-4-apps%2F23%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Integrate Firebase</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-ionic-4-firebase-push%2F34%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-ionic-4-firebase-push%2F34%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-ionic-4-firebase-push%2F34%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Push notifications</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fusing-geolocation-geocoding-and-reverse-geocoding-in-ionic-4%2F45%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fusing-geolocation-geocoding-and-reverse-geocoding-in-ionic-4%2F45%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fusing-geolocation-geocoding-and-reverse-geocoding-in-ionic-4%2F45%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Geolocation</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-video-player-in-ionic-4-app%2F64%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-video-player-in-ionic-4-app%2F64%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-video-player-in-ionic-4-app%2F64%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Video Player</a>| <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Frtl-right-to-left-use-in-ionic-4%2F50%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Frtl-right-to-left-use-in-ionic-4%2F50%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Frtl-right-to-left-use-in-ionic-4%2F50%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">RTL</a></li><li name="8db9" class="graf graf--li graf-after--li" data-scroll="native" style=""><a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fguide-on-react-native-full-app%2F53" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fguide-on-react-native-full-app%2F53" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fguide-on-react-native-full-app%2F53" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Create Awesome Apps in React Native</a> using Full App</li><li name="5a55" class="graf graf--li graf-after--li" data-scroll="native" style=""><a href="https://medium.com/r/?url=http%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-full-app-how-to-make-ionic-4-apps-from-the-super-template%2F14%2F" data-href="https://medium.com/r/?url=http%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-full-app-how-to-make-ionic-4-apps-from-the-super-template%2F14%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=http%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-full-app-how-to-make-ionic-4-apps-from-the-super-template%2F14%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Create Awesome Apps in</a> IONIC 4 using Full App</li></ul><p name="2930" class="graf graf--p graf-after--li" data-scroll="native" style="">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-4-full-app%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-4-full-app%2F" class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-4-full-app%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p is-defaultValue" data-scroll="native" style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)"><span class="defaultValue">Type caption for image (optional)</span><br></figcaption></figure><p name="ec91" class="graf graf--p graf-after--figure" data-scroll="native" style="">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Freact-native-full-app%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Freact-native-full-app%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Freact-native-full-app%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue" data-scroll="native" style=""><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><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)"><span class="defaultValue">Type caption for image (optional)</span><br></figcaption></figure><p name="9b48" class="graf graf--p graf-after--figure" data-scroll="native" style="">If you need a base to start your next Flutter app, you can make your next awesome app using <a href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fflutter-full-app%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fflutter-full-app%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fflutter-full-app%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Flutter Full App</a></p><figure tabindex="0" contenteditable="false" name="2761" class="graf graf--figure graf-after--p is-defaultValue" data-scroll="native" style=""><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*m1R2sLQploihax1Vu99GQA.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*m1R2sLQploihax1Vu99GQA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)"><span class="defaultValue">Type caption for image (optional)</span><br></figcaption></figure><p name="1c66" class="graf graf--p graf--empty graf-after--figure graf--trailing" data-scroll="native" style=""><br></p></div></div></section></div><div class="u-sm-hide u-absolute u-marginRight30 u-textColorNormal u-fontSize14 u-textAlignRight u-hide" style="top: 23px; right: 1024.5px; height: 120px;"><div class="u-absolute u-left14 u-top0 u-width1 u-height100pct u-overflowHidden"><div class="js-labelBar u-borderRightLighter u-transition--transform125 u-height100pct u-absolute u-topNegative100Percent" style="transform: translate3d(0px, 120px, 0px);"></div></div><div class="js-titleLabel u-paddingTop19 u-absolute u-top0 u-right0 u-transition--transform200Spring u-transition--fadeIn200Delay150" style="transform: translate3d(0px, 0px, 0px);">Title</div><div class="js-subtitleLabel u-paddingTop11 u-absolute u-top0 u-right0 u-transition--transform200Spring u-transition--fadeOut100">Subtitle</div><div class="js-kickerLabel u-paddingTop4 u-absolute u-top0 u-right0 u-transition--transform200Spring u-transition--fadeOut100">Kicker</div></div><div class="inlineTooltip buttonScalableGroup" style="top: 150px; left: 325px;"><button class="button button--small button--circle button--dark button--withChrome u-baseColor--buttonDark button--withIcon button--withSvgIcon button--inlineTooltipControl js-inlineTooltipControl" title="Add an image, video, embed, or new part" aria-label="Add an image, video, embed, or new part" data-action="inline-menu" tabindex="-1"><span class="svgIcon svgIcon--addMediaPlus svgIcon--25px"><svg class="svgIcon-use" width="25" height="25"><path d="M20 12h-7V5h-1v7H5v1h7v7h1v-7h7" fill-rule="evenodd"></path></svg></span></button><div class="inlineTooltip-menu"><button class="button button--small button--circle button--dark button--withChrome u-baseColor--buttonDark button--withIcon button--withSvgIcon button--scale u-transitionSeries" title="Add an image" aria-label="Add an image" data-action="inline-menu-image" tabindex="-1"><span class="svgIcon svgIcon--addMediaImage svgIcon--25px"><svg class="svgIcon-use" width="25" height="25"><g fill-rule="evenodd"><path d="M4.042 17.05V8.857c0-1.088.842-1.85 1.935-1.85H8.43C8.867 6.262 9.243 5 9.6 5.01L15.405 5c.303 0 .755 1.322 1.177 2 0 .077 2.493 0 2.493 0 1.094 0 1.967.763 1.967 1.85v8.194c-.002 1.09-.873 1.943-1.967 1.943H5.977c-1.093.007-1.935-.85-1.935-1.937zm2.173-9.046c-.626 0-1.173.547-1.173 1.173v7.686c0 .625.547 1.146 1.173 1.146h12.683c.625 0 1.144-.53 1.144-1.15V9.173c0-.626-.52-1.173-1.144-1.173h-3.025c-.24-.63-.73-1.92-.873-2 0 0-5.052.006-5 0-.212.106-.87 2-.87 2l-2.915.003z"></path><path d="M12.484 15.977a3.474 3.474 0 0 1-3.488-3.49A3.473 3.473 0 0 1 12.484 9a3.474 3.474 0 0 1 3.488 3.488c0 1.94-1.55 3.49-3.488 3.49zm0-6.08c-1.407 0-2.59 1.183-2.59 2.59 0 1.408 1.183 2.593 2.59 2.593 1.407 0 2.59-1.185 2.59-2.592 0-1.406-1.183-2.592-2.59-2.592z"></path></g></svg></span></button><button class="button button--small button--circle button--dark button--withChrome u-baseColor--buttonDark button--withIcon button--withSvgIcon button--scale u-transitionSeries" title="Add an image from Unsplash" aria-label="Add an image from Unsplash" data-action="inline-menu-unsplash-image" tabindex="-1"><span class="svgIcon svgIcon--search svgIcon--25px"><svg class="svgIcon-use" width="25" height="25"><path d="M20.067 18.933l-4.157-4.157a6 6 0 1 0-.884.884l4.157 4.157a.624.624 0 1 0 .884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"></path></svg></span></button><button class="button button--small button--circle button--dark button--withChrome u-baseColor--buttonDark button--withIcon button--withSvgIcon button--scale u-transitionSeries" title="Add a video" aria-label="Add a video" data-action="inline-menu-embed" data-action-value="Paste a YouTube, Vine, Vimeo, or other video link, and press Enter" tabindex="-1"><span class="svgIcon svgIcon--addMediaVideo svgIcon--25px"><svg class="svgIcon-use" width="25" height="25"><path d="M18.8 11.536L9.23 5.204C8.662 4.78 8 5.237 8 5.944v13.16c0 .708.662 1.165 1.23.74l9.57-6.33c.514-.394.606-1.516 0-1.978zm-.993 1.45l-8.294 5.267c-.297.213-.513.098-.513-.264V7.05c0-.36.218-.477.513-.264l8.294 5.267c.257.21.257.736 0 .933z" fill-rule="evenodd"></path></svg></span></button><button class="button button--small button--circle button--dark button--withChrome u-baseColor--buttonDark button--withIcon button--withSvgIcon button--scale u-transitionSeries" title="Add an embed" aria-label="Add an embed" data-action="inline-menu-embed" data-action-value="Paste a link to embed content from another site (e.g. Twitter) and press Enter" tabindex="-1"><span class="svgIcon svgIcon--addMediaEmbed svgIcon--25px"><svg class="svgIcon-use" width="25" height="25"><g fill-rule="evenodd"><path d="M9.826 7.698l-4.828 4.828 4.828 4.828.652-.7-4.08-4.128L10.53 8.4"></path><path d="M14.514 8.4l4.177 4.126-4.17 4.127.7.7 4.83-4.827-4.83-4.828"></path></g></svg></span></button><button class="button button--small button--circle button--dark button--withChrome u-baseColor--buttonDark button--withIcon button--withSvgIcon button--scale u-transitionSeries" title="Add a new part" aria-label="Add a new part" data-action="inline-menu-hr" tabindex="-1"><span class="svgIcon svgIcon--addMediaPart svgIcon--25px"><svg class="svgIcon-use" width="25" height="25"><g fill-rule="evenodd"><path d="M8.45 12H5.3c-.247 0-.45.224-.45.5 0 .274.203.5.45.5h5.4c.247 0 .45-.226.45-.5 0-.276-.203-.5-.45-.5H8.45z"></path><path d="M17.45 12H14.3c-.247 0-.45.224-.45.5 0 .274.203.5.45.5h5.4c.248 0 .45-.226.45-.5 0-.276-.202-.5-.45-.5h-2.25z"></path></g></svg></span></button></div></div><footer class="u-paddingTop10"></footer></article></main>