Flutter vs React Native? Need a cross-platform mobile app but don’t know which solution is best? Let’s take a look.

It wasn’t too long ago, that to produce a mobile app for Android and iOS you would need to develop two separate apps, one for each platform. In recent years cross-platform solutions have been on the rise, and there are now multiple options. The question is, which is the best? And will a cross-platform app ever be as powerful as native mobile apps?

Flutter

Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobilewebdesktop, and embedded devices from a single codebase.

Powered by Google, Flutter is a power player when it comes to delivering first-rate native experiences on Android and iOS platforms. Flutter is growing in popularity and often compared with React Native and other best cross-platform app development tools. Flutter uses Dart, a programming language developed by Google.

React Native

React Native

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. 

Backed by Facebook, React Native is a mobile app development tool to build cross-platform apps on iOS, Android, and UWP platforms with an ability to deliver native-like performance. React Native is used by many tech giants such as Instagram, Facebook, Airbnb, Walmart, Tesla, UberEats, and so on. React Native uses JavaScript to build cross-platform apps. JavaScript is a very popular language in the web community at the moment.

Flutter vs React Native

Programming Langauge

With Flutter, you have to use Dart – a programming language created by Google. As a client-optimized language, Dart has many advantages. Take productive app development, for instance. 

React Native uses JavaScript. In particular, ReactJS – a JavaScript library for building user interfaces. For web developers, working with React Native comes easy. 

Architecture

React Native enables the communication between JavaScript and the native language via the JavaScript bridge. Here’s how it works: the two sides communicate by sending JSON messages. The messaging is asynchronous, which means the app’s UI should be smooth. Still, there’s a chance of a lagging UI in the end because the bridge impacts the rendering speed.

In contrast, Flutter doesn’t require a bridge to communicate with native components. It has everything packed within itself, including frameworks like Cupertino and Material Design. Thanks to this Flutter advantage, apps are more stable and predictable on different platforms than React Native apps. 

User Interface

Thanks to JavaScript bridge, React Native renders the native components for each platform. This feature allows for creating the look and feel of native Android and iOS applications. The prominent advantage is that React Native has lots of ready-made components to use as building blocks. 

Sadly, there are drawbacks as well. For instance, it’s hard to replicate complex UI in a React Native app. Also, the React Native components can behave differently on different platforms.

Flutter has UI widgets packaged within itself, which means creating native-like applications is easy. No need to search for third-party libraries – a large library of framework widgets is enough. Besides, Flutter apps are consistent across all platforms. 

Reusability

Both frameworks allow developers to reuse their code across multiple platforms.

React Native lets devs build apps for iOS and Android, and the web via React. Recently, Microsoft has unveiled a great project where desktop apps can be written in React Native (for both macOS and Windows).

With Flutter, you can write apps that run on macOS, Windows, Linux, Android, iOS, web, and embedded systems (e.g., infotainment systems in cars).

Performance

InVertia did a deep dive into performance of Flutter and React Native vs Native languages on Android and iOS devices. Whilst native app’s came on top for most categories, Flutter wasn’t far behind! React Native, however, seemed to lag behind considerably in comparison. In their article, they share the results of performance tests showing mathematical calculations of the number Pi implemented in native and cross-platform approaches. Check out a brief summary their results below:

Memory-intensive test (Gauss–Legendre algorithm)

Graph displaying React Native and Flutter performance vs Native Languages on iOS. Gauss–Legendre algorithm.
iOS Gauss–Legendre algorithm
Graph displaying React Native and Flutter performance vs Native Languages on Android. Gauss–Legendre algorithm.
Android Gauss–Legendre algorithm

Findings:

  • Flutter was slightly faster than Swift on iOS devices (15%). Whereas, React Native was 13x slower than Swift.
  • Flutter was slightly slower than Java or Kotlin on Android, and React Native was nearly 15x slower than native languages.

CPU-intensive test (Borwein algorithm)

Graph displaying React Native and Flutter performance vs Native Languages on iOS. Borwein algorithm.
iOS Borwein algorithm
Graph displaying React Native and Flutter performance vs Native Languages on Android. Borwein algorithm.
Android Borwein algorithm

Findings:

  • On iOS, Flutter was 5x slower than Swift, and React-Native was 15x slower.
  • On Android, Flutter was only half the speed of native, whereas, React-Native was 6x slower.

Summary

So is there a winner in the Flutter vs React Native battle? Each framework has its strengths and weaknesses. And each one is a great solution but for different problems. 

We believe Flutter is a great option for both Android and iOS development, particularly if your app is UI focused. The only question is, is your project better suited to a cross-platform solution, or two distinct Native apps? Get in touch to explore your options, we’re happy to advise on which we believe is most appropriate for your project.


Got a great app idea? Get in touch to find out more about how we can help.

+44(0)1225 789642

enquiries@beardedhen.com

Bearded Hen Icon

One Thought on “Flutter vs. React Native – Which is Best for 2021?”

  • Spot on with this write-up, I truly think this web site needs far more attention. I’ll probably be back again to read more, thanks for the advice!

Leave a Reply

Your email address will not be published.