Flutter vs React Native. Mobile app development frameworks compared

TL;DR

• React Native and Flutter are among the most popular tools to build apps for iOS and Android with a shared codebase,
• Famous mobile applications using React Native include: Pinterest, Facebook, Wix.com, Bloomberg etc.,
• Well-known companies using Flutter are: Google (Fuchsia, Google Assistant), New York Times and Realtor.com,
• The basic building blocks in React Native are components, while Flutter uses widgets. Both allow hot reloading, enabling developers to see implemented changes in real-time,
• React Native is based on JavaScript and React, which makes it easy to learn for web developer. Flutter relies on Android OS and may feel more intuitive for Android developers,
• React Native has gathered an impressive online community of developers, but the one of Flutter is growing rapidly.

What is cross-platform mobile app development?

Two big platforms dominate the mobile development landscape: Apple’s iOS and Linux-based Android. Both of them support different devices and require different native languages to write applications. Writing mobile apps in their native languages requires hiring separate software dev teams, which in turn raises development costs.

Out of alternatives to native mobile development such as:
• progressive web apps,
• hybrid mobile apps,
• and cross-platform apps

the last one seems to be getting the biggest piece of cake recently.

Cross-platform mobile development allows for building applications that share huge parts of codebase on both iOS and Android.

Among other tools, cross-platform mobile apps can be developed with Facebook’s React Native and Google’s Flutter. Read on to learn more about them.

What is React Native?

We have already introduced our readers to React Native in the comparison between this framework and native mobile development.

So let me just give you a sip of React Native espresso here:
• Developed and first released in 2015 by Facebook developers,
• Allows for shipping iOS and Android apps with a single codebase to a large extent thanks to the built-in ability to translate JavaScript code into native components, called bridges,
• Based on JavaScript, one of top programming languages in the world.

What is Flutter?

Two years after the release of React Native, Google followed up with its own mobile development framework.

Based on the Dart language and with its own building blocks called `widgets`, Flutter has been consistently growing stronger. Fuchsia, Google’s operating system, was one of the framework’s early adopters, but it’s fair to assume the company will try to base more of its products on Flutter as time goes by.

Now, having listed some most general information on both React Native and Flutter, let’s delve a little bit deeper and examine their most important features.

Features of React Native

Components

Basic building blocks in React Native are called components. Some components are adaptive, which means they are able to recognize a particular platform (iOS, Android) they are running on, and render suitable designs, which in turn gives React Native apps an almost native feel.

Hot reloading

Hot reloading is the main feature that speeds up development with React Native.

Its idea is to keep the app running and to inject new versions of edited files at runtime. It allows developers to practically live-check the changes they make to the code. It doesn’t let them lose the application’s state, which is useful when working on an app's UI.

All in all, hot reloading holds true to React Native’s promise of “making the building of apps a great developer experience” thus reducing the time needed to develop particular features of the entire system.

Community

Since its release, React Native has gathered over 2,000 contributors on the framework’s GitHub website.

On the other hand, React Native is still not a fully mature framework. As both iOS and Android develop rapidly, some solutions are still unavailable from its standard libraries. You can either search for packages submitted by the community or build your own bridges in native technologies.

The fact that it’s based on JavaScript, still an insanely popular language, has a lot to do with the huge size of the React Native community. Knowing how to code in JS, but with no prior experience in mobile development, software engineers can easily broaden their field of expertise by learning the fundamentals of React Native.

Features of Flutter

Widgets

Widgets are the basic elements of Flutter’s graphic user interface. As opposed to components in React Native, they are using the framework’s graphic engine, called Skia.

Among a wide array of widgets, two deserve mentioning here:
• Cupertino widgets,
• and Material Components

Cupertino widgets are inspired by iOS and are meant to imitate the native components of this platform. Material Components implement the Material Design visual language.

As Material Design is made by Google, it has much more widgets than Cupertino. The latter one is under development, which in practice means that if no Cupertino widget exists for a certain design concept, developers will have to create them on their own.

More remarks on Flutter as seen from an iOS designer’s perspective can be found in this article.

Hot reloading

Flutter, too, has the hot reload feature which lets mobile devs experiment freely with their mobile app’s UI, while the framework instantly renders the changes.

Flutter’s community

As Google’s framework is two years younger than React Native, its community is still much smaller. To determine this, you don’t need to look further than to the list of applications built with it.

Smaller community results in a smaller number of abundant packages for solving specific problems. However, the framework’s ecosystem is constantly growing. Still, the fact that no one else but Google stands behind Flutter makes it at least worth considering a strong contender among cross-platform development tools.

Flutter might be strongly appealing to Android developers, as it relies on this OS for many capabilities and configurational Design is made by Google, it has much more widgets than Cupertino. The latter one is under development, which in practice means that if no Cns. This means that if someone has already built apps for Android, they don’t need to learn everything from scratch when going for Flutter.

Popular apps using React Native

There is plenty of quite famous apps using React Native including Facebook, Instagram, Wix, Uber, Pinterest, and Walmart among others. Let’s take a look at the latter two.

React Native at Pinterest

Besides Facebook, Pinterest is probably the most popular mobile application using React Native. While not fully based on the cross-platform framework, the picture-collecting app has been using it for its user onboarding tool, Topic Picker.

Already at the prototyping phase, the use of React Native cut the development time thanks to the shared codebase. The implementation of Topic Picker on iOS took 10 days, while on Android - only 2 days.

Implementing mobile features is shorter thanks to the fact that the Pinterest web app uses Gestalt, a React-based set of UI components, while React Native obviously shares the same React Paradigm. As a result, React Native components share the Gestalt APIs.

If you’re interested in the details of RN’s use at Pinterest, head over here.

React Native at Walmart

Shopping giant Walmart is another company that betted on React Native while working on its mobile incarnation. After coming to a conclusion that native app development is good mostly in theory (longer development, time-to-market and higher costs), they are now using the framework with benefits such as:
• 95% code sharing between platforms,
• nearly native performance,
• sharing business logic with Walmart web apps.

Need details? Go here.

Apps using Flutter

Due to its obvious immaturity, Flutter’s portfolio of popular brands is more modest than that of React Native. But still, many well-known projects are in it. Performance might not be the strongest aspect of RN, but users barely distinguish the almost-native speed from the purely native one.

As mentioned before, Google utilizes it for its OS Fuchsia. American real estate company Realtor uses Flutter for its Android and iOS mobile app. Newspaper New York Times employed it for its online puzzle game Kenken.

Along with the last example, developers at Google have announced that Flutter is about to move beyond the sole mobile landscape it had been powering since the release, and conquer the web, with the ambition of becoming a multiplatform framework “for developing beautiful experiences for any screen”.

With services like Alibaba and Google assistant rounding the list, it seems there is quite a lot in store for Flutter in the coming months.

React Native vs Flutter comparison: Wrapping up

Expecting a binary answer to this question is wishful thinking. Both frameworks have their unique features, as well as resulting pros and cons.

ReactNative vs Flutter - which is easier to learn?

React Native’s worldwide adoption is a fact that may make it look safer in the eyes of many business owners. Also, being built on top of JavaScript makes it easy for many developers to make the transition to mobile programming with React Native. On the other hand, many use cases of React Native (those described above included) show that it's often used partially and not for an entire app.

Being two years younger, Flutter seems to be chasing its Facebook counterpart with the ambition of becoming something much bigger than just a mobile development framework.

As its powered by Google, it relies on a vast amount of Android OS elements and is thus easy to learn for Android devs.

Whereas more ready-made solutions may make React Native look more attractive, the rapid developments in the Flutter camp show that things may change sooner than we expect.

Big thanks to Michał Majchrzycki and Andrzej Pietruczuk for help on this article.

See Also

• Flutter vs SwiftUI. A simple comparison
• Need a foretaste of how we build mobile apps? Read our playbook!
• When your business doesn't need a mobile app