Flutter, React Native, Ionic and Native platform: A visual guide
Tags: reactnative, flutter, ionic, mobiledevelopment
Published: 2019-08-04 21:26:40

---
title: Flutter, React Native, Ionic and Native platform: A visual guide 
published: true
description: An easy way to understand how they work under the hoods
tags: #reactnative #flutter #ionic #mobiledevelopment
---

Cross-platform development has another big player: Flutter, the Google toolkit that allows us to create apps to iOS and Android (and soon to desktop and web). 

Build mobile apps is a challenge. Especially because we need to target two different platforms. Unlike the web, where HTML, CSS, and JS aims to work in every browser (no matter what the size of the device), iOS and Android platforms had his own environment (language, tooling, approaches, etc).

Some cross-platform tools, like React Native, Ionic, and Flutter came to help us to build once and deploy on both platforms.

In this post, I will show you a visual guide to illustrate the difference between all of them. Let's get started!

__Ionic__
![](https://thepracticaldev.s3.amazonaws.com/i/110o1esevw9mrgej6i0u.png)

It is like a dream, write code with HTML, CSS, and JS, and deploy to iOS and Android. The app is a website. To achieve that, tools like Ionic, Cordova, and PhoneGap uses a WebView to render the code. But there is a bottleneck: performance. If the app needs to access hardware services (GPS, sensors, etc) it needs to cross a famous bridge. But if your app does not need those services, this tech should be on your radar.

__Native Platform__
![](https://thepracticaldev.s3.amazonaws.com/i/j1zryrthzpghgc6u4sqq.png)

Your code (kotlin/swift) interact directly with the platform. If you need a button, the platform provides that button. Access to the camera? No worries too. Thit is the best option for mobile development! But you can't code once and deploy to both platforms. You need to write an app to iOS and other to Android, which makes this choice expensive.

__React Native__
![](https://thepracticaldev.s3.amazonaws.com/i/dk7dftz3wmxybw6q89hy.png)
The tool powered by Facebook is so far the most popular choice for cross-platform development. It has a huge community, widely used by a ton of companies, uses Javascript. React Native truly provides an excellent way to build high-quality mobile apps if you are a frontend developer. But is uses the bridge extensively, for hardware services and native components (buttons, text fields), which can bring some performance issues, especially with animations.  

__Flutter__
![](https://thepracticaldev.s3.amazonaws.com/i/ix1qc6kn9pe9jcmvoy3m.png)
The youngest option for cross-platform development (by Google), has a peculiar aspect: it uses Dart language (also by Google), which enables the code to be compiled (AOT) to arm/x86, wich is straightforward runs on the hardware (if you need need a button, Flutter paint it on screen, if you need to interact with hardware, Flutter provides a plugin ). It has 71k+ stars on the repository, gradually being adopted by big companies (Alibaba, Tencent, BMW). It has some weakness, like 7k+ issues and the fact that you have to learn Dart (but this doesn't make sense, if you know JS, Java, or any C-style language).


---

I hope you now know the differences between each option and have more clarity to choose one to learn and or use in your next project.