Flutter vs React Native: What to Choose in 2022

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:

Flutter Pros

  • 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.
  • Multi-platform
    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
    Dart is approximately two times faster than JavaScript. Thanks to its Skia Graphics Library, Flutter ensures smooth and highly responsive performance with 60 frames per second. Its GPU (graphics processing unit) does most of the work. Every time a view is shifted, all elements whose data is affected are redrawn. This eliminates hanging and cutting while scrolling. It can similarly dispose of widgets with impressive speed.
  • 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.

Flutter Cons

  • Limited libraries
    In terms of library diversity, Flutter still loses to native frameworks. If developers may not find every feature they need, they have to build them. The libraries for JavaScript and Python are bigger.Still, the official repository features over 21,000 packages in total. Pre-set widgets that work out of the box cover most of the mobile app development cycle. The Flutter team is also actively providing support — for example, by responding to GitHub queries.
  • 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.
  • Dart
    The biggest drawback of Dart is that it is a framework-specific language. Although its syntax is intuitively understandable for most programmers, companies may struggle to find new people for their teams. Unlike React Native, which is based on JavaScript, transitioning to Flutter requires learning a new language.
  • Flutter web
    Flutter Web works best for interactive websites with a variety of animations and moving components. In terms of building a standard text-heavy site like a blog, it’s preferable to use static website generators that deliver super-fast sites. Developers may also need to juggle different technologies to embed interactive components into sites written in JavaScript, HTML, or CSS.

React Native: Pros and Cons

React Native is an open-source framework for cross-platform development released by Facebook in 2015. It is based on JavaScript, has a shareable code repository and a rich variety of reusable components. The latter ones are very similar to Flutter widgets.

The new architecture, which is being rolled out, replaces the JavaScript bridge with a Javascript interface. Direct communication to the native layer will be a performance booster:

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
    Developers can use a plethora of JavaScript libraries and tools. Currently, the npm collection features over 36,500 packages, which makes it 30% bigger than the Flutter repository. The sheer number of packages reflects the community’s commitment. Many libraries work across the web and mobile (e.g., Formik and React Router).
  • 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.
  • JavaScript
    JavaScript is one of the most widely used languages. Developers can build web and mobile apps using a rich package collection. The community is immense, and finding an experienced team is not difficult. Javascript works well with other languages, and it even has an object-oriented subset — TypeScript.
  • Maturity
    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
    Debugging an app has not been quite straightforward in React. That’s because IDEs for native mobile development such as XCode do not directly support Javascript debugging. The alternative was to use direct debugging on Chrome’s V8 engine, but some performance issues would not be identified as the app would be running on the computer’s CPU and in an environment quite different from the native device.Several tools have been developed independently to solve the debugging challenges, including the now popular Reactotron debugger published by Infinite Red. React Native 0.62 added support for Flipper. The tool supports remote mobile debugging and allows direct plugin installation without the need to write native code. Still, debugging headaches exist, particularly with complex apps that include native integrations.
  • 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
    As apps must run Javascript code, they need a supporting library. This results in large file size in comparison with native counterparts. For example, even the basic “Hello World!” app weighs around 7 MB. The Facebook team is actively working on this issue.

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

Flutter is the top performer for several reasons. First, it does not need a JavaScript bridge. Secondly, it uses faster binary memory buffers. Communication between Dart and native components is therefore direct and blazing-fast.

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
    Here, React Native has the upper hand. JavaScript is a wildly popular front-end language on par with HTML and CSS. Despite Dart’s recent foray into the web, it does not offer any unique advantages. Mobile apps can be converted quickly with guaranteed speed, but this is merely a nice-to-have feature.

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:

Flutter React Native
Github stars 135k 101k
Stack Overflow questions 114,746 122,250
Udemy courses 135k 101k
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.

Availability of talent is a major factor for time-to-market, and demand causes supply. Currently, indeed.com features nearly 7 times more vacancies for React Native developers in the US. Hiring React Native experts is easier, as it is based on a language most software engineers know. JavaScript also facilitates upskilling from web development.

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

A major advantage of Google Flutter vs React Native is compiling the native code: ARM or x86 native libraries. Facebook’s toolkit is less performant due to its JavaScript layer. It is, essentially, a wrapper over native methods. All native calls are translated into the native API.

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

React Native is an effective framework for cross-platform development based on JavaScript. Like Flutter, it reduces time-to-market. You can hire a team quickly, save on development costs and build an app for all popular operating systems. React Native is also particularly attractive for companies that already have JavaScript developers.

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!

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

5/5
Reviews: 4



Other Articles in Industry Trends & News

Other Articles in Step 3. Improve & Evolve Your Project

Recent Articles

Show all