Flutter vs. React Native: Choosing the Best Framework for Cross-Platform Development

*Thank you to Valerii Stukanov for helping with the article!

Most business owners understand what are the pros and cons of choosing cross-platform mobile development over native. But they make a mistake of thinking that these pros and cons are unambiguous, absolute. In fact, the advantages and disadvantages of choosing cross-platform over native depend on which technology, Flutter or React Native, you choose to develop cross-platform.

So, here comes the question: which technology should you use for cross-platform mobile development to maximize benefits and to minimize drawbacks? Which is better Flutter vs React Native?

---

In this article, I will compare the two most popular choices: Flutter vs React Native,  young and revolutionary versus good and old. My comparison will be based on the following criteria:

1. Brief overview
2. Architecture
3. Performance & speed
4. Ecosystem
5. User interface
6. Code reusability
7. Community
8. Learning curve
9. Apps that the technology is used for

Brief overview

React Native

React Native is an open-source cross-platform mobile app development framework introduced by Facebook in 2015. React Native is based on JavaScript, which is one of the most prevalent programming languages worldwide — this greatly contributes to the popularity of this framework.

React Native is among the most popular cross-platform development frameworks, and the updates are introduced quite often. The last update, 0.62.0, was released on March 26th, 2020.

Flutter

Flutter is an open source UI toolkit introduced by Google in 2017 for the cross-platform web, desktop, and mobile development. Flutter apps are written in Dart language, developed with VM, and AOT-compiled in the native code. Both Dart and Flutter are still quite new, but developers see a huge potential in them. 

Due to a strong support of Google and the developer community, Flutter updates are released on a regular basis, with the latest ones having been released on May 14th, 2020.

Architecture

React Native

In React Native, rendering is native and uses some frameworks, such as UIKit or AndroidUI. React Native apps can be profiled and debugged like native ones with the help of such integrated development environments as XCode or Android Studio. The layout is implemented with Facebook Yoga, which is better and more performant than iOS Auto Layout, CSS Flexbox API, or JSX. Native modules are written in Java or Objective-C and are sometimes outdated. Native Modules and Application Logic are united by a messaging channel called Native Bridge. Application logic is written with JavaScript or TypeScript and running in JavaScriptCore. Often, there is a performance bottleneck in communicating through the Native Bridge. You can learn more about React Native architecture at React Native Guide.

Flutter

Rendering in Flutter is performed with Skia, the same tool that Google Chrome uses. But it is optimized and accelerated by GPU, works everywhere, and can emulate the same result as the one of native renderers. Layout is implemented with nested layout widgets. Both native components and application logic are written in Dart, while some functionality is still in development or in review. You can learn more about Flutter architecture at Flutter.dev.

The architecture of Flutter seems to be simpler and more developer-friendly than the one of React Native. Since Flutter has most native components in itself and does not require a bridge for the components to communicate with the application logic, it deserves a point for architecture.

React Native vs Flutter: 0–1

Performance & Speed

React Native

JavaScript compiles those components that JIT compilation requires to their native equivalents. However, it does not allow JIT compilation for iOS because iOS apps do not have writable executable memory. Some people cite such a React Native performance issue as the necessity to run UI components in separate threads. However, this is relevant only for animations and touch feed back and can be avoided with reanimated library or gesture handler. Soon, there is also a long-awaited TurboModules feature coming, which will speed up initialization and invocation of Native Modules in JavaScript.

Flutter

The applications written in Flutter are compiled using DartVM — not only UI components but the entire app. Dart by itself is quite performant. Some people say that, in terms of performance and speed, Flutter wins the Flutter vs React Native battle. However, according to Thoughtbot, a Flutter app uses two times more CPU resources than a native app does, but a React Native app is even more demanding in terms of CPU usage. Meanwhile, in terms of memory usage, React Native requires less of it than Flutter does. 

The Thoughtbot research proves that neither Flutter nor React Native deserve a win in this speed and performance battle, and both Flutter and React Native lose badly to a native app. It will be fair if neither receives a point.

React Native vs Flutter: 0–1

Ecosystem

React Native

Due to its maturity and popularity, React Native is supported by most code editors. It also supports hot reload, which greatly improves one’s developer experience. As for the packages, React Native definitely has more than Flutter. Though quantity does not always mean quality, there are 698 libraries now available in React Native Directory. 

Flutter

Flutter is falling behind React Native in terms of ecosystem, primarily because its competitor had more time to grow its roots. Yet, thanks to a dedicated community, Flutter is catching up, and this difference should not become a problem for a developer. There are plenty of Flutter packages available at pub.dev. 

With no doubt, the point for ecosystem goes to React Native. It simply had more time than its competitor to develop a broader and more powerful ecosystem.

React Native vs Flutter: 1–1

User Interface

React Native

The great advantage of React Native is the ability to use native components, This way, you can rest assured that no UI update of Android or iOS will break you app since the components will be updated instantly as well. Unlike Flutter, React Native allows using only basic components. Yet, React Native UI components are more stable than those of Flutter. They are not necessarily ready-to-use: either you have to create them yourself, which is fine for large projects, or you use ready-made solutions developed by the community. For instance, there are React Native UI Toolkit elements and Material Design for React Native.

Flutter

Flutter apps look good on both Android and iOS of any version, the most recent or an older one. This is achieved by Material Design and Cupertino widgets. The former ones implement Android UI design language, while the latter ones implement iOS UI design language. Therefore, apps developed with Flutter look properly on both operating systems because they effectively imitate native components of the OS. 

Flutter has more native UI components to offer than React Native. Meanwhile, the components offered by React Native are more stable. It will be fair if both React Native and Flutter get a point here.

React Native vs Flutter: 2–2

Code reusability

React Native

You can easily share some business logic, but sharing ready-made components is difficult. To do that, the functional part and the UI part of a component have to be separated. Doing so makes a lot of sense for large projects as it may save a lot of development hours. There are some React Native libraries that allow you to build iOS, Android, web, and Windows10 apps with the same code.

Flutter

As of now, you can reuse code only for iOS and Android apps. However, the Flutter team has a long-term goal to develop an integrated solution allowing the development of web, desktop, and mobile solutions with the same code. For now, Flutter for web is available for preview, and Flutter for desktop is in the early stages of development.

React Native offers more opportunities in terms of code reusability. Without a doubt, Flutter will catch up shortly, but for now, the point goes to its competitor.

React Native vs Flutter: 3–2

Community

React Native

React Native is five-years-old, and the community behind it as vast and mature. As of June 2020, React Native Community on GitHub is represented by 50 people and 80 repositories. The core of React Native is developed by Facebook’s full-time React Native team. Meanwhile, there are numerous people who contribute to the framework and report or fix bugs. You can join the React Native community via Stack Overflow, Twitter, Facebook, React Native Blog, Reactiflux Discord, Medium, and DevTo. Conferences are also a way to go. You can learn more about React Native Meetups by following the link. 

Flutter

Fultter is three-years-old, and, although the Flutter community is smaller and younger than the React Native one, it is growing at a rapid pace. For now, Flutter Community on GitHub is represented by 11 people and 36 repositories. You can also access the Flutter community through Google Groups — one for announcements and one for questions. Stack Overflow, Gitter, Twitter, Reddit, Medium, Slack, Meetup, Discord, and Hashnode will also come in handy.

The bigger community is, the easier it is to find a developer to help you with learning the technology or building the app. The point goes to React Native.

React Native vs Flutter: 4–2

Learning curve

React Native

Learning React Native will be simpler for those who are already well-familiar with web development in JavaScript. But it will not be simple — mobile development is VERY different from web development. So, you will need to spend some time and effort to master React Native. Luckily, React Native has been in the market for five years already. In this five years, a lot of tutorials, libraries, and learning courses have been developed. 

The documentation of React Native is a weak point if compared to Flutter. At this point, it is written by the community, which inevitably affects the quality of it.

Flutter

Learning Flutter is yet much harder. To master Flutter, you have to master Dart first. Also, reactive programming with Flutter is not quite intuitive. There are fewer tutorials and tips online because the framework is still quite new.

The documentation in Flutter is a better one than in React Native as it is written by the Flutter team. It is well-detailed, thorough, and helpful. Reading and understanding it, however, will require some experience with Dart from you.

React Native is easier to learn, whereas Flutter wins in terms of documentation. It would be fair if both React Native and Flutter received a point here.

React Native vs Flutter: 5–3

Apps that the technology is used for

React Native

React Native was introduced and now is actively promoted by Facebook — no wonder that most its products use it, for example, Facebook Messenger, Facebook Ads, and Instagram. Another tech giant that is actively supporting React Native is Microsoft. So, Windows, Xbox, and Skype — all these use React Native.

Also, this technology is actively used by Tesla and Shopify.

Flutter

Flutter is not as popular as React Native, and not many companies use it actively. Still, it is used by Alibaba in the Xian Yu app or by Google in the Google Ads app.

React Native is more popular and widely used, and it is armed with the support of major tech companies. While we do believe in the potential of Flutter to win over its share of the market, for now, it badly loses to React Native.

React Native vs Flutter: 6–3

To Wrap Up

Our side-by-side comparison shows that, at least for now, React Native wins the Flutter vs React Native battle. While Flutter offers some significant tech benefits, the popularity and wide usage of React Native bring it to the first place.

The motto of React Native is “Simple is simple, difficult is possible”. This framework uses stable, tried and tested technologies, which minimizes development risks. Also, JavaScript lets you perform code-sharing with the existing projects. Yet, once Flutter was introduced to the market, it gave a powerful boost to the development of React Native.

Flutter is much younger than React Native. It was introduced to the market when all the weak points of React Native were well-known. Flutter came to solve these weaknesses. It uses a language, a renderer, and testing tools that are new for the mobile world. All of this was done to get a higher-quality animation and a polished application. This solution is a very interesting one from the engineering point of view.