Contents

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

    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 for almost ten years. 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: no winner.

    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
    Some screens of The Hole app, which is built on Flutter

    The examples of apps built with React Native:

    • Facebook — an app for one of the major social networks in the world;
    • 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. The Flutter community has formed a list of more than 2,000 apps built using this framework while React Native has mentioned about 40 best examples. But it’s clear that the real number is much more than that.

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

    Google Trends: React Native popularity, 2016-2021
    Google Trends: React Native popularity, 2016-2021
    Google Trends: Flutter popularity, 2016-2021
    Google Trends: Flutter popularity, 2016-2021

    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.

    But when it came to heavy animations with rotations, scaling, and fade, React Native performance lagged to 7 FPS for Android while Flutter broke through with 19.

    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
    React Native architecture diagram

    Thanks to that, the apps built with React Native look exactly like native apps. Also, this mechanism assures smooth animations.

    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.

    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.

    What’s more, security-wise, React Native is not that good. 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.

    Flutter vs React Native development speed: 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. 

    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 14,000 thousand 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). 

    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: React Native wins.

    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

    In 2020, Stack Overflow conducted a Developer Survey: the researchers asked the developers about the technologies, development environments, and tools they use. 11.8% of the respondents claimed they use React Native, 6.6% — Flutter.

    Flutter vs. React Native usage among developers; source: Stack Overflow
    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.

    As of April 2020, more than 2 million people had tried Flutter; the number of its monthly users reached 500,000. What’s more important — 92% of developers using Flutter claimed they were satisfied with it. Actually, a Stack Overflow survey showed that Flutter is more loved than React Native: 68.8% against 57.9%.

    The most loved technologies, libraries, and tools; source: Stack Overflow
    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: React Native wins (for now).

    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.

    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: 2021 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 and 2020; source: Statista
    Cross-platform mobile frameworks used by developers worldwide in 2019 and 2020; source: Statista

    Taking this dynamic, we can say that Flutter vs. React Native 2021 popularity rating is highly likely to be dominated by Flutter.

    Dmitry Andriyanov, a mobile app developer at Surf:

    I’m sure that React Native will still be on the market. It’s JavaScript-based; if you’re familiar with JavaScript, it will be easier for you to get started with React Native.

    On the other hand, if you know JavaScript, it’s also not difficult to learn Dart and start writing in Flutter.

    Since Flutter is more productive, more stable, and more flexible, it deservedly becomes more and more popular as a quality and reliable cross-platform framework. I’m sure Flutter will take a significant market share.

    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.