Flutter vs React Native [UPDATED]

2023/02/20 update: added more info about Flutter's new rendering engine, Propeller.

‍Introduction

The world of mobile app development is constantly evolving, and two of the most popular frameworks for creating mobile apps today are Flutter and React Native. Both frameworks provide users with the ability to develop mobile apps for iOS and Android and offer a native user interface for creating apps. Additionally, both frameworks offer components that can be used out of the box, making the development process easier and more efficient. When it comes to performance, both frameworks have their strengths and weaknesses, though React Native tends to be slightly faster. Additionally, React Native utilizes JavaScript as its primary language, while Flutter utilizes Dart. In this article, we will compare the two frameworks, looking at their native user interfaces, components available out of the box, performance, platforms, and languages, and provide a summary of which framework is best.

Native Interface

When it comes to the native user interface, both Flutter and React Native offer a wide range of components that can be used out of the box. Flutter provides a built-in Material Design library, which provides widgets such as buttons, text fields, and sliders that can be easily incorporated into an app. React Native also offers a library of components, such as View, Text, and Image, that can be used to create a native app. Additionally, both frameworks offer libraries of third-party components, allowing developers to customize their app to their specific needs.

Here’s the catch: everything that you see on your screen, when using a Flutter app, is managed by Flutter. Nothing that you see is managed by the OS, and nothing that you see is native to that OS. React Native, on the other hand, uses actual native components, as exposed by the underlying system.

Here’s how it looks like, when examining a screen on iOS

Components Available out of the Box

Here, Flutter dominates over React Native. Google implemented their Material Design library within the framework. That means there are countless components (widgets) ready for you to use. When it comes to Facebook’s framework, then you are in no luck. You must either rely on countless third-party libraries or implement required components yourself. While you have no shortage of helpers to make your life easier, it all takes some time.  

Performance

When it comes to performance, both Flutter and React Native have their strengths and weaknesses. React Native tends to be slightly faster than Flutter, as it utilizes native components that are exposed by the underlying system. Additionally, React Native utilizes JavaScript as its primary language, while Flutter uses Dart.

Moreover, Flutter has some problems with, e.g., iOS. For seemingly no reason, the framework can cause problems with performance on iPhones. This issue on GitHub documents everything you need to know. In short, shaders cause issues. More precisely, the app starts to miss frames during shader compilation.

An analogy for shader compilation would be baking a cake: each ingredient needs to be measured and combined in order for it all to come together correctly in order for the cake to bake properly - similarly, shaders need specific instructions that are compiled together by the GPU, so they can work properly on iPhones.

The process happens on the first run due to a GPU taking too long to compile shaders. Impeller is a solution in development that can help with this issue and should be tried before any other methods are attempted. To fix this, the Flutter team had to rewrite the whole graphical backend.

You may see more on the topic in the video below:

Platforms  

When it comes to platforms, both Flutter and React Native offer support for iOS and Android. Additionally, Flutter also supports web apps, allowing developers to create cross-platform applications that can run on all three major platforms. Furthermore, let’s say you want to create an app that targets the web, Android, iOS, Linux, macOS, Windows with one codebase. With Google’s framework, it’s easy.

React Native does not currently have support for web apps, though you may use React Native Web.  Microsoft recently introduced the support for macOS and Windows for React Native, and quickly ported several of their apps over. Meta made a similar move and used RN when they rewrote their Messenger app on Windows.

JavaScript and Dart

JavaScript is a popular scripting language that has been around for over two decades. It is the most popular programming language on the web, and it can be used to accomplish an impressively large array of tasks. JavaScript is relatively easy to learn and use, making it a great choice for developers who are just getting started with mobile app development. For more seasoned developers, there is TypeScript. It’s JavaScript’s younger sibling which is making sure everything works as expected, and bigger apps are not a nightmare to work on.

Dart is Google’s own programming language created specifically for Flutter. Dart was designed to make mobile app development easier by providing features such as type safety, garbage collection support, faster code execution times, better debugging capabilities, and more efficient memory management.  

While Dart may not be as widely known or used as JavaScript yet, its popularity continues to grow among mobile app developers due to its many benefits over other languages like JavaScript. The aspect that helps here is that the language looks oddly like its rival, JS, and Java.  

No matter how similar, and how friendly it is, it’s an additional language to learn with all its quirks. We can understand why Google wanted to create a new tool from scratch, but their decision did not help to make Flutter more popular.

Code Samples

Dart

import 'package:http/http.dart' as http;

Future fetchData() async {
  final response =
      await http.get('https://example.com/rest_api/resource');

  if (response.statusCode == 200) {
    // Successful response.
    return response.body;
  } else {
    // Failed response.
    throw Exception('Failed to fetch data');
  }
}

// Reversing a string
String str = 'Hello World!';

// Using StringBuffer
StringBuffer sb = StringBuffer();
for (int i = str.length - 1; i >= 0; i--) {
  sb.write(str[i]);
}
String reversedStr = sb.toString();

// Using List
List<String> charList = str.split('');
charList = charList.reversed.toList();
String reversedStr = charList.join();

JavaScript

// Fetch data from the API
fetch('https://my-api-endpoint.com/api/v1/data')
  .then(response => response.json())
  .then(data => {
    // Do something with the data
  })
  .catch(err => {
  	// Do something
  });

// Reversing a string
// Using a for loop:

function reverseString(str) {
  let reversedString = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversedString += str[i];
  }
  return reversedString;
}

console.log(reverseString('Hello World!')); // !dlroW olleH

Summary

When it comes to Flutter vs React Native, both frameworks offer users a wide range of components and native user interfaces that can be used out of the box. Additionally, React Native tends to have slightly better performance than Flutter due to many factors. However, Flutter offers support for web apps in addition to iOS and Android, allowing developers to create cross-platform applications with one codebase.  

Ultimately, each framework has its own strengths and weaknesses when it comes to creating mobile apps; however, both frameworks provide users with an efficient way to develop high-quality mobile applications quickly and easily.

Recently we have seen an interesting development in the field of cross-platform frameworks. Flutter overtook React Native as the king, and it is now the number one.  

This article provided a comparison between the two frameworks, and now it's up to you to decide which one is best for your project. We would love to help you along the way.