Flutter vs. React Native: Choosing the right cross platform mobile app development framework
What is cross platform mobile app development?
Cross platform mobile development has become increasingly popular in the last decade. What is cross platform mobile app development? In a nutshell, it means that when developing cross platform mobile apps, devs can write code once and deploy it across multiple platforms, thereby reducing development time and cost.
Two of the most popular cross platform mobile app development frameworks are Flutter and React Native, as seen in the chart below. Both of them have an ability to deliver a near-native experience with high-quality performance. This is unlike other cross platform frameworks, such as Ionic and Apache Cordova, which use an OS web view to render apps.
Let’s compare Flutter vs. React Native, the two most popular cross platform app development frameworks, across their technical details so you can decide which app development framework would work best for your upcoming projects. We’ll weigh their advantages and disadvantages, and then check out how their performance stacks up against native apps. As a developer, it’s important that you understand these differences before selecting a cross platform app development framework.
Flutter vs. React Native: A detailed comparison
If you want a quick comparison of building Flutter vs. React Native apps, please see the table below. The details are explained in later sections.
History of Flutter & React Native
First, let’s go through a brief history of Flutter and React Native. Flutter, developed by Google and first released in 2018, is a newer framework that uses Dart as its programming language. It claims to offer faster development and better performance than other cross-platform mobile development frameworks.
React Native was developed by Facebook and released in 2015. Based on JavaScript, it allows developers to build mobile apps for both iOS and Android using a single codebase.
Programming language & package repository of Flutter & React Native
Flutter apps are written in Dart, a relatively new programming language developed by Google, which was introduced in 2011. Used for mobile, web, server, and desktop applications, Dart has gained a lot of popularity since Flutter’s first release. The Flutter package repository, pub.dev, contains several official and third-party packages for use in Flutter apps.
React Native apps are written in JavaScript, one of the most widely used programming languages in the world. The framework relies on JavaScript’s power and flexibility to enable developers to code UI elements and application logic. Using React Native, JavaScript developers can avoid the learning curve of a new programming language. The npm package repository provides a huge number of reusable packages for developers to use in their React Native apps.
Flutter community vs. React Native community
Dart, the language that Flutter apps are written in, is relatively new compared to other programming languages. This could be a disadvantage; Dart’s community of developers is much smaller compared to a language like JavaScript. Therefore, the Flutter community is a niche community of developers.
The broad popularity of JavaScript gives React Native the advantage over Flutter. A large number of developers already use JavaScript as their programming language of choice, or they’ve at least written JavaScript code in a past project. Therefore, it’s simply less challenging for many developers to start building a mobile app in React Native. Also, JavaScript’s package repository, npm, has more reusable packages than pub.dev. The React Native community is large and established, and can be helpful while developing cross platform mobile apps.
Flutter development environment vs. React Native development environment
Different programming languages for Flutter vs. React Native mean different development environments and setup methods.
The Flutter development environment, Flutter SDK, includes everything you need to build and run Flutter apps. The SDK includes the Flutter framework (which is bundled with Dart), Dart dev tools, and a CLI. It also comes with flutter doctor, a tool that helps detect and troubleshoot setup errors.
If you’re using either Android Studio or VS Code, you only need to install the Flutter plugin to have your environment ready. The plugin for both IDEs comes with the Flutter SDK and Dart, among other features. You can use other IDEs with Flutter, but the setup process may not be as straightforward.
Basically, you don’t need more than the Flutter SDK or a Flutter plugin installed by an IDE in order to have a development environment set up and ready. Note that if you want to develop Android apps, you do need the Android SDK, if it’s not installed out of the box with an IDE plugin. To develop iOS apps using either React Native or Flutter, you have to install Xcode. This does add an extra step to your dev environment setup. And, though it might go without saying, you can only install Xcode on a device running macOS.
On the other hand, the React Native development environment requires that you have Node.js and the React Native CLI installed. For Android development, you need to install the Java Development Kit (JDK), install the Android development environment, set the path variables, and set up a virtual testing device using Android Studio.
If you’re a beginner, the setup process for React Native could seem complicated and might take you some time to get everything up and running. The setup can also look quite different depending on your operating system. However, if you’re already a JavaScript developer, getting started will be much easier—most likely, you have your favorite IDE already set up, such as Atom, WebStorm or VS Code.
For a detailed guide on setting up a development environment for React Native, you can check the official setup guide.
Overall, Flutter offers a more straightforward environment setup. It can even feel like an out-of-the-box solution if you use one of its preferred IDEs. Setup for React Native is more complicated, especially for beginners. However, it may be the better choice for an experienced JavaScript developer.
Design of Flutter vs. React Native apps
Flutter’s layout system uses widgets for every UI element, such as rows, columns, text boxes, and buttons. Its animation library supports a variety of animations and transitions, either by adding properties to the widget or creating custom animations with an AnimationController that can be called during application runtime.
To see its simplicity firsthand, the following code adds a text and a button widget to a sample Flutter app. Simply paste it into the main.dart file:
This app renders the MyHomePage widget. The layout is from a built-in Flutter widget called Scaffold, which itself has an app bar and a body that includes Text and OutlinedButton widgets.
Next, in React Native, layout design is based on flexbox in CSS. UI components are styled with properties and values that match the ones in CSS, like width, height, color, backgroundColor, and fontSize. You can make use of a range of simple animations with React Native’s animated library.
To see a simple app in React Native, paste this code into an App.js file:
The rendered app should look like this:
This sample app is built using a View that contains two children: a Text and a Button component. The layout is set using the flex, justifyContent, and alignItems flexbox properties, and the font size is set by the fontSize property.
From the two sample apps, you can see that React Native and Flutter are similar in terms of design, layout, and styling. Both frameworks use a unidirectional data flow architecture—that is, data flows from parent components to child components. Both offer a range of app design tools, such as the Flutter Inspector and the React Native Debugger, so you can easily debug and visualize your app’s layout and structure.
React Native will be more intuitive for web developers, given that its components are styled using CSS properties. On the other hand, developers with no CSS experience might consider Flutter less of a challenge.
Flutter UI components vs. React Native UI components
As you've already seen, Flutter UI components are coded as widgets. A widget is a Dart class that either extends StatefulWidget or StatelessWidget. A StatelessWidget doesn't change during the runtime, while a StatefulWidget can change dynamically during the widget's lifetime.
The Flutter SDK comes with several widgets out of the box, but you can find additional independently developed widgets at the pub.dev repository. Flutter also comes with two sets of widget designs: Material, an open-source design system developed by Google; and iOS Cupertino. According to the official Flutter site, Cupertino widgets 'implement[] the current iOS design language based on Apple's Human Interface Guidelines.'
Next, React Native UI components are based on built-in core components. React Native groups them into six categories:
Basic
User interface
List views
Android specific
iOS specific
Oher
React Native UI components are controlled by two types of data: props and state. props are set by the parent and don't change throughout the lifetime of a component—they behave similarly to Flutter's StatelessWidget. For data that's going to change, you can use state.
In addition to React Native's core components, you can also use independently developed components from Node package managers such as npm and yarn.
Note that both React Native and Flutter use a declarative UI; you declare the current UI state and leave it to the framework to rebuild the UI with each state change. And while both cross platform app development frameworks support creating reusable widgets and components, a significant difference between them is how a compiled app's UI components look across platforms.
React Native's core components are referred to as platform-backed components. That means that corresponding Android and iOS views are created at runtime. As a result, a React Native app's components look more like a native app's components, depending on the platform. Note that there have been very rare cases in which a React Native app's UI broke after a system update. However, you can usually mitigate this by keeping your framework version and app updated.
You may recall that Flutter, on the other hand, gives you two widget sets for UI components: Material and Cupertino. While the result is that your app has less of a "native app" feel, its look is more unified across platforms.
Performance of Flutter vs. React Native apps
Before we compare performance benchmarks, let’s check out how Flutter vs. React Native apps are built and how they run on mobile devices. A better understanding of how their apps run under the hood can help you absorb the meaning of their respective benchmarks.
Flutter compiles Dart to run on mobile platforms. This doesn’t mean that it converts the Dart code that you write into its equivalent in Java, Kotlin, or Swift. Instead, the compiled Flutter apps ship with Flutter Engine, a runtime for hosting Flutter applications. In other words, Flutter compiles your code into a native app that uses Flutter Engine to draw the UI widgets and make it run the way you coded it on an Android or iOS screen.
React Native apps are built in two layers: JavaScript and native. Until v0.67 of React Native, the two layers exchanged data via the React Native Bridge—one layer serializes the data, then sends it in JSON format to the other layer asynchronously. However, the delay between data serialization and deserialization inflicts extra overhead. Starting from v0.68, React Native ships with a new architecture in place of the bridge called the JavaScript Interface (JSI). The JSI allows a JavaScript object to hold a reference to a C++ object and vice versa.
Due to the overhead of the bridge, React Native has been known to perform poorly compared to Flutter for apps that include long list views or heavy animations. JSI seems to allow synchronous execution that results in lower overheads than the bridge, and promises better performance that can compare to Flutter’s. However, since JSI is relatively new, it’s too early to make a strong claim.
Performance comparison: Which is better—Flutter or React Native?
Several companies and independent developers have conducted benchmark tests comparing Flutter vs. React Native.
One test compared CPU and memory usage while using a simple timer app on two Android devices, a Nexus 5X and a Pixel. Flutter almost matched the native app’s CPU usage, and the React Native app’s CPU usage was usually not under 30%. React Native performed slightly better when it came to memory usage as compared to the native app, and the Flutter app’s memory usage is almost 50% higher than the native app.
Another comparison tested the performance of both frameworks with animations. Flutter scored a near-native result on Android, while React Native performed with a huge drop in frame rate. However, both frameworks performed similarly to the native app on iOS. So you do have to consider the capabilities of the device the app is running on. In terms of memory consumption, both React Native and Flutter used almost double the memory compared to native apps for heavy animation.
Do performance benchmarks matter?
Most benchmark tests suggest that Flutter apps tend to perform better in terms of CPU while React Native apps score slightly better for memory usage. In reality, you can get some indication from these metrics of how apps will perform per framework, but they shouldn’t be the only thing to base your choice on. Actual performance depends on your app’s requirements and end user devices. For instance, the performance difference in these benchmarks doesn’t weigh much in most business apps because modern devices, both running Android and iOS, can easily handle them. On the other hand, Flutter’s better performance and low drop in frame rate make it a favorable choice when it comes to apps that rely heavily on graphics and animations.
Flutter vs. React Native: Which should you choose for cross platform app development?
Flutter and React Native are the most widely used cross-platform app development frameworks, and both of them provide a faster way to develop for multiple platforms from a single codebase. We’ve discussed the main strengths and weaknesses of each framework with regard to:
Programming languages. If you’re a JavaScript developer, you might favor React Native. If you’re not, Flutter might present less of a learning curve.
Development environment. Use any IDE you like with React Native, though Flutter’s preferred IDEs are easy to use.
UI components. React Native has a near-native feel to its apps, but Flutter apps can have a more consistent appearance.
App design. Web developers will appreciate React Native’s use of CSS.
App performance. Flutter wins out for graphic-heavy apps.
If you want a detailed analysis of Flutter vs. React Native apps, this article is a good place to start.
Sendbird offers an easy-to-use suite of UIKits and SDKs for both Flutter (here’s the Flutter sample app) and React Native (check out the React Native sample app too.). With our customizable chat API with which you can build in-app chat, you can send marketing promotions, start sales conversations, upgrade customer support with a brand-new ChatGPT and Salesforce integration, send order status updates, and lots more. Sendbird even provides capabilities such as moderation, rich media, translation, and analytics for feature-rich chat.
After you’ve got a chat up and running, you can take your chat app to the next level with in-app calls or live streaming.
You can get started quickly, ship in days, and scale to millions of users. Why not try it out for free?
Happy cross platform app development! 📱