Flutter vs React Native: Stop Comparing & Competing Today

Flutter vs React Native – you have probably already faced this dilemma since you are reading this article. You are not alone in that journey – I faced it myself working in one software development company. And according to two stack overflow surveys (one is from 2020 and another is from 2021), the share of people who work with React Native and Flutter has increased from 18,7% to 28,8%. It’s serious growth. 

I conducted research on these frameworks and their communities to find out why developers enjoy React Native and Flutter with mobile development and why you will feel mental pain working with them. 

But before i want to share one interesting conclusion: 

I 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.

Now, go back to the article. It is divided into three parts: 

Part 1: Common Facts About Cross-Platform Development, Flutter vs React Native

Part 2: A Mix of Experience and Opinions

Part 3: Boring Numbers And Facts

The article has a bonus at the end, so keep reading till the end. 

Enjoy reading! 

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…

Cross-platform development means that developers write code that will run on different operating systems (iOS, Android, Web, macOS). 

The more exciting question is “why?”: 

Why #1: Because it is cheaper than native development by 30% (no research to prove this number, unfortunately. It’s our experience and an average of other developers said me. If you have any research, email me).

Why #2: Because the development takes up to 50% less time since you don’t need to develop for all target platforms.

Why #3: Because it’s a good choice if you build prototypes to test several hypotheses. 

Why #4: Because it’s an ideal design option for startups with a limited budget.

Why #5: Because developers don’t have to maintain native codebases for every operating system.

Why #6: Because the necessary team size is reduced by 40%. 

Why #7: Because you spend less time on process management since the software development is more linear and consistent. 

Why #8: Because mostly you have no complex interactions with native APIs.

What is Flutter

Flutter is a very popular, freely distributed cross-platform development framework. 

Main features: 

1. Born in 2018 by Google
2. It targets iOS, Android, Windows, macOS, and Linux (since 2021 it also targets small gadgets like home technics)
3. 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). 
4. It provides a unified design for all platforms. 
5. 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. 

Main features: 

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

Additional thoughts: 

I want to highlight that Flutter is backed by Google, and RN by Meta which is a big deal in the industry because the company that is backing a framework plays a significant role. For example, there is a great cross-platform mobile-first toolkit CodenameOne written in Java and Kotlin. You have probably not heard anything about it at all. However, this tool is worth your attention. I advise you to look through it. 

What Else You Should Know about Them

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

Github stats (as at May 2022):

StackOverflow stats (as at May 2022):

A year ago I would say their ecosystems were quite similar. However, we see it very clearly today that Flutter’s community is extremely vivid and outperforms React Native in terms of growth. RN, in terms, demonstrates superiority in the number of contributors, and I believe that will stay put. There is no evident winner in this category. 

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. Nowadays, many businesses choose between flutter vs native for mobile app development. 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. 

• All Google products (Google Ads, Pay, etc.) 
• 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. 

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

Airbnb (not anymore. They dumped React Native and switched to native development). 

The full list is here. 

I think the common parts here should be enough. Now, let’s go to the most intriguing part: how developers see those frameworks. 

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

Flutter brings an almost-identical app layout for all platforms since the design isn’t constrained by the platform’s primitives (look at some inspirational design examples). Still, there are some options on how to bring a native look. However, the initial Flutter idea is a convenient unified view across all platforms which works magnificently. If you target native it’s much easier to refer to React Native which is expected to build such apps. 

The RN components written in JavaScript use platform APIs to render native user interfaces. As the output you get interfaces for iOS from UIKit and interfaces for Android from Android’s layout system. It’s cool since the app layout will stay perfectly aligned with platform styles which improves behavioral factors. 

The second fact is also about core differences between those frameworks. 

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 2 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 

Since the framework isn’t tied to the platform’s primitives, you can let your perfectionism go wild and customize every pixel, overlay, animation, and text until the display becomes exactly what you want. You have more control and guarantees over app appearance and can bring “pixel-perfect” 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. 

After a while, RN introduced JavaScript Interface that provides API to JS Runtime engine and exposes native functions and objects to JS directly – no bridge at all, that solved the issue. 

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: 

• Very close to Java/Kotlin2 (knowing Java makes learning Dart pretty straightforward). 
• 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

Take it seriously. You can easily find a React Native package for your use case. But it’s challenging to find a high-quality package that is not abandoned and doesn’t break down even in simple use cases.

As you can see, there isn’t much bad stuff about both frameworks. But I guess it must be that way since the battle Flutter vs React Native wouldn’t be the battle between two major players otherwise. Now let’s go to the final part where we focus only on numbers and facts, no opinions.

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%. 

However, among professional developers in the same category React Native remains the loved one with 16,48% of respondents who use it, while Flutter demonstrates the same 13,35%.

According to the Statista survey, in 2021 Flutter became the most popular cross-platform mobile framework used by global developers. 42% of respondents said they use Flutter in the development, while the same rate for React Native counted 39%. 

Finally, google trends demonstrate that the interest in Flutter from 2020 consistently exceeds the interest in React Native.

Source: Google Trends

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. 

The React Native team knew it and, back in 2019, they addressed this issue by redesigning its core modules. They introduced a new component called JSI (JavaScript Interface) that replaced the bridge module. Later they also gave developers Hermes, an open-source JS engine optimized for RN. It significantly reduces battery consumption and resource usage, making the applications fast and competitive Flutter. 

Conclusion: 

The battle Flutter vs React Native continues: There is no significant difference in performance. 

Developers hourly rates

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

• Flutter – $93,552 per year with an average salary of $79,891 per year.
• 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. 

If you found the article helpful and you have a project idea, we can give you more – contact us and get a free consultation on your project. 

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 build native mobile design use React Native
• 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

In all other cases, you can seek advice from professionals like the SumatoSoft company🙂

Ultimately, the decision isn’t about the perfect framework since both Flutter and React Native are two great options. They both are fierce rivals that set standards for cross-platform development. 

It’s about your convenience as a developer. So if you have no obvious reasons to stop with one of them, look through the gains and pains list in the Part 2 section once again and make a meaningful decision. 

Thanks for reading!