Ionic vs React Native: Pros and cons
Tags: ionic, reactnative, javascript
Published: 2020-06-25 11:34:34

---
title: Ionic vs React Native: Pros and cons
published: true
description: Building a mobile app with a cross-platform tool has its pros and cons. Here's a comparison of how Ionic and React Native perform and which one to choose for your project.
tags: ionic, reactnative, javascript
cover_image: https://images.unsplash.com/photo-1524226108234-3cccbbbfa86d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ
---

If you're thinking about <a href="https://www.imaginarycloud.com/services/app-development" target="_blank" rel="noopener">building a mobile app</a>, this article is for you. I mean, almost everyone has a smartphone these days. Can you name a better way to engage with your users and make their lives easier? 

According to <a href="https://www.gartner.com/en/documents/3751863/market-guide-for-mobile-application-testing-services" target="_blank" rel="noopener">a study</a> conducted by Gartner, 70% of all enterprise software interactions are expected to occur on mobile devices by 2022.

However, **the mobile ecosystem is complex**. In order to have an app published on Play Store or App Store, you may need to have two different development teams: one for Android and another for iOS, which can lead to a cost increase. 

To address this struggle, **cross-platform tools** started to pop up. In this article, we're going to compare **Ionic** and **React Native**, which are the most relevant libraries. But first, let me introduce you to the cross-platform world.

## **Native Apps vs Cross-platform mobile apps**

Today, there are plenty of ways of having a **mobile application** as a final product. The most popular solution is building it as **native**, by using the native language of each platform. The alternative is to choose a **cross-platform tool** that I will mention later on.

**Using native code leads to superior performance**, but has the downside of having two teams to handling the product: one for the Android ecosystem and another for iOS.

> Cross-platform libraries rely on standard web tools like HTML, CSS, and **JavaScript**, providing native experiences by accessing the native features. 

The hybrid path has the advantage of **increasing the speed of mobile development**, by having just one project for both platforms and offering **UX consistency** across channels. After this short introduction, let's go further in detail about the two most used tools to **build cross-platform mobile applications**: **Ionic and React Native**.

## **Ionic vs React Native: Which one is more popular?**

Both have a wide community around them, with a strong adoption by big companies and mobile applications used by a very large number of customers. This is what we can perceive from <a href="https://www.npmtrends.com" target="_blank" rel="noopener">**npmtrends**</a> data: 

<img src="https://www.imaginarycloud.com/blog/content/images/2020/05/ionic_vs_react-native_data.png" alt="Ionic vc React Native npm download" />

As seen in the graphic above, **Ionic** had way more downloads than **React Native** in 2017. This occurred because **Ionic** is older than **React Native**. At that time, it was more mature, ready to be used in mobile development, with less bugs and more stable. After 2019, Facebook put more effort into making **React Native** a stable library, by updating it frequently, using it in their own products, and presenting showcases about the results.

**Ionic** also <a href="https://ionicframework.com/customers" target="_blank" rel="noopener">has plenty</a> of apps that were released to both Play Store (Android) and App Store (iOS). The Untappd App is one of the examples.

<img src="https://www.imaginarycloud.com/blog/content/images/2020/05/app-untappd.png" alt="Untappd app, built with Ionic"/>

While with **React Native**, we can check the <a href="https://www.youtube.com/watch?v=g3jwd0kAIDU" target="_blank" rel="noopener">Marketplace</a> feature, that is part of Facebook app.

<img src="https://www.imaginarycloud.com/blog/content/images/2020/05/react-facebook-marketplace.jpg" alt="Facebook Marketplace with React Native"/>

## **What is better: Ionic or React Native?**

Both of them have different characteristics and different ecosystems. Let’s talk about each of them individually to better understand how **Ionic** and **React Native** work and its pros and cons.

## Ionic - A Hybrid Framework


### **Ionic: what is it?**


**Ionic Framework** is an open-source UI toolkit for building mobile and **Progressive Web Apps (PWAs)** apps using web technologies like HTML, CSS, and **JavaScript**. It provides mobile-optimized web technology-based components as well as native APIs using <a href="https://capacitor.ionicframework.com/" target="_blank" rel="noopener">**Capacitor**</a> and <a href="https://ionicframework.com/docs/native/community" target="_blank" rel="noopener">**Ionic Native**</a>. It was created in 2013, by the Drifty Co. The original version was released in 2013, built on top of Angularjs and <a href="https://cordova.apache.org/y" target="_blank" rel="noopener">**Apache Cordova**</a>.
<a href="https://ionicframework.com/blog/announcing-ionic-react/" target="_blank" rel="noopener">In 2019 they launched</a> a version with support for multiple front-ends, including React.js. 

> Today you can **build an Hybrid mobile application** in Ionic with Angular, React.js, Vuejs, or even with just plain JavaScript.

Now let’s take a look at its advantages:


#### Pros:


- Has a good documentation, since it's a company specialized in building tools that help companies and developers to make mobile applications.

- These tools are well understood by web developers since it uses webview to render the application (letting the developers use day-to-day technologies like HTML, CSS, and **JavaScript**).

- Makes it easy to port the code into a **Progressive Web App (PWA)**, since all the code is built to run in a web browser. **Ionic** just requires a <a href="https://ionicframework.com/blog/announcing-ionic-react/" target="_blank" rel="noopener">few extra</a> steps to be able to have one **PWA**.

Although it has benefits, we can also encounter some challenges in the way, like the ones listed below:


#### Cons: 


- Since the organization behind the framework makes a living from it, besides the *fremium* features, there are also premium ones that you can only use if you pay an extra cost.

- **Ionic** is built on top of the “web browser”. The application code can't easily access the native functionalities.


## React Native - Learn once, write anywhere.


### **React Native: what is it?**


With **React Native**, developers can build mobile applications for Android and iOS platforms using **JavaScript**, but they can also implement features with native code. It enables cross-platform builds by providing platform-agnostic native components that map into the platforms’ native UI building blocks. It was created in 2015 by Facebook and it is used in many of its products, as for example, the <a href="https://www.youtube.com/watch?v=NCAY0HIfrwc&feature=emb_title" target="_blank" rel="noopener">marketplace</a> section of Facebook's application.

> Developers can also build <a href="https://reactnative.dev/docs/building-for-tv" target="_blank" rel="noopener">TV applications</a> with  **React Native**. This means that with a few extra steps, it is possible to deliver applications for the **Apple TV** and **Android TV**.

Now, lets dive into some benefits of **React Native**:


#### Pros

- Massive community around the **ecosystem**. Right now, there are impressive numbers on **GitHub** repo <a href="https://github.com/facebook/react-native" target="_blank" rel="noopener">facebook/react-native</a>. This means that it's very likely for developers to find answers to issues or problems they're facing. 
 
- Ability of being integrated into existing <a href="https://reactnative.dev/docs/integration-with-existing-apps" target="_blank" rel="noopener">native apps</a>, like showed in this <a href="https://www.youtube.com/watch?v=NCAY0HIfrwc" target="_blank" rel="noopener"> presentation</a>. Besides that, it's also possible to build <a href="https://reactnative.dev/docs/native-modules-setup" target="_blank" rel="noopener">native modules</a>, making your mobile application's look and feel as smooth as a native application.

- **React Native** is translated to **native code**, with the benefit of achieving <a href="https://reactnative.dev/docs/performance" target="_blank" rel="noopener">60 frames per second</a>. This gives the user the impression of a native app - not slow at all!

- It allows developers to deliver applications for Apple TV and Android TV, with only a few extra steps.

Now let's take a look at the issues we've encountered as below:


#### Cons:

- Since there's a big private company behind it, new tools are released according to their own needs. However, the community is free to extend the desired features, to achieve what is necessary for both Android and iOS native technologies.

- **React Native** is still beta. Yes, you read it right. Although it was created five years ago, the Facebook team still didn’t have the confidence to bump a "production" release of it. It may sound like: "be aware of the possible risks". 

This often leads to breaking changes in tools and dependencies between versions. But hey, Gmail was almost 5 years in beta and it worked pretty well.


## **What is the difference between React Native and Ionic?**

Both allow developers to build mobile applications that can run on different platforms and use JavaScript as the principal language. However, **Ionic's** approach is more "web-like". This means that the application runs on a web browser wrapped in an SDK, to access the native functionalities. 

**React Native** uses three bridges, **UI Thread**, **Layout Thread**, and **Javascript Virtual Machine**, to trade information by sending messages to each one.

It uses the JavaScript language to map the native capabilities. This allows developers to build **mobile applications** that are then translated into **native code**. On the other hand, the **Ionic Framework** uses web technologies (HTML, CSS, and JavaScript) to build the applications. It is possible to use **Ionic Native** and/or **Capacitator**  to connect JavaScript and **native abilities** like accessing the user location, Bluetooth, camera, etc.


**Ionic** and **React Native** also have a different technology stack. With **Ionic**, developers are building one application on top of the browser, and have the ability to use all the **npm packages** available to **React.js**.

**React Native** has a more restricted stack since the code is translated to native code. Despite this, the **React Native** community is very large, with lots of ready to use libraries that help the **mobile application** development.


## **When to use Ionic or React Native?**


Since **Ionic** works with web technologies (HTML, CSS, and JavaScript) it fits well in a team that has no background in the native world. 

With **Ionic**, you will have the capability to make great mobile applications, accessing native features like GPS, maps, or audio. These features are ready to be deployed into both Play Store and App Store, with the same effort and expertise that will require to build a web site.

**React Native** is easily addressed by developers with prior iOS or Android development knowledge. The learning curve for a **React** developer to understand and debug a **React Native** application is higher than with **Ionic**. However, **React Native** stands with the golden triumph of accessing the native functionalities of the mobile devices, allowing your **mobile application** to deliver a more native look and feel.


### **Found this article useful? You might like these ones too!**

* <a href="https://www.imaginarycloud.com/blog/how-to-configure-eslint-prettier-in-react/" target="_blank" rel="noopener">How To Configure Eslint And Prettier In React</a>
* <a href="https://www.imaginarycloud.com/blog/angular-vs-react/" target="_blank" rel="noopener">Angular Vs React: A Comparison Of Both Frameworks</a>
* <a href="https://www.imaginarycloud.com/blog/5-common-errors-found-in-a-react-native-app-using-expo/" target="_blank" rel="noopener">5 Common Errors Found in a React Native APP (Using EXPO)</a>