As of 2021, making a call on Flutter vs React Native is the most common decision to be taken when approaching any new cross-platform mobile development project. Until recently, JavaScript-based React Native was the undisputed market leader of the cross-platform mobile application development frameworks. The mobile-development library has both closed the performance gap with truly native apps and benefits from its close similarity to Reactjs, which is currently the most popular web development tool in the world.
That means it’s relatively easy for React developers to also learn React Native and vice versa. Which has led to a deeper cross-skilled talent pool – a strong business case for many project sponsors to build cross-platform mobile apps in React Native.
But Facebook-backed React’s mobile development library now has some serious competition. It comes in the shape of Google’s Flutter – a framework based on the search engine giant’s Dart language.
Only released in 2018, and moved out of beta in January 2019, Flutter is still a relatively immature framework. React Native has been evolving since 2015 and has a good head start. A position strengthened by the popularity of Reactjs for web development. But Flutter has rapidly gained traction and popularity, especially in mobile development, due to its capability to support material design, motion, and visual-oriented widgets for both Android and iOS. This also made Flutter mobile development the best fit for MVP and PoC projects.
On Github, the Flutter repository has already overtaken React Native on ‘stars’, which developers use to either signal approval or bookmark. Flutter has even nearly caught React Native up on Github repository results, with 178,364 compared to 197,840 and has already been anointed in some quarters as “the future of mobile development”.
Source: Star-History
Of course, while Github stars are a popular metric against which to judge the popularity of programming languages, frameworks, libraries and development tools, it is just one indicator. It’s also not an indicator that offers any insight into the technical fit of one technology vs another in the context of a specific development project. Nor the business case, which can be equally important.
That is the aim of this blog. We’ll look at Flutter vs React Native, comparing their technical strengths and weaknesses within the context of different use cases. As well as the business case for each, which can be just as important.
React Native vs Flutter: Introducing The Two Leading Cross-Platform Mobile Development Technologies
Before digging into the technical and business case differences between React Native and Flutter, and their implications on which is better suited to different use cases, let’s very briefly introduce the two rivals.
Introducing React Native
React Native is the mobile development spin-off of Reactjs, the Facebook-launched and backed open source JavaScript library. The React and React Native libraries are relatively similar:
“The main difference between building browser-based apps in React and mobile apps in React Native is that, in former, the virtual DOM is used to render browser code in Reactjs. While in the latter, native APIs are used to render components in mobile. The code communicates with different environments”.
“Otherwise, much of the rest of the process is the same. If a developer is experienced the patterns of props, render props, components, HOCs and lifecycle in React, they are much of the way towards being able to work in React Native. The cores rules are the same. They will only have to learn how to retarget for an Android or iOS environment, rather than a browser”.
The React framework that’s actually a library – K&C
The similarities between the two libraries offer several advantages, not least of which is that developers with experience in one are generally able to quickly learn the specifics of the other. With React currently the most popular frontend development technology by some distance, that’s no small edge and one we’ll go into in more detail.
Key React Native Facts
- Open-source library for mobile development launched and backed by Facebook
- A mobile-specific spin-off from Reactjs, the market-leading JavaScript framework/library.
- Launched in 2015.
- JS native.
- Cross-platform technology used to build ‘almost native’ Android and iOS mobile apps
Introducing Flutter (and Dart)
Mobile UI-framework Flutter, also an open-source technology, was originally developed by Google, which also maintains it. It was released in 2018 and brought out of beta in January 2019. Google is also behind Angular, the JavaScript framework that is Reactjs’s main rival for market share of the non-mobile development market. But that’s pretty much where the similarities between Angular and Flutter end.
While Reactjs and React Native are both based on JS and are very similar, Flutter is based on Google’s Dart language. Dart was released in 2010 as an alternative to JavaScript, motivated by the belief in some development circles that JS has some underlying limitations and issues that cannot be solved by further development of the language.
Dart is generally considered easier to read than JS and other popular programming languages, thanks to a syntax that is similar to that of a human language. It uses fewer commands but more options. And developers can choose their own names for variables, making any code they write more understandable for themselves. Though this deviation from standardisation does need to be carefully considered in the context of projects multiple devs will work on.
Dart’s simple syntax is credited with making it relatively easy to learn and a 2019 StackOverFlow survey put Dart just behind JavaScript in a list of programming languages ‘loved’ by developers. 66.3% ‘loved’ it, compared to 66.8% for JavaScript. This year, Dart has overtaken JavaScript in its favour with developers. The 2020 survey shows Dart is ‘loved’ by 62.1% of developers to 58.3% for JS.
Flutter compiles Dart to binary code, which allows it to match the native performance of Objective-C, Swift, Java or Kotlin. Inspired by the success of React, which overtook its Angular framework in popularity, Flutter uses a declarative approach to build its UI based on widgets (components). Widgets are only rendered when necessary, usually when their state has been changed, in a way reminiscent of React’s Virtual Dom.
Key Flutter Facts
- Open-source library for mobile development launched and backed by Google.
- Unlike Google’s Angular framework, Flutter is based on its parent’s Dart language, not JavaScript.
- Launched in 2018 and moved out of beta in January 2019.
- X-Compiled – communicates with mobile devices natively.
- Cross-platform technology used to build ‘almost native’ Android and iOS mobile apps.
- Can also port the same code to the web.
React Native vs Flutter: How do the two cross-platform mobile development rivals match up on technical qualities and performance?
Both React Native and Flutter are popular choices, currently the most popular choices, for the development of cross-platform mobile applications able to function on both Android and iOS devices. That popularity is no coincidence and they are both clearly great mobile development tool kits.
But what are the technical qualities that differentiate the two, and their strengths and weaknesses, generally and in the context of different use cases? Can mobile applications developed in either Flutter or React Native be said to demonstrate better performance on particular metrics such as response time, or in the context of specific use cases? And if so which?
Let’s break it down.
What Do React Native and Flutter Have in Common?
All great rivalries are actually borne from the fact that the competitors have a lot in common. Otherwise, there wouldn’t be such an intense level of competition. And React Native vs Flutter is no exception to that rule. Before digging into their differences, it makes sense to first address the shared qualities that the rivalry is based on.
So what do the two cross-platform mobile development toolkits have in common?
- Used to create high-performance, cross-platform apps with just one codebase.
- Use their own 2D graphics engine or native components to display user interface, not web technologies.
- Apps built using both Flutter and React native are almost indistinguishable from truly native alternatives.
- Both have an architecture based on/inspired by Reactjs.
- Highly flexible, thanks to not being tied to platform-specific design constraints.
Flutter & React Native Are Both Cross-Platform Mobile Development Tools
The biggest similarity between Flutter and React Native, and ultimately why developers and project sponsors often face a straight final choice between the two, is that they are both very good cross-platform mobile development technologies.
Cross-platform frameworks create apps that can run on either Android or iOS. There are some specifics in terms of communicating with either Android or iOS that do have to be considered and coded for, but around 90% of the same codebase is used in both mobile operating system environments.
Cross-Platform vs Native Mobile Apps
Native applications are built to run on a particular operating system. In the mobile development world, that is either Android (which accounts for around 75% of the smartphone market) and iOS (around 24%). Native Android apps are written in either Java or Kotlin and native iOS apps in Objective-C or Swift.
Native Mobile Development
Perhaps the biggest advantage of native mobile development is being able to make direct use of a device’s hardware, such as camera and GPS. Cross-platform apps can now also access device hardware but do so through the use of plugins. While this won’t impact user experience in most circumstances, an extra layer always adds complexity, which increases the risk of failures, bugs and isn’t quite performance optimal.
It’s also much easier to get a native application approved on Google Play and the App Store.
Until recently, there was also a relatively obvious performance gain by developing mobile apps natively. Flutter and React Native have closed most of that gap, but there are still performance advantages to native development.
Native Mobile Development Pros
- More complex native applications can be easier to bug fix.
- Easier to make use of the device’s hardware features such as camera, GPS etc.
- Optimal speed – simple code and the fact many elements are preloaded means native apps will usually offer optimal speed and performance.
- Better offline – native mobile apps tend to work better offline than alternatives. This is again thanks to many elements being pre-loaded. For example, a media like a magazine or newspaper may be better suited to native development because once new content is loaded when there is an internet connection, there is little chance of issues if the user goes offline when travelling in an aeroplane or metro, or in any other circumstances where a mobile internet connection is either limited or not available.
- It’s easier to get a native app authorised in Google Play and the App Store.
Native Mobile Development Cons
- Two entirely different apps using different code bases need to be built and maintained for both Android and Apple devices.
- Two distinct mobile apps mean more time and money needs to be invested in building and maintaining them. This also slows down time to market. Or if only one is built, it misses out on either iPhone or Android users.
Cross-Platform Mobile Development
Cross-platform mobile app development toolkits like Flutter and React Native have now come pretty close to matching the performance of native alternatives. And the advantages of cross-platform mobile applications can often outweigh drawbacks.
That’s evidenced by the fact the following mobile applications are all, you may be surprised to learn, examples of the cross-platform approach:
- Gmail
- Google Ads
- Google Stadia
- SpaceX Go
- Skype
- Slack
- Uber
Cross-Platform Mobile Development Pros
- Cost-effective – you don’t have to build and maintain two different apps, requiring two separate developer skill sets.
- Reusable components – up to 90% of the codebase is identical for both Android and iOS platforms.
- Performance – modern cross-platform toolkits like React Native and Flutter mean there is now very little compromise when it comes to performance and speed.
- Time to market – most of the code base used by the app on Android and iOS devices being the same will usually mean new apps and updates can be launched more quickly than if developing 2 native alternatives.
Cross-Platform Mobile Development Cons
More complex development and integration – while it takes much less time to develop one cross-platform app than two native apps, it does take more time to develop one cross-platform app than one native app. There are considerations that have to be taken into account to make sure the shared 90% of a cross-platform app’s codebase is well adapted to both OS environments. And the remaining 10% which differs has to be well done for the app to be nicely integrated to both Android and iOS if speed and 0ther performance issues are to be avoided.
Offline performance – creating a cross-platform app that works as well offline as a native app would is a challenge.
App Store and Google Play Authorisation – the process of getting a cross-platform app accepted into Google and Apple’s app stores takes longer. And every new update to the app must also be authorised. Which can be a pain and delays updates.
Flutter vs React Native – The Differences
Now we’ve covered the qualities that Flutter and React Native have in common, what sets the two mobile development toolkits apart?
Architecture – X-Compiled/Hybrid (Flutter) vs JS Native (React Native)
Mobile applications developed using Flutter are considered Cross (X) Compiled apps, which means they are written in a language that allows them to communicate ‘natively’ with the OS, either Android or iOS, and hardware of the mobile device. Google launched Flutter in answer to what it saw as React Native’s limitations in communicating natively with mobile devices, in the context of more complex applications.
“Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart’s native compilers”.
Mobile applications built using React Native are, on the other hand, referred to as ‘JavaScript native’. Unlike Flutter, React Native’s JS native status means it has to communicate with a mobile device’s underlying hardware through a bridge. The UI components developed in React Native are native to either the Android or iOS mobile operating systems, but communication with the underlying hardware is not considered ‘native’.
This can impact negatively on the performance of React Native vs Flutter applications in the context of more complex applications. Especially when the efficiency of communication with a device’s hardware is of greater significance.
In summary, React Native’s Flux architecture involves the use of a JavaScript bridge to facilitate communication with the native modules. Flutter’s Skia C++ engine contains all the necessary protocols, compositions and channels that facilitate communication with the native modules – the toolkit’s engine is an end-to-end solution.
For a more in-depth look at Flutter’s architecture, refer to its Github Wiki. Likewise, for React Native.
Design Capabilities, UX & Component Libraries
It’s easier to design an app using Flutter. You have much more flexibility and design capability using React Native.
Because Flutter, as a full mobile application development toolkit, comes with an extensive component library based on Google’s Material Design principles, an application can be conveniently put together from ready-to-use widgets.
Because React Native is a library, it has far fewer ready-to-use widgets and designing an app involves more work and expertise. But that feeds through into almost complete flexibility to customise app design without compromising any preferences.
Greater freedom also comes with greater responsibility. Flutter apps pretty much have to follow Google’s Material Design principles. There’s not a lot of room for major error when it comes to UX. If you are designing a React Native app, you are relying on the UX competency of your team, so make sure you are confident in its aptitude.
If a more alternative or original design is a priority, this gives React Native the edge. If pace of development, convenience are priorities and you are happy for your app’s design to follow Google’s Material Design principles, and all else is equal, strongly consider Flutter.
Learning Curve
If you need to build a mobile application, it doesn’t make much practical sense to talk about whether it is easier for developers to learn React Native (and JavaScript) or Flutter (and Dart). You are neither going to go off and learn React Native or Flutter by yourself from scratch. Nor are you going to ask your inhouse developers or outsourced development company or freelancer to go and learn React Native or Flutter and then build your app. You will, or certainly should where possible, assign the project to, or hire, developers that are already highly competent in building applications using either Flutter or React Native.
Where ‘learning curve’ might be a genuine factor in the choice between Flutter vs React Native is if you already have access to Reactjs developers. React developers should be able to relatively quickly pick up React Native, as most of the underlying rules are the same. They will only have to learn how to code in a way that communicates with the OS and hardware of mobile devices.
If your organisation already has a React development team and standard applications built using React, it will probably make strategic sense to opt for React Native ahead of Flutter if that’s a decision you are making for mobile development. It still wouldn’t be advisable to hand over your mobile app’s development to React developers lacking any or much experience in React Native.
But they will be able to provide support to more experienced React Native developers. And will be able to quickly learn React Native’s specifics, adding to their tech stack for future flexibility in development resources.
For junior developers with no or little experience in either JavaScript, Dart, React Native or Flutter, both languages and development tool kits are considered to be reasonably accessible. Learning either Flutter or React Native from scratch will probably be roughly as easy, or difficult, as each other.
Start-Up/Installation Time
React Native is installed via the Node Package Manager (NPM), with packages installed either locally or globally. Installing on a macOS will also involve the HomeBrew package manager.
Flutter is installed by downloading the platform-specific (eg. Linux, Windows, macOS) binary from Github. If installing on a macOS, the flutter.zip file is also downloaded and added as a PATH variable.
Neither install is a one-liner with native package managers for different OS options. Installing Flutter is slightly more cumbersome on macOS as the binary needs to be added to PATH and downloaded from the source code. React Native installation is via package managers and doesn’t require downloading the binary from the source.
Both could be slightly easier in a perfect world, with React Native’s set-up marginally easier/quicker. Flutter’s documentation and CLI support for setup and configuration is slightly better than React Native’s. These factors are minor and aren’t likely to influence any Flutter vs React Native decision.
Developer Productivity
How quickly an application can be developed using a given technology is important, due to both the speed to market prerogative and the fact that good software developers are an expensive resource.
Both Flutter and React Native benefit from a hot reload feature, saving significant time in testing UI changes. In React Native, developers can use a text editor or IDE of their choosing. Because Dart is a far less common programming language than JavaScript, many text editors and IDEs don’t yet support it, limiting choice. A slight drawback to Flutter, but unlikely to be a deal-breaker.
Open Source Community Support
As the more mature technology, React Native is still ahead of Flutter when it comes to online resources and community support. However, Flutter is quickly catching up and publicly available resources and active communities count as a plus for both.
Testing Framework and Support
A well-developed testing framework for developers to create UI, unit and integration tests is important and a quality that marks out mature technologies with stable traction. As a JavaScript library, React Native has a number of unit-level testing frameworks available to developers. There is, however, a lack of officially supported integration and UI-level testing frameworks. But there are some good third-party tools filling the gap. Appium and Detox being two of the most popular.
Flutter comes with an extensive array of unit, widget and integration-level testing features out-of-the-box. Flutter also provides strong testing documentation and a very useful widget testing feature, which tests the UI by running widget tests like unit tests.
All in all, testing Flutter applications is easier than testing React Native applications.
DevOps and CI/CD Support
If you are a DevOps organisation, or less formally adopt a DevOps approach to development projects, DevOps and CI/CD support levels for Flutter and React Native will be an important factor in any decision between the two.
There is a lack of official documentation from React Native on setting up CI/CD development pipelines. However, there are third-party resources out there and set-up won’t be any major issue for an experienced DevOps architect. Nevercode, Codemagic and Bitrise all offer solutions.
The rich command-line interface of Flutter allows for easy CI/CD set-up and Bitrise, Codemagic and Nevercode all support Flutter.
In conclusion on React Native and Flutter’s technological qualities
The bottom line in the technological rivalry between Flutter and React Native is that both are excellent cross-platform mobile development toolkits. They both have their strengths and come with their own challenges, which roughly cancel each other out in a big picture view.
When it comes to specific use cases, Flutter has a slight edge if an application involves extensive communication with a mobile device’s underlying hardware. It’s also the more complete toolkit, with pretty much everything needed to develop a mobile application provided out-of-the-box. Its extensive components library, ready-to-use widgets and Material Design principles mean it is quicker and easier to develop with, and there is limited room for major UX gaffs.
React Native relies heavily on third-party libraries and applications are built from smaller components. This allows for greater flexibility and creative license, especially on UX and layout, but also offers more room for error and will usually mean more development time needs to be committed.
Which of the two is the best fit for an application from a technology standpoint, very much boils down to the specifics of the use and business case. The latter we’ve already touched on. But let’s now look at the commercial considerations that might influence the choice between Flutter and React Native in a little more detail.
Flutter vs React Native – The Business Case
When making a decision on the tech stack that a new application (mobile, web, desktop) will be built on, project sponsors have 4 main considerations to weigh up:
- Technological fit with the specific use case.
- Development time and expense.
- Depth of talent pool available.
- The extent to which the tech stack is future-proofed.
We’ve already looked at the first and, from a technology point of view, the second and, to an extent, the fourth. The depth of the Flutter vs React Native talent pool heavily influences the second and fourth business case considerations. So let’s first address the third business consideration – the respective depth of the Flutter and React Native engineer talent pools.
Is Flutter or React Native More Popular With Developers?
How popular a given development technology (programming language, framework/library/toolkit or tool) is with developers themselves can be assessed on a few different levels:
- Satisfaction level when working with the technology.
- Interest to learn the technology.
- Jobs market – demand for experts in a technology.
Developer Satisfaction With Flutter vs React Native
StackOverFlow’s 2020 Developer Survey offers some interesting insights into numerous industry trends. And the survey highlights that among developers currently using Flutter and React Native, more using the former (68.8% to React Native’s 57.9%) would like to continue doing so. As of 2020, there is more developer love for Flutter, than there is for React Native. That’s a consideration for project sponsors as higher developer satisfaction rates would be expected to reflect favourably on both productivity and retention rates. As well as on the future talent pool that can be hired from – arguably the biggest single issue in the highly competitive market for development talent.
However, while Flutter comes out on top here, it should be noted that developer satisfaction levels with React Native are by no means critical. It’s still a popular technology.
Interest To Learn Flutter vs React Native
Another important indicator of developer attitudes to working with a given technology, in this case Flutter or React Native, is the interest of those who have not yet used it in learning it. On this count, the StackOverFlow survey indicates React Native has the edge on Flutter (14% to 10.7%):
Interest in learning new technologies can be influenced by a number of factors, including both general development community enthusiasm and job opportunities and remuneration levels.
Jobs Market – Commercial Demand For Flutter vs React Native Developers
Is there more commercial demand for Flutter vs React Native developers? Statistics business Statista puts React Native slightly ahead of Flutter in terms of the global number of developers working with the respective technologies (42% to 39%). However, while use of React Native remained stable between 2019 and 2020, Flutter demonstrated an impressive growth rate of 30%.
With a gap of less than 8% between the use rates of the two rival cross-platform mobile development technologies in 2020, if adoption of Flutter continues at anywhere near the rate demonstrated over the past year, 2021 could see it take pole position in terms of commercial use.
Cross-platform mobile frameworks used by software developers worldwide in 2019 and 2020
Source: Statista
The Statista data is based on the responses of almost 20,000 polled developers, though the exact methodology used to create that sample group is not clear. A look at popular jobs portals (both general and IT sector-specialists), however, paints a very different picture.
As of early November 2020, on StackOverFlow’s jobs listings, which exclusively focus on developer and IT specialist roles, there were 21 postings inviting applications from Flutter developers vs 649 for React Native developers. That’s a huge gap, indicating that there is a far higher commercial demand for React Native specialists compared to that for Flutter specialists.
On Monster.com, one of the largest general jobs portals in the world, the gap is similarly wide, with 922 React Native roles available to 128 Flutter developer vacancies.
The same pattern repeats itself on LinkedIn, with 457 results for React Native job searches, with the location set to the San Francisco Bay Area (as a good sample area minus the option to not filter by location). There are just 41 vacancies for Flutter developers – putting commercial demand for React Native more than 1000% ahead.
And there are 367 remote Flutter positions listed on LinkedIn, to 1577 remote React Native roles – a gap of almost 330% in React Native’s favour.
There appears to be overwhelming evidence from job portal listings indicating that whatever methodology Statista has used to poll usage of Flutter vs React Native, it is a poor one.
In terms of overall commercial demand for Flutter vs React Native developers, the latter is still well out in front. Could that be because React Native developers are cheaper because there is a deeper pool of them?
Salary Levels of Flutter vs React Native Developers
Based on our experience as a nearshored (Ukraine, Poland, Bulgaria) IT outsourcing agency, salary levels and expectation are roughly equivalent between Flutter and React Native developers across seniority levels. That’s roughly confirmed by the following statistics from U.S. jobs portal Neuvoo. Though the portal does put the median annual salary of React Native developers very slightly ahead of that of Flutter developers, at $120,000 per annum, to $110,000 per annum.
The conclusion has to be that developer salary costs are not a significant factor in the business case between the choice of Flutter vs React Native.
React Native Is Still More Commercially Popular Than Flutter
The evidence suggests that Flutter might now have a slight edge on React Native in terms of developer sentiment towards the rival cross-platform mobile development toolkits. And we earlier established that there is little to separate the two on technological pros and cons, other than the specifics of the use case. But that the perceived business case still comes down heavily in favour of React Native. The organisations paying for the development of cross-platform mobile applications favour React Native.
Why? There seems to be two driving factors:
- The React Native talent pool is deeper.
- The Reactjs/React Native/JavaScript ecosystem.
When it comes to how easy, or difficult it is, to put together a team of Flutter developers with enterprise-level experience, compared to a team of React Native developers of comparable seniority and experience, the latter is some distance out in front.
That status quo is supported by the broader JavaScript/Reactjs/React Native ecosystem. The popularity of Reactjs in web development, the fact that a majority of skills and competencies are transferable between it and React Native, supported by the ascendancy of JavaScript as a programming language, makes a compelling case for React Native vs Flutter. At least from a business case perspective, if far from as clear cut on a pure use-case assessment between the two.
Flutter vs React Native – The Verdict
Ultimately, the business case supporting the choice of one technology over another is usually at least as influential as the pure, all other factors excluded, technological fit to use case. And that means that our conclusion has to be that React Native comes out ahead of Flutter in our comparative analysis of the arguments in favour of each.
