The two most popular cross-platform mobile app development frameworks available at the moment are Flutter and React Native. These juggernauts are backed by two of the largest tech companies in the world: Google and Facebook, respectively.
In this guide, we’ll compare Flutter vs. React Native, explore what makes each framework so special, and discover why they’re so highly sought-after.
What is Flutter?
Flutter is a cross-platform UI framework developed by Google. First released in May 2017, Flutter has grown steadily in popularity over the years.
One of Flutter’s main selling points is that it enables you to create cross-platform applications using a single codebase. Traditionally, a company would need multiple tools and developers to create an application that was available on the web, mobile, and desktop.
For example, you might need:
- A developer who specializes in web development using React to build the website
- Another developer using C# and Java to create the desktop version
- A dedicated mobile developer using Kotlin and Swift to build the Android and iOS apps
This approach would require a whole team of developers, not to mention a ton of meetings to make sure the design and branding are consistent across all platforms. You also have to factor in testing for each platform and addressing their respective bugs and quirks.
With Flutter, companies can hire one developer to create apps across platforms with just one codebase to manage. This significantly reduces the time and resources required to launch and maintain an application.
Flutter 3 introduced fairly substantial changes. While the API for writing mobile and web applications hasn’t changed much, you can now use the same codebase to create iPhone, Android, Web, Windows, Mac, and Linux applications using the Flutter Compiler.
What is React Native?
React Native is a cross-platform framework created by Facebook. With a codebase written in JavaScript, React Native makes it fairly simple to create cross-platform applications, lowering the barrier to entry for JavaScript developers.
Web development has been around for many years, and most web developers have been using JavaScript for much of their careers. Mobile development is still fairly new, but the ecosystem has matured quite a bit over the past few years.
If you already know JavaScript, the learning curve for mobile app development using React Native won’t be as steep.
These days, many companies are using React Native for app development. Microsoft recently developed its new Xbox store app using React Native, for one prominent example. Like Flutter, React Native makes it possible to create apps across various platforms using one codebase.
React Native v0.68, which was recently released at the time of writing, offers opt-in support for the new React Native architecture using the Fabric Renderer and TurboModule system. All libraries have not yet migrated to this new architecture, which is why it’s opt-in only.
The Fabric Renderer brings concurrency, React Suspense, and server-side rendering to React Native, along with a faster and more interoperable toolset.
What are some key differences between Flutter and React Native?
Flutter and React Native share a lot of similarities, but they are also quite different in a handful of key ways.
For starters, Flutter uses the Dart programming language in its codebase, whereas React Native uses JSX.
Both languages are based on the C-style type of syntax and follow object-orientated principles. With this commonality, Flutter and React Native are fundamentally alike in terms of design, and the code is very similar as well.
Documentation
Flutter and React Native both have excellent documentation guides. These guides make it easy for programmers to start developing apps.
Flutter’s documentation is easy to read because it is nicely formatted, structured, and detailed. In comparison, React Native’s documentation is not straightforward.
React Native also heavily depends on community-developed dependency libraries, so its documentation is not as well-organized.
Dynamic vs. static programming
When it comes to the core programming language, there is a significant difference between Flutter and React Native.
JavaScript is dynamic by nature. This means you can change the values of various data types, which makes it very versatile. Dart is both dynamic and static, which allows it to have the best of both worlds.
A statically typed language is generally considered much safer since it forces you to declare and use the correct data type. For example, you can’t assign a number to a string without returning an error.
You can enforce more type safety and error checking with JavaScript if you opt to use TypeScript instead, a strict syntactical superset of JavaScript.
Project size
React Native applications have a JavaScript runtime environment. While they usually have a bigger build size, this size can be reduced in React Native by enabling Hermes and ProGuard.
On another hand, Flutter apps tend to have larger file sizes. Inevitably, Flutter apps will take up more space with their larger build sizes.
Layout
Flutter uses a widget style for constructing the user interface, whereas React Native uses JavaScript and JSX.
Flutter widgets are pre-made, so you don’t need to create your own custom widgets unless you want to. Since the widgets were created and tested by Google, you don’t need to worry about compatibility issues.
If you’re using a programming language like Swift for mobile app development, you typically can’t see the code that Apple used to create UI components, like buttons. By contrast, you can see the code for Flutter widgets to see how Google developers created them.
Both Flutter and React Native use CSS Flexbox for constructing layouts. The way each framework implements it is different, but as long as you know Flexbox, you shouldn’t have any problems building the layout for your app.
The team that worked on Flutter also worked on the developer tools for the Google Chrome browser, which makes for a quick transition since the debug tools are quite similar.
Why is mobile app development so popular?
The field of mobile app development has grown steadily over the past few years. Almost everyone on the planet has a mobile phone, so the user base is massive. These days, you can find an app for almost anything.
There are quite a few paths you can take if you want to create a mobile app.
You could choose to go down the native route, which would mean using Swift to create mobile apps or Kotlin to create Android apps. These are the official programming languages Apple and Google use, respectively, so you can expect first-party support and frequent updates.
Alternatively, you could choose to go down the cross-platform path and use Flutter or React Native. Typically, a native developer would use Xcode and Swift to build iOS apps and Android Studio and Kotlin for Android apps. These tools are applicable for cross-platform work.
It’s also quite common for developers to use an integrated development environment (IDE) such as Visual Studio Code.
In most cases, developers tend to use an IDE, Android Studio, or Xcode when building apps with Flutter and React Native. My preference is to use Visual Studio Code for React Native apps and Android Studio for Flutter apps.
Flutter vs. React Native: Demand
At the time of this writing, React Native is slightly more popular than Flutter, thanks in part to React Native’s association with the popular web framework React. React Native has also been around for longer, so its user base is larger.
As such, there is currently higher demand for React Native developers than for Flutter developers. However, that doesn’t mean Flutter is unpopular; in fact, Flutter continues to gain popularity over time.
Android Studio has a Flutter plugin with code helpers, which makes it much easier to write and debug your code. As of this writing, this plugin has about 12 million downloads, which goes to show just how popular Flutter is.
Flutter vs. React Native: Performance
It’s hard to decide whether a Flutter or React Native app has better performance. It won’t be the same for every app; there are many factors to consider, like the type of app, codebase, animations, transitions, app size, layout, data passing, end user’s phone, and more.
Both Flutter and React Native are open source and free to use. Both are well-maintained — as you would expect, considering they’re created by Google and Facebook.
You can test apps created using both frameworks either virtually, using a built-in simulator on your computer for iOS and Android, or natively, on your phone.
If you intend to develop on iOS, the SDK is only available on Apple computers, so Windows users and Linux users are out of luck. However, you can develop Android development apps on any platform.
Both frameworks use hot reloading, making development more efficient since you can instantly see the changes made.
There is some debate as to whether Flutter and React Native are truly native. To be considered 100 percent native, they would need to be written in the language they were designed for; namely, Swift for iOS and Kotlin or Java for Android.
The experience you get when using an app that was written in React Native and Flutter is, for the most part, a native experience. However, React Native uses JavaScript bridges to communicate with the native code, and bridges can slow app performance down.
In comparison, the Dart code that Flutter uses compiles directly to C, which is about as close to native as you can expect. Flutter code does not require any bridges to communicate with native code. You can safely assume that would make for better performance.
To solve the performance issue, React Native’s new architecture replaced JavaScript bridges with JavaScript Interface (JSI). JSI allows developers to directly invoke the native module without using bridges.
The new React Native architecture also allows developers to lazy-load native modules via TurboModules, which can help improve the application startup time.
Both Flutter and React Native are continuing to improve their performance with their developer and community support. But as of now, Flutter slightly wins on performance.
Flutter vs. React Native: Developer ecosystem
Flutter developers tend to refer to the official documentation. However, React Native has several options; for one, the official documentation, or a different platform, the most popular being Expo.
Expo offers more features and customizations, including an integrated icon library, whereas the official React Native docs are more bare-bones.
The React Native ecosystem is more mature and has more users since JavaScript has been around since 1995. Flutter, by contrast, was released in 2017.
React Native has a very active community across social media, but Flutter is no slouch. At the time of this writing, Flutter has more stars than React Native on GitHub.
The numbers are fairly similar across social media, too. Flutter has more Twitter followers than React Native, and while the numbers are close, there are more active Flutter devs on Reddit than active React Native devs.
Both Flutter and React Native have been used in popular commercial applications. Flutter was used to create the apps for Baidu, Groupon, and eBay, to name a few. Meanwhile, the apps for Facebook, Instagram, Shopify, and Discord were built with React Native.
Flutter vs. React Native: Device compatibility
Flutter and React Native both support Android devices with ARM processors and Apple devices from iPhone 4s and onward. Both also support Android and iOS simulators for developing apps.
Apple devices require iOS 9 and above for Flutter apps, and iOS 11 and above for React Native apps. Android devices require API level 19 (Android 4.4) and above for Flutter apps, and API level 23 (Android 6.0) for React Native apps.
The minimum supported version for Expo-based React Native apps is Android 5 or iOS 10 and above.
Practical example: Developing an app with Flutter and React Native
To demonstrate building an app using Flutter and React Native, we’ll run through an example.
Our example app is called Social and has two screens. The iOS and Android versions look identical.
Should you use Flutter or React Native?
There is no clear winner here; both Flutter and React have their pros and cons, and the right choice will depend on your experience and the goals and requirements of your project.
If you already know JavaScript, writing mobile apps in React Native is a no-brainer. However, if you’re looking for better performance, stability, and a more cohesive environment between ecosystems, you should consider giving Flutter a try.
To see how React Native stacks up against Xamarin, another popular cross-platform mobile framework, check out Xamarin vs. React Native.
