Flutter vs. React Native

Android maintained its position as the leading mobile operating system worldwide in June 2021, controlling the mobile OS market with a close to 73 percent share. Google’s Android and Apple’s iOS jointly possess over 99 percent of the global market share.

In this article, we will compare two popular frameworks for cross-platform development: Flutter and React Native. We will look at the pros and cons of each framework and discuss which one is better suited for use.

Why is mobile app development so popular?

Developing mobile applications is a steadily growing business niche. Virtually all people on the planet have mobile phones, which means a nearly unlimited number of potential users. Consequently, there are apps for almost everything nowadays.

You can choose many ways to design and build an app. You can either use native methods, e.g. Swift and Objective-C for creating iOS apps and Java for Android apps. These are the official Apple / Google software programming languages, respectively, which provides support and frequently updated features.

Alternately, you may use cross-platform frameworks such as Flutter or React Native.

What is cross-platform app development?

Before we begin, let’s define the term “cross-platform app development” and divide it into two categories: Hybrid Development and Native Development.

Cross-platform apps are apps that can be developed using a single codebase and function virtually identically on both iOS and Android operating systems. (In this article, we are focusing on mobile app development).

Hybrid Development

Hybrid apps are developed with a combination of web technologies such as HTML5, CSS and JavaScript. This means that hybrid apps share some code across platforms (e.g. the HTML/CSS/JS code) and this shared code runs in a webview on the target platform.

WebView apps are hybrid apps that use embedded webviews to render their user interface, within which you can use HTML5, CSS and JavaScript for customization.

WebView apps will have some limitations in accessing the device API out of the box, requiring additional effort to achieve some of the same functionality as native apps. The trade-off is that these apps are cross-platform out of the box, which can be a significant time saver.

Hybrid apps may look the same on both platforms but behave differently, depending on platform-specific APIs available to them. E.g. a weather app would check the API of the current location’s weather service on both platforms and return different data according to what is available on each platform.

Native Development

Native apps are developed with the native SDKs of their target platforms (e.g. Android or iOS). This means that they do not share any code across platforms and this shared code is written only for the targeted platform, whereas the UI is implemented using platform-specific widgets and libraries.

Native apps provide a better user experience than Hybrid apps and also look more native on each platform, but they cost more to develop and take longer to release new features due to the time needed for developers to learn the APIs of the target platforms.

In general, it is ideal to develop your app using the native development tool of their target platforms (e.g. Android Studio or Xcode).

Flutter and React Native: Cross-Platform Frameworks

Both Flutter and React Native are among the best cross-platform development frameworks available today. They both use native widgets to deliver a highly customizable, responsive UI while sharing code across different platforms.

The Flutter framework is developed by Google while the React Native framework is developed by Facebook, so these tech giants have very large teams dealing with everything from the platform’s SDKs to its documentation, support, etc.

While Flutter and React Native apps are both native, they are advantageous over traditional native app development because they can share a significant proportion of their codebase across platforms.

The history of Flutter and React Native

Flutter was announced at the Dart Developer Summit in October of 2016. The main idea behind this cross-platform mobile app development framework is to give developers tools to build native apps for iOS and Android using one single codebase written in Google’s own Dart programming language.

The first stable release (1.0) of Flutter came out on February 16, 2018.

React Native started a little bit earlier than Flutter. however it didn’t manage to leave the beta phase until March 2017. On September 5, 2017 React Native reached version 1.0 with huge support from tech giant Facebook.

As you can see both technologies are relatively new, but don’t let that fool you. React Native is already used by big players like Facebook, Instagram, Airbnb and Uber.

How Flutter and React Native compare

The main difference between Flutter and React Native is that React Native does not compile into a native mobile language (Java, Swift, Objective-C). Flutter, on the other hand, compiles its Dart language into native, which can impact performance (discussed later).

Another big difference is that vanilla JavaScript (besides JSX) is used for writing components on React Native. Facebook developers recommend using Flow or TypeScript when with React due to its dynamic nature. For Flutter, Google recommends using Dart for writing code as well because of its static typing system.

In our opinion, the decision on which of these 2 technologies to choose should be based more on your preferences rather than on their actual features and capabilities.

Of course it’s good to know all programming paradigms so you can easily pick up new languages and frameworks even if they’re not written in a language you’re familiar with.

Programmers who are already familiar with JavaScript (ES2015+) or TypeScript/Flow will find it much easier to start working with React Native. This is particularly true of developers that have used React for the web, as there is a great deal of overlap between React and React Native.

JavaScript still has a significant market share in the mobile development space, and because both React Native and Flutter allow you to choose your favorite programming language, it’s hard to say which one will be more popular in 2022.

As we have already pointed out, React Native and Flutter are both going to be significant players in 2022, so it’s up to you to choose which is the best option for your long term goals.

How cross-platform development frameworks work

Although cross-platform mobile development frameworks share many concepts and features, they’re each created with different goals in mind.

React Native was designed to provide native code performance combined with the ease of development that React web brings into the table. The idea is not to use a single set of shared components between iOS and Android but instead to have completely separate UI’s wrapped into a single JavaScript bundle, allowing you to ship almost half of the app’s code in a single place.

Flutter was created mainly to fulfill Google’s needs for… Google. In other words, another attempt at marrying fast development cycles with native code performance and building reusable UI components that can be shared between iOS and Android apps. This is why Google’s Flutter is so much faster than React Native.

Flutter was also designed with the idea of making app development easier and more accessible because it allows writing code using Dart, a language that can be learned in a weekend and mastered in days or even hours depending on the developer’s skillset.

This is why we believe that Flutter will be the mobile development framework of choice for companies that need to create lots of native mobile apps very quickly without sacrificing performance or features.

Building mobile apps is fun again

When Google announced Flutter, developers were stunned by how well it performs in practice compared to other technologies developed specifically for the purpose of building cross-platform mobile applications.

React Native’s philosophy of sharing UI code between iOS and Android was a great initiative, but due to React Native’s inherent limitations, the resulting apps cannot perform as well as native ones.

Flutter comes with a lot of goodies that you will not find in any other tool today. Dart is an impressive language that has been built from the ground up for the purpose of creating mobile apps.

Dart is currently the fastest language available for building Android and iOS apps, makes it easier to build performant UI components, has great IDE (integrated development environment) support with powerful autocompletion features, allows doing live coding prototyping without losing app state, and finally embraces object-oriented programming by making it mandatory.

Google will be able to make many important decisions for you, allowing the community to focus on what’s truly important – building apps.

Flutter came with a complete toolchain and a beautiful Material Design-like set of widgets that developers can reuse in their apps. Google has also created a number of integrations with 3rd party libraries such as image-processing libraries for handling images in an efficient way.

All of this is presented to developers as a cohesive package that has been designed with speed, ease of use, productivity, and performance in mind.