Flutter vs. React Native: Which Framework to Choose for Your Next Mobile App Development?

In the past there weren’t many options to choose from, developers were stuck with building native applications, using either Java or Android SDK for Android, or Swift for iOS. Nowadays, there are many cross-platform development frameworks available. However, this means that you have to make an important choice before you pick one. This won’t be easy and you will need to consider at least two factors.

First, there’s the budget. Building a cross-platform app tends to be cheaper than developing two separate ones for each major mobile OS. Second, there’s complexity. Although cross-platform application development is cheaper and faster, implementing a very complex logic or hardware integrations can be prohibitively difficult in non-native dev scenarios.

Keeping that mind, we’ve come up with an overview of the current state of the market and an in-depth analysis of the pros and cons of two major cross-platform frameworks: Flutter and React Native. Read on if you’re wondering which one you should choose for your next mobile project.

Flutter vs. React Native - market overview

According to an industry report, mobile apps generated over 92 billion dollars in revenue in 2018 alone. The projection for 2019 is around 108 billion, with further growth predicted for 2020, when the number is expected to reach almost 124 billion. These are serious numbers, and it definitely makes sense to get a foothold in this market while it’s still growing at a good pace.
But which platform should you target first? Well, there’s no easy answer. Consider this data (source: Statista):

Source: Statista.

One thing is clear, there’s no point spending development resources on any platforms besides Android and iOS. But which is more important? Well, things get more complicated here. While Android devices outnumber ones based on iOS by around nine to one, iOS users are on average more likely to spend money on and within apps. Then there’s geographic distribution. iOS is much more popular in some areas of the world (for example the US) than in many others (say Europe). In many cases, it could be better to go cross-platform if at all possible. This way you don’t have to give up on either demographic.

The key thing is that the future is bright for the mobile market and that a lot of new technology is on the horizon. Read more about it from our experts here.

Flutter vs. React Native: the value proposition

So what are the benefits of using cross-platform frameworks? Well, we can name at least five reasons why they provide a valuable alternative to developing native apps.

1. Learn once, write anywhere. There’s no need to look for two separate skillsets to cover the development for both platforms.
2. Cost efficiency. Obviously, doing something once is cheaper than doing it twice.
3. Easy version management. Your app can have the same release cadence on both iOS and Android.
4. Speed. Cross-platform apps are faster to build than native ones, for example, thanks to the fact that cross-platform frameworks provide native-feeling UI elements out of the box. See this case study to see how we’ve sped up the development process by 33% thanks to React Native.
5. Smaller teams. This is related to points 2 and 4. A smaller team means easier communication, less administrative overhead, quicker development (remember the lesson of the mythical man-month) and, naturally, less money spent on developers.

Now that we’ve given you an overview of the market and the benefits of cross-platform app dev, let’s get to the meat and potatoes – the actual frameworks. Introducing: React Native and Flutter.

React Native: the industry standard

React Native is the de facto industry standard for cross-platform mobile app development. The idea behind it is to enable developers to build cross-platform mobile apps using an approach similar to building websites.

RN was first released in 2015 by none other than Facebook. It’s entirely open-source and free to use, which is great, but that’s not the main benefit. The big kahuna here is the fact that it makes development faster and cheaper by enabling you to use just a single team, rather than two, to build an app that works on both iOS and Android. RN code can be reused between platforms (and in some cases even used to build websites) and extended with native modules written in Java or Kotlin for Android, or Objective-C or Swift for iOS, in case you need some really complex functionality.

Some of the most famous companies which use RN in their products include Facebook (duh), Tesla, Airbnb, and Walmart. Some apps you might have heard which were built using the framework are Instagram, Pinterest, Discord and Salesforce. Clearly, React Native is suitable for anything from social networks to enterprise software. For more examples of great apps built with React Native, check out this list.

We use React Native quite a lot ourselves, and its versatility has helped us complete a number of unique projects. These include whym, an instant voice translation app; Shine, a mindfulness assistant; Chaperhome, a personal security app; Hive, a business productivity suite; and Petro Ninja, an open data platform for the oil and gas industry. We’re also quite proud of Oncimmune, a mobile app for calculating the risk of malignancy of lung nodules. We also have a separate write-up of our experience with RN here, take a look to learn our honest impressions of the framework.

Flutter: the plucky contender

As a mobile app development company, we follow the trends and news, and that’s how we started testing Flutter. Flutter is a new player on the market of cross-platform mobile frameworks. It was first released in May 2017, with a stable version appearing as recently as December 2018. Its stated aim is to let developers “build beautiful native apps on iOS and Android from a single codebase”. Flutter uses Dart, an easy-to-learn programming language, which could be compared to Java, JavaScript, C++, and C#. Just like RN, Flutter is open-source – developers can, and do, contribute to it and share free plugins.

Flutter also offers its users the ability to create pure-native components for their apps, resulting in increased flexibility. Another advantage of Flutter is the fact that, just like cross-platform development in general, it decreases the development cost.

Flutter is gaining serious traction thanks to being backed by Google, a trusted and technologically advanced industry giant. Obviously, Google didn’t build Flutter out of pure goodness of their hearts, they’re working on a new OS called Fuchsia, and Flutter will be used to create apps for it. Either way, the community is growing ≠ more and more developers and businesses are adopting the framework, with such behemoths as Alibaba using it in their products.

Some notable projects made using Flutter include Google Ads, which is the engine behind all the ads you see in your search results and many other places; Alibaba’s mobile app called Xianyu, an e-commerce utility used by over 50 million people; and Abbey Road’s Topline, a creative/sharing app for musicians. We also have some experimental experience with Flutter behind our belt. We’re working on a concept app called Lunching, which will help companies simplify the process of ordering lunch to the office, and we’ve completed a Flutter-based notepad, a simple notes app. You can read about what we’ve learned in the process in this series: Part 1, Part 2, and Part 3.

The pros and cons

Let’s start with the good stuff. The benefits of using Flutter and React Native are:

1. Faster development. You deal with both iOS and Android at the same time.
2. Consistency between platforms. Users from both OSs get the same experience.
3. Lower costs. Reusable code, quick development, and smaller teams make for significant cost savings.
4. A single codebase. Having a single source of truth makes it easier to update the app when required.

Then again, it’s not all roses. There are a few downsides to cross-platform development:

1. Lower performance. The difference is not huge in most cases, but native apps do perform better when it comes to complex tasks.
2. Difficult code design. With a massive number of devices to consider, a lot of edge cases have to be taken into account at the design stage.
3. Difficult UI design. It’s harder to achieve a perfect native look and feel using cross-platform frameworks than when developing natively.

With that, let’s move on to the final part, our comparison of React Native and Flutter and our opinion on which is better for mobile cross-platform development.

The final comparison

Firstly, React Native is based on React.js and uses JavaScript, a very popular language, so it’s relatively easy for a JS developer to start working in RN. Building a mobile app using RN is similar to building a website, so web developers will feel right at home. Flutter uses Dart – the language is not very popular yet, so most developers will have to learn it from scratch. To do Flutter full justice, it’s fairly simple to learn thanks to its similarity to other major languages.

Secondly, while JS can be considered a strength of RN, it’s also one of its weaknesses JavaScript is an old language with a lot of quirks and an occasionally counterintuitive syntax. Dart is new as has no such legacy problems, developers appreciate it for how productive and straightforward it is.

Thirdly, JS, with all its woes, has the huge advantage of granting you access to the biggest repository of reusable packages in the world, npm. This is an incredible resource, and Dart packages available for Flutter can’t really compare.

Flutter vs. React Native: which one to choose?

It’s time to answer the question we asked in the title: Flutter vs. React Native - which is better for your next mobile app? We definitely recommend that you follow the latter and see how it evolves, however, all signs point to React Native. While it’s not without some quirks, it is the industry standard for a reason (or rather a number of them). If you’re thinking about a cross-platform app, definitely look into React Native development. Or, if the task seems daunting, get in touch, our team of React Native experts can help with whatever issues or questions you may have.