React Native vs Flutter: Detailed Comparison

Cross-platform development is a king today. The growing popularity of mobile apps pushes developers and companies all over the world to come up with faster, easier and more efficient ways to deliver applications.

Earlier, one of the most popular solutions was hybrid app development.

But these days are gone.

Luckily, today we have more advanced technologies. In this article, we’ll compare React Native vs Flutter — two modern frameworks for cross-platform app development.

Here are a few other noticeable things regarding this framework:

• Like Flutter, React Native is completely free and open source.
• You can write a single codebase in Javascript and reuse it for both iOS and Android. However, sometimes you may still require a bit of native code to implement platform-specific features.
• Unlike hybrid apps, React Native apps use the same UI components (instead of rendering HTML) as iOS and Android applications.
• You can use React Native not only to create a mobile application from scratch but also, for example, to rewrite existing parts of your app or implement new features.

Since 2015, many famous companies have used React Native in their app development.

The official Flutter 1.0 release was announced on Google I/O in December 2018.

The funny thing is that cross-platform development wasn’t the main and initial aim of the Google Team. The top goal was to introduce a simpler and faster way to deliver Android apps than native Java/Kotlin development.

However, the idea quickly developed and today Flutter is mainly considered as an effective tool for cross-platform development not only for mobile but for web and desktop as well.

To get a clearer picture of what Flutter is, we recommend watching the following introductory video by Google:

A few key points about Flutter:

• Nowadays Flutter is mainly used for mobile development. APIs for desktop development may still be instable but Google works on it.
• For web developers, Flutter also offers limited capabilities: now it works only as a technical preview so you may experience missing features and crushes. However, the idea behind the web solution is to allow developers compiling Dart code into a WHAT that can be embedded in the browser.
• The programming language behind Flutter is Dart.
• Flutter heavily relies on its Material Design and iOS-flavor widgets that allow creating nice and native-looking UIs. However, you can create your own custom design with ready-to-use UI elements.

Since it’s quite a young technology, Flutter doesn’t have as many big companies in its showcase as React Native. Among the Flutter’s most well-known followers are Alibaba, AppTree and, of course, Google with its Google Ads app.

More apps built with Flutter can be found here.

Flutter relies on Dart programming language. It was introduced by Google in 2011 as a direct competitor to JS in the field of web development. Yet, it has never beaten up JavaScript so Google has progressively abandoned this idea.

Dart is a class defined, object-oriented language. However, Java or JavaScript developers can easily understand its syntax since it supports many object-oriented concepts.

Installation

The logic here is straightforward: the simpler installation, the better. Luckily, both frameworks handle the installation quite good.

To get started with React Native, developers should download & install the Node Package Manager (NPM), run the command and they’re all set!

To install Flutter, developers have to download the binary for their platform from Github unzip it and add it as a PATH variable.

Despite both frameworks lack one-liner installation through OS-specific package managers, the installation process is quite simple and fast so you shouldn’t face any troubles here.

Components

Components are the “building blocks” to create UIs. This is an essential concept for any framework. Let’s see how different it is for Flutter vs React Native.

React Native is known for its capability to create easy-to-understand and easy-to-maintain components. Those components are supplied by Facebook out of the box.

React Native provides about 40 components that can be joined to create new, custom components.

Also, in React Native you may expect to see device access APIs and UI rendering. However, Facebook’s framework is quite heavily dependent on third-party libraries since it’s the only way to access most of the native modules.

Flutter’s components are called widgets. The concept itself will seem very familiar for web developers who have worked with React, Vue, Angular or Web Components. Today Flutter supports about 140 standard widgets.

An example of Flutter's widget

Flutter comes together with device API access, UI rendering, testing, navigation and lots of libraries. It may not eliminate the need to access third-party libraries but definitely reduces it.

The number of widgets — Flutter’s UI components — is also much bigger than in React Native.

Another difference is that React Native’s components are native components — so you have to communicate with the native platform. Flutter’s widgets, on the other hand, aren’t native components but they do look like native. Moreover, they’re so pixel-perfect that you can’t tell the difference.

UI Rendering

UI implementation in React Native is done by the means of the native platform. In other words, instructions written in JS are sent to the native side where they're interpreted and drawn as native UI elements.

It also means that to communicate with native modules developers should write bridges between JS and native side. Due to this fact, React native UI elements don’t just look native but are actually native.

Things work a bit different in Flutter. It uses Skia graphics engine to draw the widgets which look the same way as native elements. Skia also doesn’t involve native code. That’s why this approach doesn’t require bridges or native calls, therefore UI is smoother in Flutter apps.

When working with Flutter, your UI components are pixel-perfect mockups of the native components. These copies are no different from their native originals so your users won’t feel any difference. Moreover, it makes you independent of the OS changes.

The bad news is that it makes Flutter apps 3-4 times larger than a native iOS or Android app. Despite this number is constantly shrinking, it will never become the same as for native apps. However, the same size issues are true for React Native as well.

Platform-Specific Customizations

Despite React Native mainly relies on JavaScript as a programming language, developers are often required to write iOS or Android code for platform-specific customizations. For instance, when adding Bluetooth capabilities, our react-native-ble-manager tutorial can be very helpful. To do so, developers should write bridges in native code. This may relate to deep linking, push notifications, specific native UI components, new device features etc.

Flutter, on the other hand, has more built-in components so developers can often omit writing native code. However, even if they need to apply some platform-specific customizations, Flutter provides a special tool for that also known as Platform Channels.

Testing

Getting quick feedback on the code can save developers a lot of time. Here’s how both frameworks deal with this task.

In React Native you can use a few unit level testing JS frameworks. For snapshot testing tools like Jest may be used. However, for UI level or integration testing React Native provides no official support so you’ll have to use third-party tools like Detox or Appium.

On the contrary, Flutter officially provides many testing features that work at widget, unit and integration level. The docs are also great and very clear. For even more deep information on testing, you can check the Nevercode blog.

Moreover, both React Native and Flutter support a hot reload feature. It saves a lot of time for developers who test changes in UI. Instead of recompiling the app every time, they can see the UI changes on a testing device immediately.

Build & Release Automation Support

Releasing apps to Google Play Market or App Store may be quite a complex and time-consuming task.

The React Native documentation relies on the manual process for deploying mobile apps. For build and release automation React Native developers (as well as Flutter ones) have to use third-party tools like fastlane.

The great advantage of React Native vs Flutter is over-the-air updates. With his feature, any changes to the JS code are immediately shown to users. Thus, you’re able to avoid the review process at App Stores and eliminate the need to upload the new version of the app to see new changes. To implement this feature you will have to use a tool like Microsoft CodePush or similar one.

Over-the-air updates make Facebook’s framework perfect for A/B testing and quick bug fixing. As of now, Flutter doesn’t support such a feature.

However, Flutter has as good tooling for build and release automation as React Native. In both cases, due to a strong command-line interface, developers can deploy apps just from the command line.

Documentation

The framework is installed. What’s next? How do you set everything up and configure software installations? Clear documentation at this step may save a lot of time and help new developers quickly get on the track.

React Native’s guide begins with the step of creating a new project. They fairly assume that native developers already know how to configure Android Studio or Xcode and for the ones with the web background they offer to choose an easier way and use Expo tools.

Flutter pays more attention to this step. Platform and IDE setup are explained quite well.

Moreover, Flutter has a CLI tool also known as “Flutter doctor”. It checks the installed tools and tells a developer what he’s missing or needs to configure. When everything’s fine it will notify you that you’re all set and ready to start your first Flutter project.

Another advantage of Flutter vs React Native is detailed migration guides for developers who are switching to Flutter from other technologies (Android, iOS, React Native and so on).

This point in our comparison of React Native vs Flutter shows that Google’s framework tries to create a more friendly environment for new developers.

Community

When we compare Flutter vs React Native communities, we should remember that Facebook’s framework was released 3 years before its competitor. So it’s quite obvious that React Native has a bigger community as of summer 2019: