My goal is to give you a better understanding of these two solutions. What’s the point of this comparison? What is the problem that Flutter and React Native are both trying to answer?
Have you ever thought you would like to develop an app? The iOS and Android app stores are big money makers for some developers. And if you have a great idea, you might be wondering the best way to bring that idea to life?
You might decide to create a web application… but the performance on mobile isn’t great. You might want to go the native route. But that means coding twice, in two different languages, for Android and iOS.
There is a third solution. To me, it is the only valid one if you don’t have a big team or very specific needs.
This solution is to use software development kits. These SDKs offer a common abstraction layer that allows the same code to run on iOS or Android.
There are several such solutions. I’m a fan of Solar2D for creating 2D mobile games. But for general purpose applications, there are two main contenders. Using them, application development is not all that different from web development.
These two solutions are Flutter and React Native.
And what struck me, while researching this, is how this comparison parallels (in some ways!) the one between Angular and React. In other ways this opposition is radically different.
What do I mean by that?
React Native and Flutter, and Angular vs React
Shared features between React Native and Flutter, and Angular and React
Well, first of all, Flutter and React Native share some of the common points of Angular and React.
Angular, React JS, Flutter, and React Native are all imperative and reactive. What does this mean?
In each solution, functions take a state and use it to render a user interface or UI. (That is to say: they are reactive).
And when coding the render, we only care about the end result of the UI. The render function ignores or discards the initial state of the UI. (That is to say: they are imperative).
(jQuery is an example of non-imperative/declarative coding. jQuery is all about retrieving and modifying the current state of the UI.)
The objects with the render functions are components, the application’s building blocks. (In Flutter we call these widgets. And in Flutter everything is a widget).
Those are the shared features. We also have shared differences. With React (Native and JS) on one side and Flutter and Angular on the other.
Shared oppositions between React Native and Flutter, and Angular and React
React JS offers a focused scope, whereas Angular comes with a wide range of features.
React Native focuses on a simple core that follows the Unix philosophy of doing one thing and doing it well. Flutter offers a wide range of features.
So for example, Flutter and Angular handle translation or routing. React (JS and Native) require external libraries.
Another example: React Native offers twenty-five components in total. These cover blocks, text, images, lists, scrolling…
Flutter, however, offers 21 different components for animations alone. And 3 different widgets to handle accessibility aspects. And so on.
This rich library of specific components geared to mobile is not mirrored in Angular. Here, the comparison between React Native and Flutter takes on a life of its own.
What are specific oppositions between Flutter and React Native?
Specific differences between React Native and Flutter
First specific difference: Dart
The first particular difference is the programming language. Unlike Angular, React JS, and React Native, Flutter uses Dart. It is a programming language invented by Google. To my knowledge, it has no other major popular use case than Flutter.
So, what is Dart, what’s its goal?
And TypeScript’s second purpose is to add constraints. This catches mis-typed variables and reduces bugs.
What do I mean by that, what is Dart’s purpose?
Dart aims to compile code to mobile devices in the cleanest way possible.
In Dart, a "const” has to be intrinsically constant. It must have the same value on every program launch.
In React we can declare as the return of a "useState” hook as const, in JS we can assign the current timestamp to a const. In Dart this will fail :
const date = new DateTime.now()
What are the other differences between Flutter and React Native?
Second specific difference: Native widgets vs. specific widgets
A second difference is how each solution draws the interface on the screen. Flutter and React Native choose radically different strategies.
React Native outsources the rendered interface to native iOS or Android components. This solution ensures the final result is aligned with each OS’s specific philosophy. It also ensures that the rendering is as simple as possible.
Flutter uses a 2D rendering engine called Skia. This library is also used in Chrome and Firefox and Android. I’ll let you calculate how many users are running the library, let’s just go with "lots”. And that includes over seventy-five percent of readers here.
In short, this choice gives Flutter a level of flexibility — on screen — that is beyond React Native’s reach.
Third specific difference : Performance Issues
The third big difference is the consequence of the architectural choices mentioned above.
In Flutter, the Dart code and Skia library are compiled into an iOS or Android binary. In React Native things are a bit more complicated.
React Native produces fully native applications. (There is a clue in the name).
One final important difference
One final point needs to be addressed.
One point in React JS’s favor is its popularity compared to Angular.
This is in part due to the fact that React JS, in this context, is a newcomer that has learned from Angular’s mistakes.
But for Flutter, this situation is reversed. Stack Overflow’s 2021 developer survey had Flutter as the 2nd most desirable. React Native was ninth.
And Google Trends tells a simar story.
When we compare Flutter vs. React Native, we see a position reversal. React Native was overwhelmingly popular in 2018, but today Flutter is ahead.
<img src=“/” (https://cdn-images-1.medium.com/max/800/1*N56SxjBPsSDA0hzZTViBvw.png)
So what does all this mean for us today?
Some of the conclusions from the comparison between React and Angular apply, and some do not.
For example, like Angular, Flutter is more complex to learn. There are more things to learn, more services provided. And a lot of widgets. Flutter is also harder to learn because it relies on Dart.
React Native, on the other hand, reproduces the mechanisms of React JS. The mental habits are transposable. React Native is much easier to learn than Flutter, if you have any experience with React JS. This makes React Native the easy solution.
But if Flutter is more complex to learn, it is also more powerful and more versatile.
To me, Angular is sure and steady and React is exciting and disruptive, and Flutter reverses this.
React Native is the easy way out. It complies with each platform’s standards. Whereas Flutter is the exciting and disruptive solution, allowing new and exciting things.
So your choice is going to depend on who you are and what you want to do. If you want something without too much mental effort, and you don’t mind less freedom, React Native is the way to go.
But if you want to invest time and effort, and go the extra mile, I’d recommend Flutter instead.