React Native is a trending technology, consistently growing in popularity.
However, more and more competitors are joining the mobile development race to steal some of React Native’s spotlight.
One such competitor that has been rising to prominence lately is Flutter.
With that in mind, we decided to use our expertise in both of these technologies and write a follow-up to the comparison of React Native and Ionic we published a while back.
Read on to learn how React Native compares to Flutter, what the pros and cons of each are, and which is better for your mobile app.
Quick summary
We know you’re pressed for time, so let’s try to answer the question at the heart of this article right off the bat.
Which technology is better to build your mobile app in: React Native or Flutter?
Unsurprisingly, answering this question is more difficult than it may seem. Each framework brings something different to the table and your choice should mostly depend on your individual needs and precise requirements of your software project.
Before picking one option over the other, ask yourself:
- Does your development team have experienced JavaScript developers?
- Do you care about building your app’s GUI using native UI components?
- Should your app look the same across different platforms?
If your answer to any or all of these questions is “yes,” then you should probably go with React Native. Your current JavaScript developers will be able to get the hang of the new technology quickly, without having to learn Dart—a language likely foreign to them. Also, you will be able to leverage React Native’s use of OEM widgets to make your app look different on each platform. Both of these points are valid and connected to your specific business circumstances.
But if your development team is mostly experienced in object-oriented languages like Java or C#, then Dart seems like a more natural fit for them. Also, if cross-platform, brand-first design is a priority for you, then Flutter’s goals align with yours. The framework has been putting great emphasis on this since day one, and based on my experience, it’s much easier to customize the design exactly how you want it across multiple platforms with Flutter than React Native.
However, there is one last key question you should ask yourself: are you an early adopter?
Flutter is still a very young framework, suffering from many growing pains. Not many apps use it, and the community support could be much better. Since it’s so new, picking it now is simply risky. A lot of fun for your developers, but potentially costly for you.
Therefore, if you’re looking for a concrete answer to the big question, for this final reason alone we recommend: choose React Native. Wait a while before trying out Flutter. At this point, it’s just a smarter business decision.
Goal of this article: React Native vs. Flutter
If you’re reading this, it means the TL;DR didn’t exhaust your curiosity. That’s awesome. Let’s continue.
The purpose of this post is to exhaustively compare React Native and Flutter—2 similar technologies you can use to build cross-platform native mobile applications.
React Native is well known to tech-oriented individuals, among others, thanks to its continued presence on the market and deep adoption in the community. Most of the time, when people think about mobile apps with a single codebase between platforms, React Native is the first thing that comes to their mind.
Flutter has yet to achieve such recognition, but it’s quickly making a name for itself by introducing plenty of changes to the way mobile apps are built. In several aspects, it already seems more mature than React Native, even though it’s much younger than its counterpart.
Essentially, the great tech battle between React Native and Flutter is a clash between Facebook and Google, the respective developers of these 2 frameworks.
This is nothing to complain about. Quite the opposite, such rivalries drive innovation and are a great contribution to the overall quality of tools developers can use.
Setting the stage: from web development to mobile development
Not too long ago, the web was the most important channel to release your software product on.
To reach their clients, companies would write a website in a consistent tech stack (HTML, CSS, JS) and worry mostly about making it compatible with various browsers. The chief concern was making it look the same across the board, regardless of the system or browser.
That isn’t the case anymore.
Times are changing and companies are directing their focus to making the mobile app the main access point to their product. The vast majority of users always carry a smartphone on them, allowing them to open any app with a single tap.
Access to all the native phone functionalities—accelerometer, push notifications, or running in the background—is a huge advantage of mobile apps.
But there is no rose without a thorn. While you only need one development team with web technologies expertise to create a web app, the world of mobile apps is divided into 2 main operating systems: iOS and Android.
Each of these systems has a completely unique tech stack. Creating 2 separate apps that serve the same purpose, only on different platforms, may prove too costly—especially for startups or companies with a limited budget.
There are many solutions to this problem:
- Progressive Web App,
- hybrid app,
- cross-platform native app.
The last of these 3 is currently the most widely adopted on the market.
We have React Native to thank for that; the framework has lowered the entry point for creating cross-platform native apps and enabled many web app developers to move on to mobile app development.
Yet every niche that proves its merit as an attractive market solution will inevitably face competition in the form of alternative technologies.
Flutter is the most recent technology of this kind. Even though it solves the same problem as React Native, it does so in an entirely different way.
What programming language does React Native use?
React Native is powered by JavaScript, one of the most popular programming languages in the world.
Beside mobile apps, JavaScript can be used to build:
- desktop apps (Electron),
- backend apps (Node.js),
- web apps.
High popularity and standing on the market are indisputable advantages of JavaScript. It’s the reason why a great number of developers who create web apps know the language well enough to find getting into mobile apps relatively easy—there’s no need for them to learn a new language.
Take a look at the 10 most popular programming languages according to the TIOBE ranking below.
As you can see, JavaScript took the 6th spot, ahead of languages like C# or PHP.
What programming language does Flutter use?
While React Native is backed by a very popular language, Flutter is an entirely different story.
Flutter uses Dart, a language that hasn’t yet been adopted on the market that widely.
There is a low chance your developers will know Dart even on a basic level, mostly because so far the technology hasn’t been used on the commercial market on a mainstream scale.
However, this shouldn’t pose major problems, since the syntax of Dart is intuitive and resembles a combination of other programming languages, such as Java, JavaScript, or C#.
Dart is an object-oriented, strongly typed language that enables 2 critical functionalities:
- Just-in-Time (JIT)-based fast development cycle, allowing for hot reloading in a typed language;
- Ahead-of-Time (AoT) compiler that writes efficient ARM code for production builds.
We also shouldn’t forget that both Flutter and Dart are being developed by Google. This gives the tech giant the ability to grow the language precisely the way they wish to see it applied in the framework.
I recommend following the TIOBE ranking and paying attention whether Dart is gaining popularity, especially in the context of Flutter’s market adoption, since the framework can be seen as the language’s main driving motor.
Comparing JavaScript and Dart
The greatest advantage of JavaScript is the high probability your developers already have experience in it.
Conversely, what many see as a flaw of the language is that JavaScript apps often aren’t written in pure JavaScript. Rather, these apps are either built in TypeScript or Flow.
TypeScript changes the language into a more object-oriented and typed one, while Flow operates on a similar basis. The solution isn’t out-of-the-box, and to make matters worse, we have to make an additional choice which road to take.
When it comes to Dart, its greatest disadvantage is the low popularity it holds. This means worse support, smaller community, and fewer ready-made solutions.
However, Dart compensates for that by being a comprehensive language that doesn’t require extra abstraction layers to make a typical object developer feel like home.
All in all, though, I can tell you from experience that the language is just the language; you can learn any syntax or patterns governing it very quickly if you put your mind to it.
Ecosystem and adoption of React Native
React Native is mature and has a long market presence—July 2015 was the framework’s 1st release.
As reported by AppBrain, 2.09% of apps launched less than 30 days ago use React Native:
Because of its maturity and relative longevity, React Native has spawned a huge ecosystem of tools and libraries that make development simpler and easier, while also making the framework nicer to use.
This is illustrated well, especially compared to Flutter, by Stack Overflow Trends:
With React Native, your developers can use virtually any editor or IDE they feel the most comfortable with. All they have to do is install the right plugin to get it to work.
In addition, most of the business requirements that demand access to native modules are already covered by third-party React Native packages provided by the community.
Ecosystem and adoption of Flutter
Flutter hasn’t been on the market nearly as long as React Native. Its 1st release was May 2017, while the 1st fully stable version was released only in December 2018.
AppBrain reports that 0.61% of apps released within the last 30 days use Flutter:
Flutter may be young, but its ecosystem is rapidly expanding, to no one’s surprise.
The quality of the solutions the framework offers also keeps on improving, mostly thanks to new functionalities being added to existing modules.
The Google Developers Blog clearly demonstrates the rise in Flutter’s popularity:
Plenty of open-source packages for Flutter are being developed, tasked with solving recurring project challenges, such as map and sensor maintenance or full support for Firebase services.
It’s safe to say that the year 2019 will verify whether Flutter is going to hold its own. We’re also likely to see a much stronger community build around the framework.
Examples of apps written in React Native
React Native has been around for a while now and enjoys strong support from the community.
Because of that, some real heavy hitters like Facebook Messenger, Instagram, or Uber have incorporated React Native into their tech stack.
AppBrain gives us a neat overview of these apps:
Examples of apps written in Flutter
Understandably enough, the same can’t be said for Flutter.
Beyond Alibaba and Google Ads—and Google using their own solution is far from shocking—the framework doesn’t exactly have much to boast about just yet.
Let’s take a look at AppBrain again:
Comparison: graphical user interfaces of React Native and Flutter
The way both frameworks solve the issue of designing and presenting the graphical user interface (GUI) is one of the key differences between them.
GUI of React Native
React Native works by relying on a given system’s native UI components, also known as OEM widgets, or original equipment manufacturer widgets.
Depending on the platform used to run a React Native app—iOS or Android—the screen will display native UI elements the users are familiar with from other apps.
This gives React Native apps a thoroughly native look and feel.
GUI of Flutter
Flutter doesn’t use native system components. Instead, it offers a set of its own custom widget catalog, rendered and managed by the framework’s graphics engine.
2 groups of elements are supported: Material Design and Cupertino (the latter was naturally inspired by iOS). It’s up to your developers to decide which of the groups better fits a particular application.
However, it’s worth mentioning that Material Design at the moment contains a lot more widgets, mostly because it was created by Google, while Cupertino is still under development to provide a broader scope of available components.
Does React Native or Flutter have better GUI?
It’s impossible to decide whether either approach to GUI is good or bad.
The only clear disadvantage of Flutter I can think of is that the user doesn’t have the ability to use well-known and widely recognized UI components.
Beyond that, a Flutter app looks the same on both iOS and Android, as well as different versions of the underlying operating system.
One possible advantage of Flutter over React Native in terms of GUI may be greater attention to visual detail. Since Flutter is meant to drive pixels instead of built-in system widgets, it seems to be the better fit to reflect pixel-perfect design.
Your expectations for the mobile app you want to build should determine your choice of framework just as much as the actual differences between React Native and Flutter.
If you want the design of your app to rely on native UI elements, Flutter simply won’t be the right pick for the job.
There are ways to embed native system widgets in Flutter, but it’s not the default development path and you lose a great deal of benefits the framework offers in the process.
Comparison: documentation of React Native and Flutter
When choosing the target technology for your software project, it’s crucial to consider the aspect of its documentation.
The documentation is an official document we usually work with when we wish to learn how a given functionality works or what configuration options a given mechanism includes.
Unlike individual posts scattered across multiple platforms (like blogs) that become outdated over time, the documentation is always up to date and should be treated as a reliable, singular source of truth.
Documentation of React Native
Despite React Native’s longer market presence and better market adoption, its documentation isn’t very inviting or easy to use.
The way the elements are organized seems a bit chaotic. Finding exactly what you’re looking for is also difficult, since it isn’t clearly indicated which components of the framework are still supported and which are already deprecated.
Documentation of Flutter
Even though Flutter is a young framework, it boasts an extensive and comprehensive technical documentation. Among others, it offers:
- API reference with a detailed and low-level description of Flutter’s specific components;
- complete list of official tutorials providing an in-depth coverage of the core elements of mobile apps, such as building layouts, interactions, navigation, animations, and many more;
- best practices for testing and debugging your app;
- technical overview of the framework itself, along with an FAQ section;
- manual on building and releasing production builds, including Continuous Deployment with fastlane;
- useful resources to help your developers learn Dart;
- backend support for Google’s tech stack, especially Firebase;
- migration guides for developers of different platforms, like React Native or the web.
All of this can work wonders for your development speed, if leveraged correctly.
Does React Native or Flutter have better documentation?
The documentation of React Native isn’t bad per se, even with the slightly confusing structure and unclear support indication. I work with it on a daily basis and in the vast majority of instances it gets the job done well.
However, after using Flutter’s documentation for a while, I get the impression that it’s far more detailed and describes certain aspects of the framework more thoroughly than React Native’s documentation. Simply put, more issues are tackled.
This is partly because Flutter strives to be a kind of a “full-stack framework” that delivers far more built-in functionalities than React Native. Examples here include navigation, translations, or the whole range of ready-made UI components.
Comparison: performance of React Native and Flutter
Both React Native and Flutter are powered by native-like performance that aims to provide constant 60 frames per second.
As far as the end-user perspective is concerned, distinguishing whether your application was written using a native technology or a cross-platform framework is next to impossible.
This is arguably the strongest reason for building your software as a cross-platform native app. If you can get a product of highly comparable quality, but with the advantage of a single codebase, why not bet on it?
Performance of React Native
The performance of a React Native app stems from 2 main factors:
1. UI components are compiled into pure native equivalents (native code) and ran in the main thread, also known as the UI thread.
This function is responsible for iOS and Android rendering. For example, the ScrollView widget is ran completely in this thread. The result is a smooth scrolling experience, even when the business thread gets locked.
2. All the remaining code doesn’t get compiled, instead being run in a separate JavaScript thread.
That thread is where all the business logic of your app resides. Running the API calls, handling touch events, and managing the app’s state all take place here.
Also noteworthy is the fact that even though React Native uses JavaScript, it isn’t run in WebView. This gives React Native a massive performance boost compared to technologies like Ionic or Cordova, especially in more complex apps.
Performance of Flutter
Flutter approaches performance a bit differently than React Native.
The framework’s engine is Ahead-of-Time compiled into a native ARM library using the Android NDK and LLVM with the Dart code, both for the devkit and our app.
In fact, the whole application is compiled into native code. You can access native modules directly, without any kind of bridge between Dart and native code.
This process of compiling everything into native code is exactly what brings Flutter one step closer to native applications from the perspective of performance.
Does React Native or Flutter have better performance?
It would be very difficult, if not impossible, to pick one of the frameworks and say it performs better than the other every single time.
Performance is a tricky factor. It depends on a great number of widely different aspects:
- What device is running your app?
- What operating system are your developers working with?
- What code quality are your developers delivering?
What’s more, there simply are no 2 identical apps written in React Native and Flutter complex enough to benchmark and prepare a comparative report.
Personally, though, I don’t think it’s necessary. Both technologies are high-performing and work great, so I don’t see performance alone becoming a bottleneck.
Final thoughts on Flutter and React Native
Thank you for reading our comparison of React Native and Flutter. We do a lot of mobile development at STX Next, especially in React Native, so it was very satisfying for us to share some of our expertise with you.
2 of our React Native projects fill us with a particular sense of pride: Deuce Tennis and Zappi. We highly encourage you to check them out in our Portfolio.
If you’d like to learn even more about React Native, we have 2 more resources that are likely to grab your attention:
And if by any chance some of your questions regarding either React Native or Flutter have gone unanswered in this article, feel free to leave us a comment below and we’ll get right back to you!
