Cross-Platform Frameworks: Flutter vs React Native

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 the web or IoT. In this blog, you will get an in-depth comparison of our two-favorite 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

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 the 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 an 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 and page, showing the exact same content to the user/developer. A 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 good user experience through offline application support and UI/UX design capabilities.

Flutter	React Native
✔ Offline access ✔ Can be white labeled 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, this 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-labeled by taking advantage of different product flavors. Each flavor has its own app icons, static resources, and assets that 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 that 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 that 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 better than the UI of the 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 that 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!