Traditional native development entails developing two codebases; one for iOS and one for Android. This means creating different codes for different platforms, which usually results in higher development costs. Hallelujah for cross-platform development frameworks! Developers only develop and maintain one code base. This one code base can be further packaged into an iOS native app or an Android native app or could even be used to target web or IoT. In this blog, you will get an in-depth comparison of our two-favourite cross-platform frameworks Flutter vs React Native, our experience working with them, and when to use which one.

What are Flutter & React Native?

Flutter and React Native are both cross-platform mobile development frameworks. React Native was developed by Facebook and was initially released in May 2015. It was later discovered by a larger community, and ever since it has become mainly community-driven. Flutter, on the other hand, is considered as a newer framework; its first stable version was released in December 2018. Apps using React Native are written in JavaScript, while apps using Flutters are written in Dart.

The Pros & Cons Of Cross-Platform Development

Cross-platform has become more popular among business owners who want to target a broader set of users. Thanks to its ability to work across various platforms. While cross-platform applications are highly popular, they do have both pros and cons tied to their working space.

Looking at the pros and cons, cross-platforms applications are not always the best solution. There are two sides to every coin, and one will outrun the other. Though if we must choose from many of the cross-platform frameworks, our choice goes to Flutter and React Native. That is why we will dive further into the comparison of these two frameworks.

The Evaluation

In order to make a proper evaluation between Flutter vs React Native, we have thoroughly selected three technical criteria to support our research in comparing the two frameworks.

Criteria 1

The ability to implement hot reloading functionality, over-the-air updates, build variants and decompilation.

Flutter React Native
Stateful hot reload

Supports editing product flavors resulting in multiple build variants

Its cross-platform and Android specific code can be obfuscated

Has not yet supported over-the-air updates

Does not provide option for the obfuscation of iOS code

Supports editing product flavors resulting in multiple build variants

Its cross-platform and Android specific code can be obfuscated

Only supports standard hot reloading

Does not provide option for the obfuscation of iOS code

Hot reload

Both Flutter and React Native offer a hot reloading functionality. Hot reload enables developers to quickly see visible changes (often UI) that they have made to their code. Having worked on both Flutter and React Native, it seems that Flutter’s hot reload function is better at persisting states. This means that the app reloads with the previous state andpage, showing the exact same content to the user/developer. Stateful hot reload like this is a nifty functionality for developers.

Flutter stateful hot reload

React Native hot reloading

Over-the-air updates

React Native supports over-the-air updates. This enables you to push small updates to the end users without having to submit a new app version to the app stores. Unfortunately, Flutter has not yet supported over-the-air-updates. It is however listed on its roadmap for 2019!

Build variants

A build variant is the combination of build type and product flavor. A build type could for example be a release app, a flavor could be a free or paid version. This would result in the build variants free release or paid release. Flutter and React Native both support editing the product flavor, and come with the standard build types debug and release, resulting in multiple cross products and thus build variants.

Decompilation

Decompilation is the process of decompiling a packaged app back to the source code. This process could be a potential security threat if (semi-) private information is stored in the source code of an app. Obfuscation is the technique to make the source code deliberately hard to read in order to increase the complexity of finding secured information in the source code.

Flutter offers several options to obfuscate the Dart code and the Android-specific Java code. By using React Native, you can also obfuscate the JavaScript code and the Android-specific Java code. Comparing both frameworks, it can be concluded that they offer similar options in terms of obfuscation; their cross-platform and Android specific code can be obfuscated.

It is important to note that both frameworks do not provide options for the obfuscation of iOS code. This is quite understandable as in general iOS code obfuscation is not a common practice due to the way iOS apps are packaged.

Criteria 2

The ability to support a good user experience through offline application support and UI/UX design capabilities.

Flutter React Native
Offline access

Can be white labelled by taking advantage of different product flavors

The UI is built out of different widget styles for the iOS and Android app

Comes with standard motion effects and a collection of  animations and motion widgets

Offline access

The node package MajoraJS can be added to the project in order to develop (multiple) white label versions of an app

Provides only two animation systems by default

The UI does not provide enough components which causes developers to use third party components

Offline application support

Both Flutter and React Native apps can function offline. Flutter bundles assets/resources and deploys them with the app so they can be accessed without an internet connection. React Native also allows static resources to be included in the project and be bundled together with the app so they can be accessed offline.

White label

A white label app is a generic app without branding that can later be customized to fit the branding of different companies. An app using the Flutter framework can be white labelled by taking advantage of different product flavors. Each flavor has its own app icons, static resources and assets which can be customized. This enables the creation of white label app variants. With React Native, the node package MajoraJS can be added to the project in order to develop (multiple) white label versions of an app. MajoraJS is used for swapping app names, package id’s and changing assets like app icons by configuring the majora.js file.

Creating a native look and feel

The UI of an app using the Flutter framework is built out of widgets. These widgets either use Material Design, which is the standard Android style (also possible for iOS) or Cupertino style, which is the standard iOS style. By using different widget styles for the iOS and Android app, the app will end up looking similar to a native app. In addition to that, having the same UI (Material Design for both Android and iOS) would prevent a developer from writing the UI code twice.

React Native handles its UI differently; it comes with components that render differently on Android and iOS. In theory, this sounds like a good solution. However, in practice, React Native does not provide enough components out of the box itself. This causes developers to use third party components, which vary in terms of their look and how close they are to native.

Animations

Many of Flutter’s widgets come with standard motion effects added to them. Furthermore, Flutter also comes with a collection of animations and motion widgets (e.g. the hero widget for a shared element transition) and examples of common animations.

React Native, by default, provides two animation systems in which animations can be made by animating specific values. Third party solutions offer animations with a more out-of-the-box approach. All in all, for commonly used animations, Flutter is an easier framework to use.

Criteria 3

Other than the common iOS/ Android mobile app, can more platforms be targeted?

Flutter React Native
Using BLoC pattern for code sharing with Flutter applications

Does not support wearable, IoT or TV

Does not officially support instant apps

Share code with React (for web) and Flutter with AngularDart (for web)

Officially supports Apple TV as well as Android TV

Does not officially support instant apps

Sharing code between mobile and web applications

An upcoming popular pattern for code sharing with Flutter applications is the Business Logic Component (BLoC) pattern. It is a pattern which uses reactive programming principles to provide Flutter’s widgets with a stream. Thanks to this, all platform independent business logic gets handled outside of the widget context. Using streams, the BLoC provides the widget with information and changes. In turn, the widgets respond to this.

For now, React Native can share code with React (for web) and Flutter with AngularDart (for web). Flutter recently launched a demo demonstrating project Hummingbird, a project aimed at running Flutter apps on the web.

Target wearables/IoT/TV

Currently, Flutter does not officially support wearables, IoT or TV. React Native does officially support Apple TV as well as Android TV. Given that Flutter is still a relatively young framework, wearable/IoT/TV support might be added in the future.

Instant apps

Instant apps are Android apps which are accessible to users via the Google Play store or by being redirected from a website. Instant apps do not have to be downloaded and serve as a try-out version of an app. Both Flutter and React Native currently do not officially support instant apps.

The Conclusion

Flutter vs React Native

Flutter React Native
 Has a better hot reload function which persists state better, thus more pleasant to work with.

 The UI is built out of different widget styles for the iOS and Android app, which is beter than the UI of app using React Native

 It comes with more out of the box animation options

The BLoC pattern for sharing code between mobile and web is well thought out

 Supports over-the-air updates which enable developers to make quick changes to an app in response to app store reviews for example. Flutter has not yet supported over-the-air-updates.

 Officially supports Apple TV as well as Android TV while Flutter does not

Having worked with both Flutter and React Native, we can say that even though Flutter is a younger framework, it does not lag behind on React Native. Both frameworks have their advantages:Weighing the pros and cons Flutter would slightly gain the upper hand but React Native is a sound alternative.

For a project, it would be wise to consider the specific needs of the project and if the frameworks will be able to support them. For example, if over-the-air updates are of importance to your project, for now, you may want to opt for React Native. If having a consistent UI for iOS and Android is important, Flutter could be the better choice. Furthermore, the technology stack could be a thing to consider as the programming languages of these frameworks do differ; Flutter uses Dart and React Native uses JavaScript. Therefore, Flutter will probably be easier to learn for developers used to develop native apps and React Native for web developers.

Future

In the future, Flutter will most likely be further developed to support more platforms. Project Hummingbird will bring Flutter apps to the web and most likely the next step will be to bring Flutter apps to either wearables, TV or other IoT.

Want to know more?

Got excited? Good! We are happy to hear that we have inspired you as well. Are you interested in using a cross-platform mobile development framework to optimize your business? Or do you want one of our developers to give a talk at your company? Then feel free to contact us!