Flutter vs React Native vs Native: Deep Performance Comparison

Let’s compare FPS, CPU, Memory, and GPU performance of popular mobile development tools on everyday life tasks.

inVerita
inVerita
Jun 28 · 7 min read
Image for post
Image for post

The story behind the research

inVerita and its mobile development team continuously dig into the performance of cross-platform mobile solutions available on the market to answer the question which technology is best Flutter or React Native(or Native) for your product, maybe even career, that’s how Flutter vs React Native vs Native Part I emerged. Yes, it was quite controversial as one can state we weren’t using React Native to perform multiple calculations daily — that might be the case — but in this case, CPU heavy tasks are better performed by Flutter or Native apps.

Hardware info:

For our testing purposes, we were using an affordable Xiaomi Redmi Note 5 and iPhone 6s.

Use case 1 — List view benchmarking

We implemented the same UI on Android and iOS with the use of Native, React Native, and Flutter. We also automated scroll velocity with the use of RecyclerView.SmoothScroller on Android. On iOS and React Native we used an approach with timer and programmatically scrolling to position. On Flutter, we used ScrollController to smoothly scroll over the list. In each case, we had 1000 items in the list view and the same scrolling time to reach the last list element. In each of these cases, we used image caching with different libs per platform. More details could be revealed in the source code.

Third-party libraries used in this case:

iOS

Image for post
Image for post
Android — GPU tests results are not supported by the benchmark (unfortunately, with the devices we have, and we have many:)) )
Image for post
Image for post
Test results
  1. Android Native uses half as much memory compared to Flutter and React Native.
  2. React Native requires the most significant CPU exploitation. The reason is the use of JSBridge between JS and Native code that incites the waste of resources on serialization and deserialization.
  3. Regarding battery exploitation, Android Native has the best outcome. React-native is lagging behind both Android and Flutter. Running continuous animations consume more battery power on React Native.

iPhone 6s test

Image for post
Image for post
Test results
  1. Memory. Flutter almost matches native in Memory consumption but is still heavier on CPU. React Native falls far behind Flutter and native in this test.
  2. Difference between Flutter and Swift. Flutter is actively using CPU when iOS Native is actively using GPU. Reconciliation in Flutter increases the load on the CPU.

Use case 2 — Heavy animations test

Nowadays most phones running on Android and iOS have powerful hardware. In most cases using usual business apps, no fps drops could be noticed. That’s why we decided to do some tests with heavy animations. Heavy enough to get fps drops. We used vector animations animated with Lottie on Android, iOS, React Native and adopted the same animations to use with Flare on Flutter.

Image for post
Image for post
Lottie for Android
Image for post
Image for post
Test results
Image for post
Image for post
Test results
  1. Flutter’s outcome is such a surprise, though it screwed up a bit during a performance. (12% CPU and 9 FPS).
Image for post
Image for post
Lottie for Android
  1. Flare and Flutter are not going to stop surprising. Flare definitely has a way to go :D
  2. iOS Native requires the least amount of memory (48 Mb). React Native needs 135 Mb and Flutter requires 117 Mb;
  3. Cold app start. According to this indicator, Flutter is the leader (2 seconds). For iOS and React Native it takes around 10 seconds;

Use case 3 — Even heavier animations test with rotations, scaling and fade.

In this test, we compared performance while animating 200 images. Scale rotating and fade animations are executed at the same time.

Image for post
Image for post
200 images
Image for post
Image for post
Test results
  1. Flutter showed just enough performance to work comfortably but twice more memory expenses comparing to Native.
  2. React Native —showed a low performance on this case.
Image for post
Image for post
Test results
  1. Native used fewer resources and GPU was used mostly.
  2. React Native used mostly CPU for rendering while Flutter used GPU.
  3. React Native used a bit more memory.

Summary

For usual business apps with minor animations and shiny looks, technology does not matter at all. But if you’ll do some heavy animations keep in mind that Native has the most performance power to do it. Next, come Flutter and React Native. We would definitely not recommend using React Native in a very CPU heavy operation, while Flutter is a great fit for such tasks from both CPU and Memory standpoint.

The Startup

Medium's largest active publication, followed by +672K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

Create a free Medium account to get Top Stories in your inbox.

inVerita

Written by

inVerita

inVerita is a software consulting company focusing on outsourcing and team augmentation services based in Ukraine. https://inveritasoft.com

The Startup

Medium's largest active publication, followed by +672K people. Follow to join our community.

inVerita

Written by

inVerita

inVerita is a software consulting company focusing on outsourcing and team augmentation services based in Ukraine. https://inveritasoft.com

The Startup

Medium's largest active publication, followed by +672K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store