React Native vs. Flutter: What is Better for App Development in 2020?

blog
Logo NIX

React Native and Flutter are the most popular technologies for cross-platform software development of mobile applications, according to Statista. In contrast to a native mobile development approach, these frameworks allow the creation of a single code base that works for both iOS and Android devices. Thus, as there is less coding required, apps can be released quicker and on a smaller budget. Because of this, Flutter and React Native have become extremely popular and their adoption rate is continuing to grow. In this article, we will take a deeper dive into these two mobile development toolkits, compare one to another, and ask experts which is better for app development in 2020 and why.

React Native and Flutter VS Native App Development

First, let’s contrast the advantages and disadvantages of React Native vs Flutter using eight criteria:

Before we get started, let’s summarize some basic information about both technologies to be on the same page.

React Native and Flutter: basic information

Performance — Which is More Effective?

(back to the content)

In this article, the team created a demo app with the same functionality using React Native, Flutter, and native languages. Afterward, they measured performance, graphics, CPU load, and memory usage on both Android and iOS devices. According to their tests, native apps provide the best performance, followed by Flutter with a little lower benchmarks and then React Native with slightly worthwhile results. To explain this output, let’s take a look at the architecture and operational principles of both frameworks.

Flutter VS React Native: Architecture and operational principles

The execution of the source code on React Native requires a “bridge” from the JavaScript (JS) code to the device’s native environment. This bridge allows these two environments to communicate and exchange data. In a nutshell, the bridge is an interpreter that translates JS code to the device’s native programming language and vice-versa. Unfortunately, the bridge is an additional agent in this toolchain that requires extra time and resources for processing and usually creates a bottle-neck in React Native applications.

In contrast to this, Flutter, whose programming language is Dart, can access native features of the mobile device directly without any additional interlayers. Thus it compils quicker and consumes fewer resources to execute the code. That results in the instant start-up of the application, faster performance, and the ability to process multiple threads and complicated animations with less load on the device. This doesn’t mean that React Native isn’t able to process complex algorithms or sophisticated graphics. Flutter simply does it quicker and more efficiently.

User Interface of React Native vs Flutter Apps

(back to the content)

Both React Native and Flutter have excellent graphical features, although they utilize completely different approaches to depict user interface.

Comparison of React Native App on iOS and Android devices

React Native inherits native visual elements and appearance: buttons, navigation, menus, etc. These elements look native to the user and provide a seamless experience. In the case of operating system updates, the app elements will be updated respectively and maintain the feel of nativeness and similarity to other native applications. However, the downside is that the app will always look slightly different on iOS and Android devices, as well as in different firmware versions.

Comparison of Alibaba app on iOS and Android devices

Flutter, in turn, provides a consistent experience. The user can be certain that the app will look the same despite the OS version or device model. Navigation and elements will remain familiar unless upgraded from the source code by the developer. Moreover, Flutter has a С++ graphics rendering engine onboard that broadcasts the image directly to the screen. Thanks to this, animations are quicker and smoother with less coding required.

Time to Market

(back to the content)

Time-to-market is probably the most important factor in mobile app development. Both Flutter and React Native save time and resources thanks to their cross-platform nature. They enable engineers to reuse code instead of writing separate independent apps for iOS and Android devices, which usually require hiring more engineers with different skills. Let’s benchmark React Native against Flutter to find out which one leads to better development productivity and therefore requires less engineering effort.

React Native Vs Flutter: Community Size Comparison

React Native is older and consequently has a larger community that has produced a huge amount of ready to use packages and libraries so far. On the other hand, the vast majority of these haven’t been supported or updated for a long time, and thus couldn’t be used as-is. Moreover, it becomes challenging to pick one out of many similar solutions that will match a particular scenario best. Last but not least, React Native, with its huge community, also becomes dependent on that community for support. 

Flutter was released in 2017, two years later than React Native, but was comprehensively supported by Google engineers from the very beginning. It has much better documentation and a sufficient amount of pre-set host packages that are regularly updated by the big G. Out-of-the-box Flutter actually has more features that work correctly, while React Native requires connecting third-party libraries. All that results in higher productivity for Flutter engineers and less time of development needed.

Most loved and wanted by developers

People who like their jobs want their tools and workflows to be better and quicker in any industry. According to the Stackoverflow survey of 65,000 developers, Flutter is in 3rd place among the most loved non-web frameworks. React Native is only in 10th place, with 57.90% of preferences.

 Developers preferences about Flutter and React Native

Moreover, React Native and Flutter are in the top 4 most wanted frameworks for software developers to master according to the survey. They are both modern and allow engineers to do their jobs quicker, easier, and in more convenient ways.

Developers preferences about Flutter and React Native

Compatibility, app features, and CI/CD

(back to the content)

Flutter supports a variety of resolutions on different devices with Android 4.1+ or iOS 8+. React Native supports Android 4.1+ and iOS 10+. As it inherits the style of native elements of the device (buttons, for example) you should be aware of the recent iOS 14 release and its changes.

In some cases, you might require additional native development for both Flutter and React Native in sophisticated features. Writing native parts can address some challenges but decrease the maintenance benefits of using the cross-platform solution, since it requires different resources to make minor changes to, such as native android development, native ios development, and cross-platform development.

Geolocation and mapping

Flutter has a variety of official plugins made by the flutter team. We’ve had positive experiences using them for tracking features in released apps. React Native works well with one-time location tracking, however, some issues can arise with continuous tracking that could be solved by writing some parts in the native devices programming languages.

Device’s camera

In simple scenarios of the camera, usage Flutter didn’t show any issues. With React Native there are some issues with the device’s camera usage. This just requires additional time and resources to resolve and achieve desirable action.

Video chats and streaming

With Flutter, an external plugin can be used for custom video chats but requires research to pick the best fitting one. Also, there are a few ready-made paid solutions. With React Native this could be implemented natively, but it will take more time than simple native Android or iOS implementation.

Analytics

Both technologies support popular 3rd party analytics solutions like Google Analytics, Firebase, AppsFlyer, and Adjust. Flutter didn’t have issues with performance using analytics tools. React Native app’s performance can be affected if there are a lot of analytic events to report.

Continuous integration and delivery (CI/CD)

With Flutter you can deploy your application by using the command-line interface, however, CI/CD for iOS’s App Store is complicated and requires additional effort. React Native doesn’t have an integrated tool or official documentation on this, but supports many popular 3rd party CI/CD services, like Fastlane, Gitlab CI/CD, Github Actions, and Microsoft AppCenter.

Security

(back to the content)

Both technologies are able to provide a high level of security for mobile apps to comply with regulatory requirements like HIPAA. Minimum suggested measures we recommend are the following:

  • The fewer data stored on the client-side the better
  • The fewer 3rd party libraries used the better
  • Authentication tokens should be expired — once the user leaves the app or locks the screen additional login verification should be requested
  • Multi-factor authentication (MFA) — confirming a user’s claimed identity by using two or more steps out of something they know, something they have, or something they are
  • Stored on mobile client data should be encrypted.

Reliability and Further Support

(back to the content)

Both frameworks are open-source and distributed in accordance to permission-free licenses even though they were created by the world’s leading technology companies: React Native was developed by Facebook and Flutter by Google. These two IT giants created some of their own apps using these SDKs, for example, the Facebook app, Instagram, and the Google Ads app. So, they are clearly concerned with the reliability and further development of frameworks.

React Native is dependent on native elements of the device that require additional adaptation efforts separately for iOS and Android applications. Moreover, this also makes it vulnerable to any changes caused by firmware updates. Luckily this is not happening very often, but each significant update of mobile operating systems (such as iOS/iPadOS 13.6 or Android 10.0) or React Native itself (for example, to version 0.63) results in either minor unwanted bugs in UIs or even complete crashes of the app. To tackle these issues developers have to react to all OS updates in advance, perform QA tests, and update the apps accordingly. Developers must be aware of these features and proactively support their mobile applications. This is not a significant drawback to React Native, simply a compromise that must be made in exchange for the seamless experience and nativeness the app provides. 

Flutter is more resistant to the changes made by operating systems updates. Future versions of Flutter have backward compatibility, so OS updates won’t break apps. When it comes to bugs and fixes, Flutter provides sophisticated tools for QA testing that allow developers to watch how their input directly influences UI. React Native doesn’t have an official tool for QA testing – developers can use 3rd party software that works well but it isn’t as developer-friendly as Flutter’s licensed QA solutions.

Facebook SDK failure on Apple devices in 2020

Last but not least, tech media spotted a recent issue of popular apps crashing due to Facebook’s SDK failure. This doesn’t mean that this won’t happen to other vendors, but this fact is not contributing to its reputation as a reliable software development toolkit.

Engineering Cost and Demand

(back to the content)

Demand creates supply. To assess this, let’s take a look at market statistics provided by major job websites.

React Native Vs. Flutter: Jobs Market

It is not an easy thing to find a Flutter developer at your location, even though on average they cost less than React Native developers. Flutter’s programming language is Dart, which is different from traditional web development technology despite its similarity to Java and C#. It is also more popular among the junior generation of developers than savvy ones.

React Native and Flutter: Salaries in US, Ukraine, and India

It is much easier to find and hire a React Native developer. This framework is based on JavaScript, which most software engineers are familiar with. Moreover, developers can easily upskill from web development, especially if they worked with React previously. 

Scaling the Flutter engineering team is challenging, whereas React Native developers are much easier to hire or train. This could have a critical impact on time-to-market for a mobile application, and it might discounts the benefits Flutter provides. 

(back to the content)

Since February 2020 the volume of users searching for Flutter in Google exceeded those of React Native. This trend is an early sign of the potential for future growth and market distribution.

Flutter vs React Native: Choosing a Proper Programming Language

This is exactly the same trend we’ve noticed on Stackoverflow: Flutter overtook React Native at the very beginning of 2020. Thus, the software developer community had more questions on it, shared solutions, and shared knowledge and backgrounds for their colleagues.

Flutter and React Native on Stackoverflow trends.

In today’s modern tech world everything is changing rapidly. The earlier you appear on the market, the bigger pie of it you can obtain. React Native launched two years earlier than Flutter and that is the main reason React Native dominates in cross-platform development. However, Flutter is on the right track, as its adoption rate is growing quicker. It’s only a matter of time before Flutter overtakes the leadership of the market.

According to the TIOBE index, JavaScript (React Native) maintained 7th place among the most popular programming languages last year. This isn’t surprising considering the amount of frameworks and solutions where it is used. Dart’s popularity grew from 24 to 20th place just last year. The peak of its popularity matches with the date of Flutter’s first release.

In 2019 at the I/O event the Google team demonstrated an early beta of Flutter’s web application support along with mobile. At the moment this portability feature is still in development. Once released it will be game-changing for the cross-platform development market.

Market Shares and Examples

(back to the content)

React Native has been successfully used in projects from small to massive for organizations like Facebook, Instagram, Skype, and Walmart to name just a few. 

React Native And Flutter Apps Examples

Flutter, with its smaller but growing adopters base, also has some fairly massive organizations in its back pocket, such as eBay, Philips, Alibaba, BMW, Hamilton, and Google itself. Recently Google Pay announced a migration of the platform and all services to Flutter.

Flutter and React Native market shares

From the adoption point of view, React Native currently is the leader. Flutter has shown astounding growth in the short time that it has been on the scene, but, while Flutter is growing in popularity, it does still faces an uphill battle to overtake React Native. 

Experts’ Opinions on React Native and Flutter 

Nick, Tech Lead of Mobile Development department at NIX (former Senior React Native Developer):

There are many tools and features that are equally good in React Native and Flutter: Code Reusability and Hot reload with its ability to make changes on the fly. Also, there are features that are equally bad, like stage management for instance.

When it comes to native appearance, Flutter works without the use of additional APIs unlike React Native, and in fact, the framework does all of the work to connect the divide between the device and the codebase. React Native is more dynamic with a powerful and flexible API for 2D and animation. Flutter has its own positives at play though and works with proprietary widget sets that enhance customization. In addition, it embeds a full set of widgets of material design and in Cupertino. Flutter also comes bundled with UI rendering components and offers a hyped and reactive framework.

Anna, Solutions Architect of Mobile development department at NIX:

Development between the two frameworks is an area where they both vary widely. Flutter offers a built-in navigator that helps to simplify the process for newer developers. By contrast, React Native is created for skilled developers and requires a certain level of knowledge. This does, however, lead to a reduced development timeframe which is a significant positive. Generally speaking, skilled developers praise the efficiency of development in React Native based on the availability of ready to use components. 

React Native offers JS code that is compiled to the native code, invoking objective-C and the Java API. This helps display native components in iOS and Android and also provides direct access to native functionality. With Flutter, however, developers do not have those same limitations – the C++ engine helps to support the language flawlessly. In addition, Flutter can be leveraged more easily due to the underlying Dart framework. This leads to smooth and quick apps thanks to FPS animation standards with its accompanying Skia graphics library.

Ultimately, which is Better React Native vs. Flutter?

In a comparison of React Native vs. Flutter, the last one is better in terms of performance, UI, engineering productivity, and further support, as well as market trends. However, React Native is distinctively better when it comes to finding software developers. The availability of skilled engineers directly influences the time to market. For many companies, this is essential when choosing the best technology for an app. 

Comparison of React Native Vs Flutter -- pivot table

React Native is a good choice for projects with easy functionality and many similar entities, such as social media, eCommerce, and customer loyalty apps. Flutter is better in more complex projects that involve more calculations, CPU load, advanced animations, or integrations with GPS, camera, and other device modules.

If you are an established business with a decent amount of customers and the mobile app is not a primary product, choose React Native, as it helps market apps significantly quicker. Flutter is a good choice for early-stage startups to build an attractive proof-of-concept with minimum functions on a small budget, and then scale.

Final Words

Choosing the right framework is the only one piece of the puzzle. Developers have a choice to make native apps that are still generally faster and more responsive than hybrid ones like that in turn require less development time and resources. More importantly, is the selection of a partner that can help you bring your business’s vision to life. At NIX we have hundreds of developers skilled in both React Native and Flutter, as well as native app development. We have helped build different apps for companies worldwide and we can help you achieve your goals as well. Contact us so we can help you with bringing your goals to life.