Flutter and React Native are two leading tools for cross-platform mobile development. Learn about their differences and the best use cases for each.
Flutter is a user interface (UI) software development kit released by Google in 2018. Flutter lets you build cross-platform applications for a number of platforms.
React Native is a mobile development framework created by Facebook and released in 2015. You can use React Native to develop a cross-platform app that runs on mobile, web, and desktop.
Flutter renders all components on its own canvas.
Because of that, component updates (to, for example, iOS 14) don’t have any impact on Flutter apps but do on React Native apps.
Depending on where you’re standing, this can be a good or bad thing. For example, if you want your components to stay exactly the way you want them to, Flutter’s approach will satisfy you. But if you want your app to “catch up” with the latest native component designs, then React Native’s the way to go — in React Native this update happens automatically and is free.
To include the latest native component updates in Flutter you’d have to update the app manually.
As of May 2021, Flutter is getting closer to overtaking React Native in terms of popularity and usage. But let’s look at the stats.
Interestingly, in 2019, Flutter was almost at the bottom of the popularity contest. So the technology is catching up quite nimbly.
But a look at Google Trends results reveals a fiercer battle between the two.
After gaining on React Native for over two years, in April 2020, Flutter became a more searched query globally and continues to be so in 2021.
And yet, in the US, the battle still goes on and is as fierce as ever, with axes and gunpowder spoiling the air galore.
Statista seems to confirm the global trend in the Flutter vs. React Native battle. In the survey made with almost 20,000 respondents, Flutter was going head to head with React Native in 2020.
So the question whether Flutter will overtake React Native most likely depends on what Flutter has to offer that React Native either doesn't have yet or isn’t likely going to match.
So which one is easier to learn Flutter or React Native?
From a developer’s perspective, Flutter is easier to learn than React Native.
Then there’s React Native as a framework itself. It’s not to say React Native is a bad framework — in fact, lots of great apps have it in their stacks. But without being familiar with some nuances, you can waste long hours trying to solve problems when configuring the developer environment.
Because of that Flutter placed third in the “Most Loved Tools” category in the Stack Overflow Survey 2020.
Flutter also has a command line interface (CLI) that ships with tools such as Flutter Doctor, which helps set up your chosen IDE and iOS or Android development. Flutter Doctor looks for tools installed on the local machine and checks their configurations. Flutter CLI paired with Flutter Doctor makes preparing the environment for a new Flutter mobile app a lot smoother.
Setting up React Native calls for a bit more experience. React Native’s getting started guide doesn’t provide as much detail and help to start a project. However, React Native has Expo. Expo is a set of tools that makes it much easier to build React Native apps.
With Expo client, you can view your apps as you build them directly on your mobile phone (no need to go through Android Studio or XCode). Expo CLI facilitates the creation of new React Native apps by providing tools for development, logs, deployment, iteration, compiling, etc.
Flutter doesn’t rely on a bridge. Instead, Flutter’s core graphic machine, Skia, compiles the UI to native code as the user interacts with the app.
But there’s a new tool coming to the rescue for React Native debugging — Flipper.
In Flutter, debugging is easier with the aid of tools that support development in Android Studio and Visual Studio. DevTools (known from the Chrome browser) and OEM Debugger make it help developers catch and understand errors. There’s also Inspector, which lets you check the visual layer of the app and why it looks the way it looks.
React Native’s ecosystem is huge, much bigger than Flutter’s. This is mainly thanks to the node package manager (npm), a repository of packages. As of April 2020, there are over 1.3 million packages hosted on npm.
Flutter/Dart’s pub-dev repository is a dynamically growing repository, but one that’s still young and without as many ready-made solutions.
However, when we look for repos on Github, a quick search reveals that the ecosystems of both technologies are similar in size.
The maturity of a technology is often reflected in wide and positive adoption as well as long-term support. React Native has a lot of high-quality third-party libraries and has been incorporated into tech stacks of major brands.
Flutter is catching up fast, though, and we can say that both technologies have matured enough to be safely used in production.
Even though React Native’s been around much longer than Flutter, Flutter’s documentation is more developed, in-depth, and easier to navigate than React Native’s.
For example, in Flutter’s documentation, there are “get started” sections for developers with different technical backgrounds and levels of experience.
So React Native devs looking to start working with Flutter or web developers wanting to learn how to arrange components in a mobile application can easily find what they need.
React Native’s documentation lacks the same level of topical organization and depth.
However, there’s a ton of topics on Stack Overflow and Reddit, where developers help each other with many complex problems.
Both Flutter and React Native have flourishing communities around them, with plenty of conferences, hackathons, and events happening annually.
The size of the community and communication channels where you can talk to experts and get help solving your development question can’t be overstated.
Here’s a more detailed comparison of the most popular communication channels for each tool*:
You can write mobile apps in good ol’ notepad if you want to. But it’s a lot more pleasant and efficient to develop in a dedicated integrated development environment (IDE), with built-in debuggers, code editors, build automation tools, compiler, and other handy development tools.
Flutter lets developers choose their IDE, e.g., Android Studio or Visual Studio. In React Native, you can use Visual Studio or WebStorm, for example. For developers who have some experience with native Android development working in Flutter might feel easier because they will be familiar with Android Studio, which is very developer-friendly.
React Native lets devs build apps for iOS and Android, and the web via React. Recently, Microsoft has unveiled a great project where desktop apps can be written in React Native (for both macOS and Windows).
With Flutter, you can write apps that run on macOS, Windows, Linux, Android, iOS, web, and embedded systems (e.g., infotainment systems in cars).
Flutter 2 comes with a promise of a truly cross-platform development capability, with the SDK letting developers share code between all compatible platforms.
Hot reload is an ultra-convenient feature for developers that lets devs reload the app and look up changes in the UI.
React Native’s counterpart of hot reload is Fast Refresh, which basically does the same thing as Flutter’s Hot Reload.
The downside of either version of the feature is that advanced changes in the code (e.g., changing a stateless widget to a stateFull widget) can’t be hot reloaded. Complex changes require app recompilation.
React Native powers a number of globally renowned brands:
Extremely fast prototyping of apps that don’t require the newest native features. Native development is much, much longer.
Hot reloading, included in React Native and Flutter, gives developers quick feedback about the changes in the layout — whenever you change something, you can check how it’ll look like in the app without having to recompile the app. This greatly speeds up the development process.
Note: Hot reload is also supported by native Android and iOS, but the functionality is limited compared to that of React Native and Flutter.
Slight overhead when adjusting cross-platform apps to OS updates (either iOS or Android). Native apps are updated automatically.
With native app development, achieving great app performance is easier.
Also, implementing pixel-perfect designs in native apps is simpler. However, this requires you to do the implementation for both platforms separately, which adds time/cost to development. On a side note, Flutter’s components (e.g., buttons or textField) are highly configurable, which lets you tweak the design and achieve pixel-perfectness too.
Some new features available on iOS and Android natively are much easier to implement in native apps.
Learn more about how native mobile app development compares to cross-platform development.
The answer to this question isn’t as simple as a mere yes or no — the key lies in project type and context.
In skilled hands, both React Native and Flutter can be used to build great apps with close-to-native performance and feel.
But when choosing either technology, you’ve got to look at it from a wider perspective than just technical benefits and drawbacks.
For example, after outsourcing development, will you be able to complete a team of Flutter devs to maintain and evolve your app?
React Native and Flutter are great for fast prototyping and simple mobile apps. However, when building enterprise-grade mobile applications where pixel-perfect designs, top-of-the-top performance, and instant implementation of native functionalities are key requirements, then native development might be a better choice.
That's not to say Flutter or React Native can't be successfully used in large and complex applications. But you need to be aware that both technologies could generate overhead in the long run. For example, in 2019 Airbnb migrated from React Native to native development due to the volatility of React Native's ecosystem, difficulty to recreate bugs, and the need to write bridges for platform-specific functionalities.
Always look at the technology you want to include in your tech stack from a broad and long-term perspective where tradeoffs and benefits are thoroughly cross-analyzed.