Flutter and React Native are two leading frameworks for cross-platform app development in 2022. They separately originated from tech giants, Facebook and Google. By allowing developers to leverage the same codebase to build cross-platform apps, building mobile, desktop, and web apps now requires less time and effort.
The frameworks have gained repute by powering the world’s biggest apps, from Instagram to Facebook. Professionals can build outstanding products using Flutter or React Native, but the approaches and limitations differ. Which is better for your project? Find out in our comprehensive guide.
Flutter: Pros and Cons
Google released its framework in 2017. In 2021, it overtook React to become the most popular cross-platform kit. Flutter has been adopted by giants like Alibaba and Toyota.
This framework is based on Dart, an object-oriented language, and its graphic rendering engine is written in C and C++. In this ecosystem, everything is a widget, and the grouping of the widgets creates the UI. These building blocks can be themed according to Material (Android) or Cupertino (iOS) design principles.
In addition to mobile, the latest release supports Windows, Mac, Linux, and web. Unlike other frameworks, Flutter does not attempt to imitate native SDKs. Instead, it relies on its own 2D rendering engine (Skia) for widgets. As this diagram shows, it supports animation and gesture recognition:
- Hot Reload
One of the best things about Flutter is speedy development. Changes to the single codebase can be made on the fly and viewed in the app immediately — in milliseconds. Developers integrate and modify features, fix bugs, and run experiments with unparalleled flexibility. Hot Reload also streamlines their collaboration with designers.
Aside from Android and iOS, Flutter also supports Windows, Mac, Linux, web apps, and Fuschia — Google’s upcoming OS that will be the default on Google’s devices. Flutter 2, announced in March 2021, adds smart home gadgets, TVs, and even automobiles to the mix! According to Google, it provides “the most pervasive and portable experience for an ambient computing world.”
In addition to the reusable code base, Flutter comes packed with a powerful suite of bundled Material and Cupertino widgets, shortening the time it takes developers to build a functional UI and reducing reliance on OEM widgets. Developers can recreate a uniform appearance on iOS and Android or build unique native-looking apps for each platform.
With Flutter 2, web support has become stable. Developers can now build progressive web and single-page apps or expand mobile apps to browsers.
- Less automated testing
Code reuse means reduced unit and widget tests to confirm the correctness of functions or appearance and performance of widgets meant to run on multiple platforms. Flutter accelerates Quality Assurance and requires less effort from software development teams. Compared to native programming, they need half as many automated tests on average. However, the number of integration tests with real devices or emulators may be similar.
- Faster apps
- Impressive designs
Flutter was created with painstaking attention to deliver visually striking and pixel-perfect experiences. Its rendering engine draws custom widgets on a platform-provided canvas instead of relying on native system components. Anything is possible, making it suitable for branded designs. Developers can also build their own widgets or customize the existing ones.
- Same UI on new and older devices
A Flutter app on Android 8.1.0 will look the same as on Android 5.1.1. Developers have one less thing to worry about!
- Perfect for Minimum Viable Product
With MVPs, companies validate their ideas and gain feedback from early adopters. This lets them polish their apps to avoid expensive failure. Developers need minimal time and effort for MVP development on Flutter. Well-designed solutions can be delivered at a relatively low cost.
- Limited libraries
- Big File Size
Apps built on Flutter require more space than native products. The minimum size is 4 MBs, as opposed to 539 KB and 550 KB in Java and Kotlin, respectively. However, this result is not the worst. React Native requires at least 7 MB, while Xamarin takes nearly 15.8 MB.
- Flutter web
React Native: Pros and Cons
Developers can create natively rendering apps for iOS and Android. In addition, the ecosystem supports UWP, Mac, and the web. React Native has been adopted by hundreds of businesses, including Microsoft and Uber.
React Native Pros
- Fast Refresh
Fast Refresh is similar to Flutter’s Hot Reload. It is both a time saver and a productivity booster. Developers insert new code into a running app and see the changes instantly, without rebuilding.
They need not worry about losing the app state, either. Files are compiled and read from the point where changes were made.
- Multiple platforms
Like Flutter, React Native supports both Android and iOS, along with web, Windows, and Mac. Developers also build apps for Universal Windows Platform — all Windows 10 devices, including tablets, Xbox, and mixed reality gadgets. Mobile code is shared with web apps through abstraction layers.
- Stable growth
Hybrid apps built with React Native are fairly similar to native apps. However, their features are more stable and consistent. Framework components adapt to the platform on hand, so developers do not go into its details.Stability translates into fewer distractions. It also streamlines planning and feature upgrades after app release.
- Rich Ecosystem
- Integration with Native Apps
React Native views can coexist with native views in the same app. This means developers can lower their costs by writing specific views non-natively. Existing native apps can also be rewritten for other platforms. The step-by-step approach reduces the probability of error.
As an older framework, React Native is more stable. Facebook has already polished its API. The community is active and packed with libraries, tutorials, and UI frameworks. Beginners have a wealth of content and tech aids at their fingertips.
Finally, the framework is part of the immense “React family” that includes other tools and services built to streamline the development of React apps. For example, developer teams may still need to have native developers for some native implementations despite most of the code being shared between platforms.
A solution such as the Expo SDK streamlines cross-platform development, deployment, bug fixing, and implementation of native features without teams touching the native code since it comes with native APIs.
Amazon AWS Amplify also provides a set of tools to streamline full-stack development with UI components and serverless hosting solutions for React apps.
React Native Cons
- Not native
Even in the best-case scenario, the look and feel of a React Native app will be similar, but not identical, to native. More space is required. In addition, highly dynamic apps may underperform compared to native languages (more on this below).
- Complicated debugging
- Library drawbacks
Although the React Native collection is enormous, some of these packages are unreliable or completely obsolete. Developers should check the frequency of commits and the number of issues in the repository. Only basic components are supported out of the box. Finally, Facebook needs time to release wrappers for new native elements.
- Apps are bigger than native ones
Flutter vs React Native
While both frameworks support mobile, desktop, and web applications and allow developers to reuse over 90% of the code, the best cross-platform app development frameworks are not ideal for everyone. To compare Flutter and React Native, we have looked at 6 crucial factors:
1. Performance comparison
React Native’s bridge is a bottleneck in the toolchain. It translates JS code to the native programming language of the device and vice versa. The JSON-based communication approach is asynchronous, so more time and resources are required. Developers have to accelerate apps using tools like the Hermes engine.
- Mobile performance
Both React Native and Flutter can achieve animation runtime speeds of 60 FPS. Yet, according to a study on medium.com, Flutter is half as fast as native Android kits — Java and Kotlin. React Native is 6 times slower.These results came from a CPU-intensive test based on the Borwein algorithm. In the Gauss-Legendre (memory-intensive) test, the difference between Flutter and React Native was even more staggering. The former was 15 times slower than Java and Kotlin, while Flutter was just 20% behind native.The same tests on iOS showed similar differences between React Native vs. Flutter. Compiling into the native x86 and ARM code guarantees better results overall. Flutter apps start up instantly and put less load on the device. What’s more, the С++ graphics engine broadcasts images directly to the screen.
- Web performance
2. Design and Graphical Capabilities
Despite different approaches to UI-building, the graphical performance of Flutter vs React-native is similar. Developers create pixel-perfect aesthetics and sophisticated animations with both. However, Flutter is preferable for customized UI. Unique widget-based designs are dynamic and more immersive.
Flutter-based apps have the same appearance on different OS and devices. Their navigation and visual components do not change unless upgraded. Companies can implement a common style for all platforms and save on development costs.
Visual elements created in React Native look slightly different on different OS and firmware versions. It borrows native aesthetic elements like menus, buttons, and navigation. Although its components are similar to Flutter widgets, they are merely wrappers. This means they aren’t always customizable enough. It may take a while for a novelty released by Google or Apple to appear in React Native.
However, its library is still exhaustive in comparison with Flutter. What’s more, basic Flutter apps are more similar to hybrid frameworks. This does not mean that a personalized native feel and appearance are impossible — they only require additional effort.
3. Support and ecosystem
React Native is an older framework with a larger developer community, but the excitement around Flutter is phenomenal. It already has more GitHub stars and will soon catch up with React Native on Stack Overflow, too. The latter currently features around 8,000 more questions about React Native.
This surge in demand is also reflected on educational platforms. Udemy offers almost three times more courses on Flutter and Dart. The audience is nearly twice as big as that for React Native. You can find the exact figures in the chart below:
|Stack Overflow questions||114,746||122,250|
|Github stars||323 + 71||141|
|Number of learners||1,995,404 (Flutter) + 807,284 (Dart)||1,098,528|
|Number of packages||21,441||36,527|
Another important consideration is the number of out-of-the-box packages. While React Native offers a wider choice, some of its libraries are abandoned or unusable. Developers can also find it difficult to select one out of many similar solutions for one scenario.
Documentation is another area where Flutter shines. The content is robust and well-structured, while strong support from the team helps newcomers master the framework.
The React Native documentation is less structured, so developers need more time to find fixes for their issues.
4. Market Trends
In 2021, Flutter became the most in-demand cross-platform framework, outpacing React Native. Over the past 12 months, it has also generated more search traffic. According to Google Trends, the interest in the younger framework is consistently stronger, and this trend is observed worldwide:
According to the 2021 Stack Overflow Developer Survey, more professional developers used React Native (13.35% Vs 16.48%). As a non-web framework, Flutter is second only to .NET Core. It is preferred by 68.17% of respondents, compared to React Native’s 58.08%.
Some of the most successful Flutter apps include eBay, BMW, and Google Ads. Recently, Google Pay has also migrated to Flutter. Most commonly, the framework is used to build apps for:
- Shopping (Alibaba’s Xianyu)
- Social (KlasterMe)
- Finance (Cryptograph)
- Productivity and self-care (Reflectly)
- Parenting (KidSecure).
Many notable apps have tried to implement React Native, such as Instagram, Skype, and Shopify. More examples from major categories as of this writing are:
- Finance (Coinbase),
- Shopping (FlipKart),
- Food & Drink (Uber Eats),
- Communication (Discord)
- Business (Bloomberg).
While React Native has boasted of big names, some dev teams have moved away from the framework due to its various issues. Medium and Airbnb are famous examples that switched back to native implementations. Discord had issues with React Native but chose to stick with it for its iOS app, but they are yet to pursue it for their Android app.
5. Developers rates
According to the Stack Overflow survey, Flutter developers have a lower median yearly salary. In the US, software engineers earn up to $115,000 (Glassdoor data for New York). Meanwhile, experts from Eastern Europe (specifically, Ukraine) expect over 50% less — around $36,500 on average. With React Native, the difference is between $144,000 and under $50,000.
Finding qualified Flutter developers could be problematic. Although Dart is similar to Java and C#, it still differs from conventional web technologies. Junior developers are more likely to embrace it than their seasoned counterparts.
6. Native code integration
React Native may require separate optimization for every platform, which extends the development time. With Flutter, all view layers are rendered like a game, and there are fewer native calls to the bridge. The system for custom code calls APIs in a language that works directly (e.g., Kotlin/Java on Android).
Thus, Flutter does not rely on code writing per se. Rather, it uses a message-passing process. As this diagram shows, platform channels connect the Flutter part of an app to its native portion:
Flutter vs React Native: Which One to Choose for Your App?
So, which is better: React Native or Flutter? Each framework has its strengths and weaknesses. To understand what to choose, developers consider a mix of parameters, from native feel to Flutter vs React Native performance. As every app is unique, the use case on hand is the deciding factor:
When to Choose React Native
This framework will allow you to build a graphic interface using native components. Yet, do not expect a perfectly native experience — no cross-platform framework can provide it. React Native apps are also less performant than Flutter counterparts, and customization can be complicated, as all components are wrappers around native views.
When to Choose Flutter
This framework delivers superior performance and customization. You can build powerful, highly customized apps with complex interactions. With Flutter, you will shorten time-to-market and get a consistent brand-first design.
When it comes to complex functionality, Flutter beats React Native. It is faster thanks to the absence of a bridge. The most important libraries are already available, and the repository is growing fast.
On the downside, achieving a native feel requires more effort, and support for web development is weaker. Finding experienced professionals is also more difficult — learn how to hire Flutter app developers in our guide.
Conclusion: React Native or Flutter
Every app is different. Both open-source frameworks reduce development time and costs. Each of them is good at specific use cases. So, which one to choose?
Our comparison of Flutter vs React Native shows that Google’s kit is more performant and flexible. Attract Group adopted Flutter several years ago. Its global popularity, robust growth, and ease of adoption give us confidence in its future.
Flutter is here to stay, and we are watching its advancement closely. If you have any questions about cross-platform development or need help creating an app, contact us!