• Blog
  • React Native vs Flutter In 2020
React Native vs Flutter In 2020
Volodymyr Hodiak
Volodymyr Hodiak
222 January, 3, 2020 10 min

Native development is surely a time-consuming task. It requires writing applications for each platform individually, using different languages and taking into account the features of each platform. In this case, several teams work simultaneously to create multiple versions of one project.

Cross-platform development originated from an idea of being able to run one application both on iOS and Android without having to rewrite all the code from scratch. Thus, it became possible to kill two birds with one stone - create versions for both operating systems while using only one tool.

While React Native was introduced earlier and immediately gained popularity, Flutter is still claimed to offer better features compared to it. In this article, we will see how Flutter confronts developers' favorite, React Native.

React Native

Facebook developed React Native in 2015 and used it for internal purposes at first. But eventually, it grew into a full-fledged framework. React Native allows writing code for applications in JavaScript that can later be successfully displayed and executed both on Android and iOS like a “native” application.

Flutter

Flutter is a mobile application SDK (software development kit) built by Google. It helps to create high-fidelity, high-performance, and extremely fast mobile applications that can run both on Android and iOS. What makes Flutter different from other platforms is that it has a thin layer of C++ or C code, but most of the systems are implemented in the Dart language developed by Google.

React Native vs Flutter

Architecture

When choosing a framework, you should first get to know the characteristics of its architecture. React Native and Flutter have drastic differences in their architecture.

The former is based on Flux architecture. It heavily relies on JavaScript (JS) runtime environment, also called javascript bridge. It is used to interact with the native threads. Developers write JS code which is then compiled to native one during runtime.

Flutter, in turn, uses Dart that relies on the Skia C++ engine. The framework needs no bridges to communicate since most of its components are already in-built. It is also bigger in size than Flux, and the Skia C++ engine includes all essential channels, protocols, and compositions.  

So far, React Native loses the battle of architecture since its performance is lower than Flutter’s due to the javascript bridge. Besides, Flutter also has many essential features in the architecture itself.

Programming Language

Language is also a crucial element for comparison since it determines how user-friendly it is and how well you are backed up by its community.

React Native is based on Javascript. This language is not only among the world's most popular programming languages, but it is also one of the three fundamental technologies that constitute the World Wide Web. 

Flutter, however, uses a relatively unknown language called Dart, which was launched by Google in 2011. Though it is easy to learn and supports the majority of the object-oriented concepts, it is still not so popular and rarely used by developers. 

Obviously, even those who know little about web development heard about JS in one way or another. What is more, most widely-used web frameworks such as React, Vue, and Angular are built in JS. Dart, on the other hand, did not achieve such popularity yet and is not supported by such a wide programming community.

Performance

Speaking about general performance, we should recall that React Native uses the JS bridge to communicate to native elements, which makes it slower. While an app works on JS, it has to use a bridge to interact with a device and to convert variabilities from JS to native ones.

Though React Native is a high-powered tool, it is still quite slow. As an example, it is not suitable for drag-and-drop animations that require 60 or even 120 fps, since React cannot achieve such a high level of fps due to the converting process. 

Flutter, in turn, is much faster and easily demonstrates 60-120 fps animations on supported devices. It doesn’t need a bridge to interact with native components. Instead, Flutter even minimizes the interaction as it has a Skia Engine onboard, which handles various issues by itself.

Being based on the Dart language, Flutter also has high-speed C++ in its core. It allows building high-fps apps that feel like a native, which has a positive effect on the user experience. 

UI Components

In contrast to React Native, Flutter uses its own User Interface (UI) elements, including Cupertino for iOS, Material widgets for Android, and platform-independent widgets. And, of course, those widgets are decently compatible with native screens and OS components. Since its apps have one codebase, they run and look similar on Android and iOS. 

Flutter’s apps can also imitate the platform design and native components using Cupertino widgets for iOS design and Material Design for Google’s design. 

React Native uses app design elements that look exactly like native ones. This means that whenever OS UI upgrades, your app’s components will also be instantly upgraded, which is a plus. Sometimes it can break your app, but it happens very rarely. 

And if you want your React Native app to have an identical appearance across the platforms, you can utilize third-party libraries.

Wrapping Up

Both React Native and Flutter allow cross-platform development and thus significantly reduce time to market. But which framework is better?

Well, it is up to you. Both have advantages and disadvantages. Think which one best fits your idea and resources.

  • If your developers know Dart, then go for Flutter.
  • If your developers are proficient in JS, then React Native is your choice.
  • If a brand-first design is your top priority, then you should better choose Flutter.
  • If you want an app that uses native UI components, then pick React Native and look no further.

If you’re still hesitating, then you should better discuss your project with professionals who have experience in the field of cross-platform development. Also try to avoid developers who use only one particular tool, since their advice will likely prevent you from seeing a bigger picture. Both Flutter and React Native are good, but you should know the time and place for each of them.

At OTAKOYI, we know the pros and cons of each of these frameworks and apply them only where they really suit. If you need developers’ assistance, drop us a message and let’s get to work!