Eugene Saturow Head of Flutter

    Flutter vs. React Native Comparison: What to Choose to Build a Mobile App in 2022

    So, you’ve decided to build a cross-platform mobile app and now are eager to choose the best framework, hesitating between Flutter and React Native. Which one will provide the best app performance? Which one will allow you to develop the app faster? Is it simpler to find a Flutter or a React Native developer?

    At Surf, we’ve been creating mobile apps since 2011. We know all the ins and outs of mobile app development, including technologies, tools, and business processes. We’ve carried out a detailed Flutter vs. React Native comparison research to help you choose the most reasonable option for your business.

    Flutter vs. React Native: usage and popularity

    First of all, let’s figure out which framework is more appropriate depending on what you need. Also, we will show you some examples of apps made on Flutter and React Native so you can draw your conclusion on the functions and possibilities of both frameworks.

    Use cases: when you might need Flutter and React Native

    To choose the appropriate framework, first of all, ask yourself the questions: what features should your app have? What devices will the app be available for? How many screens should it have?

    To simplify this task for you, we’ve gathered the most frequent use cases and marked the more suitable framework in the chart below.

    Flutter vs. React Native use cases

    To sum up, Flutter is a more appropriate choice in most cases. But if you want to build a game app or an app with AR elements, you should give preference to native app development.

    Category-wise, you can use both Flutter and React Native to develop apps for:

    • mobile banking;
    • social media;
    • messengers;
    • loyalty programs;
    • e-commerce;
    • streaming services;
    • lifestyle (e.g. fitness, productivity, and mindfulness);
    • education;
    • news.

    Flutter vs. React Native usage: Flutter wins.

    Flutter vs. React Native popularity

    There are lots of apps built on Flutter or React Native. I bet you use these apps every day, without thinking about the technology used for their development. Below you’ll find some examples of popular apps built on Flutter and React Native.

    The examples of apps built on Flutter:

    • Google Ads — helps users manage, optimize and track ad campaigns;
    • Grab — the merchant app for the food delivery service;
    • Stadia — a gaming service by Google;
    • eBay Motors — the app for browsing, buying, and selling vehicles directly from users’ phones;
    • Baidu Tieba — the largest Chinese communication platform;
    • KFC DSR — a paperwork-reducing corporate app for KFC built by Surf;
    • The Hole — a YouTube-like streaming platform with more than 16 million subscribers; built by Surf within four months.
    Some screens of The Hole app, which is built on Flutter

    The examples of apps built with React Native:

    • Facebook —  some Facebook components are written with React Native;
    • Walmart — a shopping app;
    • Bloomberg — a business news app with easy-to-access personalized content, videos, and live feeds;
    • UberEATS — a food delivery service;
    • Wix — an app for building and managing websites and mobile apps;
    • Skype — a video conferencing tool.

    The total number of apps built with Flutter and React Native is uncertain. According to Google statistics more than 500,000 apps have been already built with Flutter. But it’s clear that the number of apps built with React Native is much more as it is much older.

    Though it’s hard to say which framework is more popular among businesses, Google Trends shows us clearly that the interest in Flutter is constantly growing. Here are Google Trends search results on React Native vs. Flutter popularity from 2017 to 2022.

    Google Trends: React Native vs Flutter popularity, 2017-2022

    Flutter vs. React Native popularity: no winner.

    Flutter vs. React Native performance comparison

    Both frameworks promise to provide native performance, but let’s be honest: they are anyway slower than native app development technologies. This is a tiny compromise you have to make to minimize development costs and time-to-market. The good news: your audience will hardly notice any differences because both frameworks provide smooth scrolling, animations, and transitions among screens.

    The major characteristic of app performance is FPS — the number of frames rendered per second. The gold standard is 60 frames per second: if this number is achieved, animations and screen transitions are smooth. When FPS declines to, say, 30 — it will be noticeable for a user and can worsen their experience.

    Measurements conducted on different devices have revealed that Flutter and React Native show nearly-native performance when it comes to just scrolling: native iOS and Android — 60 FPS, Flutter — 60 FPS, React Native — 58-59 FPS. But React Native requires more memory of the device and its battery power compared to Flutter and native apps.

    When compared to the React Native, Flutter delivers better performance thanks to its architectural solution — Flutter does not need a JavaScript ‘communication bridge’ to interact with native components and has a powerful Skia rendering engine. The bridge is on the border of the React Native framework and the graphics engine drawing UI. The technology is rather slow, and causes a kind of slowdown.   

    One more feature boosting Flutter performance has been developed by Google in Flutter 3.0. It’s an experimental Impeller tool highly improving animations and rendering in Flutter apps. Now it is available for iOS only, but the  tests by the Surf team show really great results in app performance growth.

    To wrap it, cross-platform apps are slower than native ones. Moreover, cross-platform apps use more memory of the device and more battery power. But when it comes to Flutter vs. React Native comparison, the Flutter tends to show better results.

    React Native performance vs. Flutter performance: Flutter wins.

    Flutter vs. React Native: design and UI comparison

    The central idea of Flutter is that you can build your UI out of widgets. Not only buttons, texts, and cards are widgets; animations, layout options, touch interactions are widgets, too. Widgets describe what their view will be like depending on the configuration and state. When a widget’s state changes (for example, a user presses a button), the widget rebuilds its description and its appearance changes.

    Flutter has two sets of widgets: Material Design widgets and Cupertino widgets. The first group imitates native Android design (since Material Design is an Android-oriented design language developed by Google), the second group imitates native iOS design. Thanks to this, Flutter apps look and behave naturally on both platforms.

    What’s more important, Flutter assures consistent UI across all devices, even the ones using out-of-date OS versions. In other words, it doesn’t matter whether your phone is a brand new piece or more of a fossil — you’ll have the same user experience.

    As for React Native, the base for apps is JavaScript code. This code is converted to native UI of iOS or Android devices with the help of the ‘bridge’ of C++ or Java code respectively and serialized JSON objects.

    React Native architecture diagram

    Thanks to that, the apps built with React Native look exactly like native apps.

    React Native has a set of core components such as Button, Image, ScrollView, and more; there are some Android-specific and iOS-specific components as well. To create an even better UI you can use third-party libraries.

    Flutter vs. React Native design and UI: no winner.

    Flutter vs. React Native: development speed

    Both frameworks have the mechanisms that provide the opportunity to develop apps as fast as possible.

    Flutter offers a vast list of tools helping to develop apps faster: Android studio, VS Code, lots of plugins, etc. One of Flutter’s key features is Hot Reload which allows developers to quickly view the effects of the changes in the code.

    What’s more, Flutter apps are built of widgets: a developer can simply place one into another, and so on. This principle fastens and simplifies the work. There are a lot of ready-to-hand widgets, but a developer can also write their own ones.

    Also, Flutter is fairly easy to update: it’s enough to write ‘flutter upgrade’ in the console — all the projects and components will update automatically.

    As for React Native, it has a similar — Fast Refresh: it allows developers to insert new code directly into a running app.

    But with React Native, some problems may occur. For example, the attempts to update the React Native version often entail library breakages. The automatic version update tools sometimes don’t perform well, so developers have to update some components manually.

    Flutter vs React Native development speed: Flutter wins.

    Flutter vs. React Native: security

    What’s more, in terms of security React Native is not good enough. For example, it’s possible to get access to JavaScript code in the release build; no need to explain that this is a serious threat to the whole app. Therefore, React Native doesn’t suit projects with strict security requirements, such as fintech or bank apps.

    From  the security point of view, Flutter unconditionally outperforms React Native. Flutter app is almost impossible to decompile because its code compiles to native code not available for reverse engineering.

    Flutter vs React Native security: Flutter wins.

    Flutter vs. React Native testing

    Flutter has three types of tests:

    • a unit test for a single function, method, or class;
    • a widget test for a single widget (similar to the component test in other frameworks);
    • an integration test for the whole app or a big part of it.

    The testing unfolds really fast: for example, widget tests in Flutter are faster than similar component tests in iOS.

    Also, there is a list of common Flutter errors, instructions on fixing provided.

    Testing the apps built on React Native can be rather complicated because React Native uses different JavaScript engines for regular and debug modes. So the code can behave differently.

    Flutter vs. React Native testing: Flutter wins.

    Flutter vs. React Native ecosystem

    Both these frameworks have huge corporations behind their backs. Both of them are relatively young but React Native has some odds over Flutter. React Native was released in 2015, Flutter — in 2017. That headstart gave React Native noticeable advantages over Flutter in building an ecosystem. But now Flutter tends to win it back. 

    Flutter vs. React Native community

    Flutter is maintained by the Google team and open source community. The community organizes some events, such as Flutter Engage, where you can learn the latest news, communicate with leaders from Dart, Flutter, and Firebase, and much more. Also there are two active Flutter communities in Slack, for about 20,000 and 5,000 participants, also organizing events and sharing useful tips. 

    React Native is maintained by the Facebook team and open source community. Also, there is a Discord community named Reactiflux, some forum-like groups and company-based communities. One of the main events devoted to React Native is React Conf. 

    Libraries, tools, and plugins

    Though it’s believed that Flutter’s ecosystem is relatively poor, Flutter has a vast list of ready-to-use packages — there are more than 25,000 items on it. Thanks to them, developers can add such micro improvements as turning text URLs and emails into clickable inline links or showing a country code selector (which will be helpful for international e-commerce services, for example). 

    Flutter has a perfectly centralized ecosystem. For example, repository includes all existing Flutter libraries and Flutter Favorite rating system  allows you to choose the best verified packages of tools among 25,000 packages. 

    React Native has a large number of libraries. For example, there is a list of high-quality third-party components called awesome-react-native. However, in other cases, you risk coming across some out-of-date, low-quality, or abandoned packages. 

    Flutter vs. React Native ecosystem: no winner.

    Flutter vs. React Native development cost

    Now it’s time for human resources questions: let’s figure out how hard it is to find Flutter and React Native developers, how much are you expected to pay them, and what possible extra expenses you should keep in mind.

    Flutter vs. React Native knowledge among developers

    IIn 2021, Stack Overflow conducted a Developer Survey: the researchers asked the developers about the technologies, development environments, and tools they use. 14,51% of the respondents claimed they use React Native, 13,55% — Flutter.

    Flutter vs. React Native usage among developers; source: Stack Overflow

    The numbers are not that big, and they can create an impression that the search for both React Native and Flutter devs might prove difficult. In fact, it’s no harder than finding someone to create a native app: the same survey says only 8% of developers use Kotlin, which is a major programming language for Android development.

    A Stack Overflow survey showed that Flutter is more loved than React Native: 68.17% against 58.08%.

    The most loved technologies, libraries, and tools; source: Stack Overflow

    So if you strive to hire a developer who really loves their job and is less liable to professional burnout (and we know how harmful it can be for both the team and the project), a Flutter developer will probably be the appropriate choice.

    Flutter vs. React Native knowledge among developers: no winner.

    Flutter vs. React Native developers’ rates

    The major part of mobile app development expenses is personnel’s salary. If you decide to hire a permanent team, the following charts will come in handy. These are the approximate pay ranges for Flutter and React Native developers in the USA and the UK as of February 2021. The charts are based on LinkedIn and Indeed research.

    Flutter vs. React Native developers’ base pay range, USA
    Flutter vs. React Native developers’ base pay range, UK

    But you can save a lot if you hire part-time developers and pay them hourly. Below you’ll find the approximate rates of Flutter and React Native freelance developers as of February 2021. We’ve divided the developers into three groups, depending on their location: the USA, Asia (India, Pakistan etc.), and Eastern Europe (Russia, Ukraine, Belarus, Poland etc.). The chart is based on Upwork research.

    Flutter vs. React Native freelance developers’ rates

    Flutter vs. React Native economy for business: React Native wins.

    Flutter vs. React Native: which is easy to learn?

    The ease of adopting the framework mostly depends on the programming language it’s based on. Of course, it’s possible to learn any language from scratch, but it’s better to dive into mobile apps development having some basis.

    Flutter is based on Dart. This programming language is not very common and not that easy to learn, so Flutter has a relatively high entry threshold. Dart may be easier to learn for Java developers. Anyway, Fluter has a bespoke manual for React Native developers. One more important point is that Flutter’s popularity grows fast, and its developer community produces a lot of content  for self-study, and offers many various courses.

    React Native is based on JavaScript — one of the most common programming languages. JavaScript is widely used by front-end developers. It’s also considered to be one of the simplest languages and, therefore, — the best option for intern developers.

    Flutter vs. React Native learning curve: React Native wins.

    Flutter vs. React Native future: 2022 and further

    You might have heard that Flutter is just some technology hype that will soon die out. But as we’ve seen from the Stack Overflow survey, it has firm grounds to stay with us for a long time: developers really like it — and more and more businesses too.

    Talking about some Flutter vs. React Native trends, Flutter’s popularity has grown by 9% through 2019-2020 while React Native’s remains the same.

    Cross-platform mobile frameworks used by developers worldwide in 2019-2021; source: Statista

    Taking into account this dynamic, we can say that in terms of Flutter vs. React Native 2022 popularity rating Flutter will also dominate.

    Flutter vs. React Native future: Flutter wins.

    The wrap-up: which to choose?

    So, as you’ve seen, both frameworks have their pros and cons. Let’s wrap up all the issues we’ve covered above into one chart.

    Flutter vs. React Native comparison

    When it comes to cross-platform mobile app development, we suggest Flutter. It has the same features as React Native but doesn’t have its problems, such as sudden crashes during updates and more. Also, Flutter can deal with complex logic and many screens; it’s faster and more secure.

    We have great experience in Flutter development, and we will be glad to help you with creating your app. Feel free to fill in the form to estimate your project.

    Want to develop a Flutter app?

    Estimate your project