Flutter vs. React Native vs. Native: Which Platform Is The Best?

The inspiration behind research

Pro Web is a leading mobile app development company continuously dig into on-going trends of cross-platform mobile solutions to discover which technology is best Flutter or React Native (or Native) for mobile app development, that’s how Flutter vs. React Native vs. Native came into scenario. We understand that, it was bit controversial as many people would deny using React Native to perform multiple calculations daily — but in this case, CPU heavy tasks are better performed by Flutter or Native apps.

This is the primitive reason why in this post we decided to dive deeper for analyzing the performance of UI which is having a high impact on a regular mobile app users.

Calibrating UI performance is difficult and needs an expert to implement the same functionality in similar way across every platform. We choose a global testing tool to leave no doubts and ensure staying completely objective, since many of them still run (majorly on React Native and Native projects).

UI animations are done using various tools across different platforms so we streamlined everything to libraries supported by each platform. Test results can be variable as per your approaches to the implementation. We always believed in pushing the specific set of tools to such limit where it outperforms every number. Now, let’s have a look at the cases.

Hardware info:

For our testing purposes, we were using an affordable Samsung Note 7 and iPhone 6s.

Repo link:

Test case 1 — List view benchmarking

We implemented similar UI on Android and iOS through Native, React Native, and Flutter, along with automatic scroll velocity by using of RecyclerView.SmoothScroller on Android. On iOS and React Native we utilized the approach of timer and programic scrolling to position. On Flutter, we utilized ScrollController for easy scrolling over the list. Here in every case, we got 1000+ in the list view and similar scroll time for reaching the last list element. Moreover we utilized image caching with different libs per platform. More details could be revealed in the source code.

Third-party libraries used in this case:

Android

Loading and caching images — Glide

iOS

Loading and caching images — Nuke

React Native

Loading and caching images — React-native-fast-image

1. Every test showed exactly the same FPS.
2. Android Native utilizes almost half memory in comparison to Flutter and React Native.
3. The CPU exploitation in React Native is more due to the use of JSBridge between JS and Native code inciting resource waste on serialization and deserialization.
4. In battery exploitation, Android Native gives the best outcome whereas React-native is far behind both Android and Flutter. Continuous running of animations consume more battery power on React Native.

iPhone 6s test

1. In FPS results, Flutter and Swift remains far ahead than React Native. The reason is the inability to use IoT compilation on iOS.
2. In memory consumption, Flutter and native are almost same but still heavier on CPU. Moreover React Native is much behind Flutter and native in this test.
3. Flutter utilizes CPU while iOS Native is actively using GPU. Reconciliation in Flutter increases the load on the CPU.

Test case 2 — Heavy animations

In recent times, majority of phones running on Android and iOS are equipped with powerful hardware. In majority cases, no fps drops could be noticed using usual business apps. So we prepared for doing some tests with heavy animations that could get fps drops. We utilized vector animations created using Lottie on Android, iOS, React Native and capitalized same animations to use with Flare on Flutter.

Having a test on animation through Lottie for Android, iOS, React Native, and Flare for Flutter.

Android

1. Android and React Native performs similarly. It’s clear that Lottie for React Native utilizes Native means (16–19% CPU, 30–29 FPS).
2. Flutter surprised with its outcome, although it juggled a little during the performance. (12% CPU and 9 FPS).

We came to know that removal of even a single animation from the grid increases FPS up to 40% on Flutter. We concluded that Flare is much heavier and not optimal for this type of task that’s why Flutter got such an FPS drop.

Blame this one:

3. Android needed least memory space (205 Mb); React Native needs 280 Mb and Flutter requires 266 Mb.
4. The cold app start. Indicator, makes Flutter a leader (2 seconds) whereas Android Native and React Native, takes 4 seconds here.

iOS

1. The outcome of iOS and React Native are minimum on this test and appeared quite similar as Lottie for React Native uses native means.
2. Flare and Flutter continuously surprises but Flare definitely has a way to go
3. iOS Native uses least memory space (48 Mb) whereas React Native requires 135 Mb and Flutter requires 117 Mb;
4. The cold app start. indicator, makes Flutter a leader (2 seconds) whereas iOS and React Native takes around 10 seconds;

Please Note: The library used here for this case with Flutter was much heavier in comparison to others getting used for more platforms and it might be the reason for fps drops.

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

Here, we tested to compare the performance in the process of animating 200 images. We also executed scale rotating and fade animations at the same time.

Android

1. Native was top performer with efficient memory consumption.
2. Flutter only demonstrated enough performance for comfortable working but consumed twice more memory in comparison to Native.
3. React Native —demonstrated a lower performance.

iOS

1. iPhone 6s is enough powerful to not let any drop of fps in all 3 cases.
2. Native used less resources but more GPU.
3. React Native used high CPU capacity for rendering while Flutter used GPU.
4. React Native used a bit more memory.

The Verdict

Regular business apps having minor animations and shiny looks, doesn’t require much technology. But if require doing some heavy animations, Native offers the actual performance power to do it. Talking about Flutter and React Native. It’s not recommended to use React Native in a very CPU heavy operation, while Flutter is a great fit for such tasks from both CPU and Memory standpoint.

Moreover the tool you select is dependent upon specific product and business case. If you are looking to build a single-platform MVP — prefer native, but always remember that Flutter apps are compatible with every platform; mobile, web and desktop environments and several times considered as future king of cross-platform development real soon. Even today, Flutter has created a very decent competition for native development tools, especially if you have a restricted budget for development but are still looking for the decent performance of yours app.

We consider the fact that several factors are impacting implementation and benchmarks of each technology, and many of true experts in specific platform can bring out much more out of the preferred set of tools. Although we’ve tried to bring as much transparency into the process as we could by creating a single environment for each app to get tested and a single set of tools to measure the performance, and I hope you liked the result. Yet again our mobile and Flutter teams are happy to receive and carry all the burden of your feedback and suggestions.