Flutter vs. React Native — What to Choose in 2020? | Gaurav Singh

Do you want to develop apps more quickly? And to reduce costs with cross-platform development — but you’re not sure which technology to choose?

Flutter vs React Native

Why we created this article?

Cross-platform solutions are gaining popularity. Flutter and React Native are the two leading market players, but at Droids On Roids, we’ll build commercial apps for partners using the approach that best fits the solution — be it native, Flutter, or React Native.

Still, business owners always want to know the answer to several critical questions:

  • Which framework best fits my project?
  • Which solution can provide the fastest time-to-market for my app?
  • Will my app be stable and user-friendly?
  • Which solution is best if the perfect design is my #1 priority?

Introduction to Flutter and React Native

First, let’s cover the basic (yet essential) details about Flutter and React Native.

What is Flutter?

Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development Kit (SDK), complete with widgets and tools.

What’s Flutter for?

Flutter enables cross-platform app development.

It gives developers an easy way to build and deploy visually attractive, natively-compiled applications for mobile (iOS, Android), web, and desktop — all using a single codebase (source: official Flutter website).

A little more about Flutter…

  • It’s free and open source
  • It’s based on Dart — a fast, object-oriented programming language (Google released Dart 2.3 with new support for UI-as-code features — note that Dart is now in its 2.6 version). Dart is relatively new, and is easy to learn — especially for experienced developers more familiar with Java and C#
  • The architecture is based on the very popular reactive programming (it follows the same style as React)
  • It provides its own widgets, drawn from its own high-performance rendering engine — these are fast, attractive and customizable
  • Thanks to the widget experience, Flutter apps have a great look and feel (while you can still create your own custom app design using readily-available UI elements that follow specific platform guidelines)

Who created Flutter?

A team at Google built Flutter.

But as an open-source project, both Google and the Flutter community contribute to its development.

How mature is Flutter?

A brief history of Flutter:

  • February 2018, Mobile World Congress — First beta release of Flutter
  • April 2018, Google I/O — Flutter beta 2 release
  • May 2018, Google I/O — Flutter beta 3 release
  • Flutter joins GitHub’s top 100 repos.
  • June 2018 — Flutter Preview 1 release
  • September 2018 — Flutter Preview 2 release
  • November 2018 — Dart 2.1 release
  • December 2018, Google I/O — Flutter 1.0 release
  • A crucial milestone for the technology — since Dec. 2018, Flutter has been considered as stable and ready for production
  • February 2019, Mobile World Congress — Flutter 1.2 release
  • May 2019, Mobile World Congress:
  • Flutter 1.5 release
  • Flutter for Web preview version
  • Dart 2.3 release
  • July 2019, Flutter 1.7 release
  • September 2019, Flutter 1.9 release

As you can see, Google shifted from the Flutter beta version to the final stages of stabilization for Flutter 1.0 at a rapid pace.

In summary, Flutter remains a top technology.

Yet, given the pace of Flutter’s improvements — and its explosive popularity — we can say with confidence that it’s impressively stable and mature for its age.

And judging by the rate of development, we expect to see Flutter for Web become stable within 12-months, as well.

What popular apps are made with Flutter?

What is React Native?

React Native is an open-source mobile application framework that uses JavaScript.

What is React Native for?

React Native is an effective framework for:

  • Cross-platform development
  • Building mobile apps using JavaScript language
  • Developing applications for both Android and iOS using a single codebase
  • Using the same design as React

* Please note:

  • Apps created using React Native are not mobile web apps. React Native uses the same fundamental UI building blocks as regular iOS and Android apps: this means that instead of building in Java, Kotlin, or Swift — you’re putting the same building blocks together, using JavaScript and React (source).
  • React Native uses components that are analogous to widgets in Flutter.

To develop web and desktop applications with React Native, it’s best to use external libraries (as detailed in this paragraph).

Who created React Native?

Facebook created React Native.

How mature is React Native?

A brief history of React Native:

  • Summer 2013, Facebook hackathon — React Native started as an internal Facebook project
  • January 2015, React.js Conference — React Native 1 Preview release
  • March 2015, F8 Conference — Official Launch of React Native
  • Facebook declares React Native, ‘open for use and available on Github’.

Looking at the above, two things are for certain: React Native is older than Flutter, and it boasts a bigger community. Not to mention the fact that the Facebook team has had plenty of time to stabilize the API as well as focus on fixing any underlying issues.

And let’s not forget — Facebook is working on several other notable enhancements as well:

  • Lean Core — reducing an app’s size by moving optional components/features to separate repositories (to add to an app as/when needed)
  • TurboModules — for improved handling of native modules
  • React Native Fabric — re-architected UI layer

Conclusion and Prediction

More and more companies are attracted by Flutter. After all, we’re witnessing monthly improvements in the Flutter SDK as Google continues to refine its tool. Plus, the community is always helpful and enthusiastic. What’s more, we can expect that soon Flutter will enable us to create not only mobile applications but also apps for web and desktop.

Putting it all together — and given leading companies like Alibaba are already using Flutter — the future looks promising for the toolkit.

As for React Native — well, Facebook is currently focusing on a large-scale re-architecture of the technology.

The team is doing its level best to improve support for both React Native users and the wider community. And thanks to this, the community can now easily suggest changes to the framework’s core functionalities through an RFC process that uses a dedicated GitHub repo.

The actual results of such architecture improvements are:

  • Hermes — an open-source JavaScript engine optimized for mobile apps that improves time to interaction, and lowers app size and memory utilization
  • Big changes in the 0.60 version (find the full summary here):
  • it’s easier to manage iOS dependency by using the most popular dependency manager CocoaPods by default,
  • you can migrate React Native to AndroidX,
  • you can extract optional features as part of the lean core process.

Thanks and Cheers!!

Software Engineer Intern at Possibillion Technologies || Google DSC Web Dev Lead || M.E.R.N || IIIT Kalyani CSE ‘23