Flutter vs React Native: Stop Comparing & Competing Today

Part 1: Common facts about cross-platform development, Flutter vs React Native

What and Why Cross-Platform Development?

For completeness I want to cover this question too. So…

What is Flutter

  1. It targets iOS, Android, Windows, macOS, and Linux (since 2021 it also targets small gadgets like home technics)
  2. It consists of 2 main parts: 2D graphics library Skia (btw, Google Chrome also uses Skia) and programming language Dart (an object-oriented language with strong static typing, very similar to Kotlin, the opposite of JS).
  3. It provides a unified design for all platforms.
  4. A single codebase.

What is React Native

React Native (RN) is a very popular freely distributed cross-platform development framework =) Deja vu? Yeah, I understand.

  1. It targets iOS and Android (but React.js, the basis of RN, targets the web too).
  2. Works on top of React.js (declarative library for building user interfaces).
  3. It provides native design for every platform.
  4. A single codebase.

What Else You Should Know about Them

Let’s examine two most popular websites for developers: GitHub and StackOverflow.

  • 21.7k forks
  • ?k used by
  • 1000 contributors
  • 369,000 repository results from 241,000 a year ago
  • 22k forks
  • 919k people used by
  • 2300 contributors
  • 291,000 repository results from 232,000 a year ago
  • StackOverflow stats (as at May 2022):
  • 4,800 monthly average tagged questions growth for the last two years
  • 2,800 monthly average tagged questions growth for the last two years

What popular apps and companies use Flutter

Let’s be honest, the technological choice of business giants can influence the technological choice of every developer. If world-leading tech companies prefer some technologies over others, it’s a sign for other companies to follow their example. Of course, other factors also influence the choice like the high-costs of the transition to the new technology, but if a world’s industry giant BEGINS to use some technology… Well, we can expect a rapid jump in its popularity.

  • eBay Motors
  • WeChat
  • Nubank
  • Hamilton
  • Xianya
  • My BMW
  • Toyota (embedded devices)

What popular apps and companies use React Native

Here we can observe a similar picture: the developers made the tool for personal use.

  • Pinterest
  • Tesla
  • Walmart
  • Salesforce
  • Bloomberg
  • Oculus
  • Coinbase (they even made a great retrospective on this topic)
  • Shopify
  • Tableau
  • Discord

Part 2: A Mix Of Experience And Opinions

So, why do developers like React Native? What do they find appealing in Flutter? And what frustrates them most during coding with these tools? Good questions, but there is one more perspective we should discuss: clear-cut conclusions. Hereafter I give opinions, not facts. So you are free to disagree with me because I describe the personal experience of developers which can differ from yours. However, there are two hard-to-argue facts. Let’s start with them.

Two hard-to-argue facts

Flutter is about unified design, React Native is about native design

If you target many platforms go Flutter

This fact is simple. If we refer to the official documentation, Flutter supports Android, iOS, Linux, macOS, Web (all browsers), and Windows. Flutter 2 stretched out the list of supported devices. RN can’t boast a diversity of platforms — so Flutters is the favorite. However, the relationship of Flutter and the web is quite complicated. To be honest, not every developer refers to this framework for the web.

Why you fall in love with Flutter

Because you go cross-platform seamlessly

Flutter is a fascinating framework for those who don’t like to mess around with Android SDK and Xcode since it presents a perfect abstraction to create cross-platform applications seamlessly. There is even a little survey on this topic on Reddit.

You are in full control of app layouts

Hotttt reload

Flutter’s stateful hot reload is an utterly convenient staff when it comes to code changes. Hot reload updates the code without stopping its execution and losing the state. You feel the development is more dynamic, fast, and pleasant.

Your app is fast as well

Flutter uses Skia which renders down to machine code, hence apps run at 60FPS. It was designed to support jank-free graphics at the native speed of the device.

Documentation

It’s not a joke. If you had bad experience dealing with official documentation, Flutter docs will turn this upside-down. It’s almost the most comprehensive documentation I have ever seen. I extend my praise to all developers and copywriters — they did a good job building it.

The same app UI everywhere

The independence from native components -> the same view on all devices for most cases.

The whole development experience

Some enjoy its first-class command-line interface. Others enjoy a smooth upgrade experience through the command line. Some like its high-quality libraries. You may find Dart with the pack of additional utilities like a compiler or linter to be very convenient. Every developer finds pleasant moments with Flutter.

Why you fall in love with React Native

Have you heard about the React Native bridge? Forget about it

Some developers pointed out that RN is not a good choice because of the Bridge that transfers the data in JSON only. It was true.

React Native is React which, in turn, JavaScript

JS goes first, then React.js comes, and RN follows. Chances you use JS or React.js in websites, apps, or servers are high. So it’s easy to share code from your previous projects. Moreover, with RN you can continue enjoying TypeScript if you did.

Fast refresh (just like hot reload)

Work just like hot reload — almost instant refresh of the layout when code modifications happen. Still, Flutter’s hot reload outperforms RN’s fast refresh a little.

Have you heard about Expo? No? You will

Expo is built on top of RN. It is an awesome bundle to share the code with your team without compiling and to write in vanilla RN with no need to settle the environment.

Over-the-air updates

The opportunity to do dynamic updates submitting them to platform stores always sounds appealing. OTA updates are a breath of fresh air for complex applications with big development teams and it’s something Flutter doesn’t have on the roadmap at all for now.

Stable with fewer surprises

The history of this library comprises almost 10 years. There is a huge volume of work accomplished to stabilize the API, fix major issues, and debug this tool.

Vast community

Almost every developer confirms this fact. Just visit the official page with channels: conferences, Twitter, blog, discord, a bunch of forums like the React Native Spectrum community, the Facebook Group, and communities like Infinite Red’s Slack Group and The Expo Slack Group. And I mentioned only officially recognized channels.

Easy-to-learn technology

You have probably worked with JavaScript and since it’s the basis for RN you can learn this framework in 1 day. Literally, it’s possible. Just look at this case “how I learn React Native one day”. This applies to all developers (not only genius ones).

Do you need a component? RN community has a library for it

During the long library existence (and JavaScript existence, since RN allows reuse of its components), the community made a library for almost every case you can imagine. The third-party ecosystem in React Native flourishes and grows. And Package Manager (npm) for code sharing only facilitates this.

Why Flutter will annoy you

Dart? What is Dart?!?

Dart is:

  • Sometimes too much code.
  • No normal (classic) encapsulation and polymorphism.
  • Mixins for class code reusing
  • Declarative UI (hello, React!)
  • Challenging to understand, particularly if you came from C# world

You will face a lot of issues that you will need to solve mostly by yourself

During the development, especially at first, you will bump into the wall of how-and-why questions. It’s gonna hurt, but don’t worry — you are not alone. The number of questions on StackOverflow tagged “Flutter” counts 124 thousand for incomplete 4 years. For the record, React got 125 thousand questions for 7 years.

Flutter offers web, but it’s not a bright idea

Though the framework targetes a web platform, it’s an impossible task to provide a quality experience across all platforms. The web here features very poor performance, especially when your app comes with dynamic content and pages. You will burst into tears working with scrolling, zooming, and animation. Flutter demonstrates not a practical and competitive approach to web development — and I’m not alone in feeling that way.

Why React Native will annoy you

Setting up the environment will be the most unpleasant part of the development

Sometimes, getting a good setup and workflow feels like it takes forever. Whether you make it smooth or you feel the temptation to crash the computer depends on 3 core factors: your luck, experience, and intuition. Simple things like npm package installs can be tricky even in the beginning: you need to close metro, cd to iOS, and pod install or modules won’t be found. Options that can simplify the process are create-react-native-app and Expo I have mentioned before.

Tons of abandoned libraries

Part 3: Boring Numbers And Facts 🧐

Popularity

According to Stack Overflow Developer Survey 2021, React Native got 14,51% among all respondents in the category of most popular other frameworks and libraries. Flutter follows the next line with 13,55%.

Conclusion:

We see a clear trend in the growth of Flutter’s popularity, but the React Native community is still more mature with a bigger number of professional developers in it. There is no evident winner in this Flutter vs React Native battle. (yeah, you have seen this abstract already. Now you know the grounds for my conclusion)

Flutter is faster because it doesn’t use the bridge (not anymore)

As I have mentioned, React Native once used a JavaScript bridge to communicate with native APIs which resulted in not optimal performance and fast battery drain. Developers were forced to use some moves to optimize the app performance. Flutter came out victorious in this battle since it used blazing-fast Dart-to-Native binary communication.

Developers hourly rates

Just for the record. The salaries are taken from Glassdoor.

  • React Native — $106,160 per year with an average salary of $94,755 per year.

Conclusion:

React Native developers earn a little more than Flutter.

Final Words from SumatoSoft

Whatever complex project people have in mind it’s always a good choice to discuss the project with experienced developers. And this is about the SumatoSoft software development company that went through thick and thin and built dozens of applications for various industries. The company works with complicated domains like robotics, logistics, and real estate. One of the SumatoSoft focuses is business digitalization which increases business efficiency and effectiveness, even for ones who work with innovative technologies such as blockchain or the Internet of Things.

Flutter vs React Native: So What to Choose

I can list only several scenarios when the answer to this question is almost unequivocal.

  • If you expect a unified layouts across all platforms and operating systems use Flutter
  • If you target web and mobile it’s preferable to use React and React Native
  • If you target multiple platforms including small gadgets, TVs, embedded software, etc., use Flutter

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store