By: James Walker
Hybrid mobile development frameworks build apps for both Android and iOS from one unified codebase. This cuts development time and lowers costs, as you no longer need separate platform-specific engineering teams.
Flutter and React Native are the two most prominent hybrid mobile toolkits. But with each possessing compelling advantages, it can be hard to choose between them.
This article compares Flutter and React Native by assessing their development experience, performance, popularity, and communities, so you’ll be able to make an informed decision when you start your next mobile app project.
Ease of Development: React Native
React Native was launched in 2015 as a mobile implementation of the leading React JavaScript library. While standard React only targets web technologies, React Native lets you use similar techniques to create native Android and iOS projects.
This immediate familiarity helped React Native get off to a strong start. If you know JavaScript, you can put together a simple mobile app with React Native. You might even be able to reuse code from your existing web projects.
React Native uses declarative rendering and supports the JSX XML-like view language that also features in React. The framework bundles a set of common interface components, although these don’t attempt to mimic the native Android or iOS controls.
Flutter arrived in 2017 as a Google project promising scalable cross-platform mobile development. It offers a batteries-included approach and comes with a comprehensive set of Material UI-themed components for building your interface. It uses declarative rendering, like React Native, but relies on the Dart programming language instead of JavaScript.
Dart is a compiled object-oriented language that supports strong typing, rich collection features, and convenient async operations. It’s powerful, safe, and fast, but avoids being overly verbose: simple Dart code can look similar to basic JavaScript. This means Dart is easily learned, even if your background isn’t in compiled code or mobile apps. React Native can be configured to use TypeScript, a superscript of JavaScript, but this only adds types without any of Dart’s other benefits.
Flutter’s compiled development approach does have some drawbacks. Compiling code takes time and can slow you down as you work, although integrated hot reload helps to mitigate this problem. Establishing a functioning Flutter development environment can be fiddly too, whereas React Native’s bridge over the native platform lets you use tools like Expo to rapidly scaffold new projects and build them in the cloud.
Flutter and React Native both focus on relatively low-level app operations such as UI and native interactions. You’ll need external integrations for functions such as checkout and payments, using tools like Rapyd.
Overall, both SDKs offer everything you’d expect of a modern development experience. React Native will be more familiar to web engineers, while Flutter brings you closer to the native platform. This can increase complexity when you need to individually code sections for each platform, but it also gives you more power when you need it.
Performance: Flutter
Flutter leads in the performance arena. Dart compiles to native code ahead-of-time (AOT), whereas React Native runs a JavaScript bridge on top of the native platform. Apps written in Flutter consequently perform faster than counterparts created in React Native.
That’s not to say React Native is slow. The framework is used by countless major mobile apps, including Facebook, Microsoft apps, Pinterest, and Discord. It’s designed to easily attain 60 fps, and the documentation provides detailed information on how to maximize performance. In many cases, apps built with either SDK run indistinguishably from “true” native apps. However, Flutter will win the benchmarks when you’re rendering complex interfaces with a high degree of interactivity and animation.
Flutter and React Native both slow down during development. React Native loses efficiency when it has to produce useful warnings and errors. Dart switches to just-in-time (JIT) compilation when Flutter is in dev mode, meaning code is only compiled right before it’s used, but this can still make you wait when large sections of your code are changed.
Popularity: Tie
Both toolkits are deservedly popular—you almost certainly have a mix of Flutter and React Native apps already installed on your phone. Flutter powers several Google apps and major names like eBay, while React Native lies behind favorites including Pinterest and Skype.
React Native’s appeal mainly comes from its position as an early entry in the field of cross-platform mobile SDKs. React was already a popular and well-established library at the time Native emerged. Developers were quick to capitalize on the opportunity to build native apps using their existing knowledge.
Meanwhile, Flutter has seen extraordinary growth over the past few years, with some months recording a 10 percent uplift in developer count. Its GitHub repository has more forks and stars than React Native’s, indicating the community interest it’s attracted. Flutter’s popularity can be attributed to the platform’s comprehensiveness, strong performance, and backing by Google.
The March 2021 release of Flutter 2 was a tipping point as the SDK gained support for desktop operating systems, web browsers, and embedded devices. Whereas React Native limits you to reusing portions of your web code in your apps, Flutter now targets every major platform from one cohesive codebase. This is proving to be a winning formula.
Documentation: Flutter
Developer technologies are next to useless if they lack clear documentation on how to build your project. Whether you’re just starting out and want a beginner’s guide or you’re an advanced dev seeking gritty API details, detailed documentation can be the difference between solving a problem in an hour or a minute.
The good news is that both projects have dedicated documentation microsites. Flutter edges ahead, though, because its information is contained under a single heading that’s accessed from a “Docs” link on the homepage. Once you’ve reached the docs, content is clearly segmented into logical categories that take you through getting started, running a sample, building your app, and then testing and deploying. Flutter also provides a detailed set of video tutorials and a cookbook of common patterns. These help you to hit the ground running.
React Native’s docs feel a little less consistent. Confusingly, the documentation is accessed from the “Development” menu on the main website. It’s grouped into four main sections—guides, components, APIs, and architecture—but these are not always closely followed. All the articles about React Native’s new architecture are grouped into the “Guides” section, for example. The learning pathway is less clear overall, and visual learners may be disappointed that there are no official videos.
Community: Tie
There are strong communities around both technologies. React Native’s is arguably more established as the older project.
Flutter has seen an influx of new developers over the past couple of years, but many of them are still relatively inexperienced. However, the project’s maintainers are actively stimulating the community through organized meetups as well as official groups on Discord, Slack, Stack Overflow, and other platforms.
React Native’s community can be found across many different platforms, too. However, these instances are usually managed independently of the main project. There are no officially organized meetups and no developer forums. Most discussion takes place off-platform on sites such as Reddit and third-party Discord servers. However, once you’ve reached the community, you’ll find it’s active, committed, and filled with expertise.
Industry Trends: Flutter
React Native is not going away anytime soon. It’s been established for nearly eight years and is highly popular among those who use it. It powers some of the biggest mobile apps, such as Facebook and Microsoft Office. React Native talent is in constant demand, so you should have few issues finding new opportunities.
Nonetheless, it’s Flutter that’s currently setting the future direction of mobile development. Since pulling ahead of React Native in 2021, Flutter’s rise has continued to surprise. Analysis of Stack Overflow activity shows there’s now much more interest in Flutter than React Native.
Image courtesy of Stack Overflow
With support for mobile, web, and desktop platforms, a fully fledged set of components, and the backing of Google, Flutter is positioned to attract even more developers over the next few years. React Native might give you better job prospects today, but it’s likely Flutter will be the more sought-after choice over the next decade.
Quick Reference: Comparison Table
| Characteristic | Flutter | React Native |
|---|---|---|
| Programming language | Dart | JavaScript (TypeScript optional) |
| Native operating method | AOT compilation to native code | JavaScript bridge atop the native platform |
| Release date | May 2017 | March 2015 |
| Platforms | iOS, Android, desktop, web | iOS, Android, and additional unofficial targets including Windows, macOS, and the web |
| Built-in UI components | A complete implementation of popular Material UI widgets | A set of basic UI components in a custom style |
Overall Winner: Flutter
Flutter and React Native are the two most popular frameworks for cross-platform mobile app development. They let you write code that’ll run on both Android and iOS, so you can reduce your app’s change lead time and stop duplicating engineering resources.
React Native is a proven technology with a healthy development community. It’s easy to get started with, especially if you’re already using React for your web applications.
Flutter is a younger solution, but it’s already overtaken React Native to become the more popular SDK. It’s easy to learn, supported by the safe and strongly typed Dart language, and is often more performant than React Native. For many developers, it’s now the preferred approach for building mobile apps, particularly when you don’t need the possibility of JavaScript code sharing with your existing web assets.
You’ll still need other tools to support your build, regardless of which framework you choose. React Native and Flutter are focused on your app’s core functionality; although some UI components are included, you’ll want to add external packages and third-party platform integrations to quickly implement complex functionality. For fintech services such as payments and payouts, try Rapyd, on a mission to liberate global commerce and help you accept and move money globally. It provides all the tools for taking local payments and handling foreign exchange across hundreds of countries, online and within mobile apps built with tools.
Get help and post any thoughts or related questions here in the Rapyd Developer Community forum or in the Rapyd Developer discord.