Mobile development is a ceaselessly rising domain and therefore with the accelerating market, there is a need for a robust framework that meets the diverse needs of mobile app owners. Rooting from the accelerating demand of the customer, especially from the mobile users worldwide, which have been calculated around 3.8 billion, ballooning the market from $97.7 billion in 2014 to $365 billion in 2018. This market cap has been predicted to grow further to $935 billion in the year 2023. Hence, companies are extending services that can be easily deployed on multiple platforms using a single codebase. This is the cross-platform development technology which is a solution to the problem of native development, i.e cultivating the same app using the respective native technologies for the same platform that exhausts time and budget. Imagine building the same application, where you hire two different or more different development teams for varied variants for various operating systems simultaneously. Sounds unnecessarily complicated, right? 

Therefore, now companies are critically focusing on two primarily dominant operating systems: Android with 71.93% market share and iOS capturing 27.47% of the market share. There is numerous software to develop such applications as Codename One, Native Script, Kotlin, React Native and Flutter. The latter being the most popular ones.

In this blog, we will try to possibly deduce the attributes of the features provided by both of them that can be leveraged by businesses optimally for developing their cross-platform applications. 

Flutter vs. React Native vs. Native: Which Mobile Application Is Better In 2023?

The inspiration behind the research

At Element8 we dig into on-going trends of technology-driven solutions to discover which one is the best mobile application Flutter or React Native (or Native) for cross-platform mobile app development. Controversially many people would deny using React Native to perform multiple calculations daily — but in this case, CPU heavy tasks are carried out better by Flutter or Native apps.

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

Calibrating UI performance is complicated and thus expert help is needed in implementing the same functionality in a similar manner across every platform. We choose a set of testing tools, globally recognized for precision that 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 different tools across different platforms so for the sake of convenience we streamlined everything categorically to libraries each platform supports. Test results can be variable as per the approaches taken to implement. Now, let’s look at the cases.

Hardware info:

For our testing purposes, we used Samsung Note 7 and iPhone 6s.

Repo link:

Test case 1 — List view benchmarking

We tested a similar UI on both Android and iOS through React Native, and Flutter, and also used automatic scroll velocity by using RecyclerView.SmoothScroller on Android. On both iOS and React Native we have utilized the approach of timer and programmatic scrolling to position. On Flutter, we used ScrollController for scrolling over the list easily. Here is each case we conclusively got 1000+ in the list view and similar scroll time for reaching the last list element. We also utilized image caching with different libs per platform. More details are revealed in the source code.

Third-party libraries used in this case:

Android

Loading and caching images — Glide

iOS

Loading and caching images — Nuke

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 comparatively greater because of the application of JSBridge between JS and Native code inciting resource waste on serialization and deserialization.
4. In battery exploitation, it is safe to say that Android Native gives an outstanding outcome whereas React-native lacks far behind in both Android and Flutter. Continuous running of animations consumes more battery power on React Native.

iPhone 6s test

1. In FPS results, Flutter and Swift remain far ahead than React Native because of the inability to use IoT compilation on iOS.
2. In memory consumption, Flutter and native are almost the same but still heavier on CPU. React Native lacks far behind Flutter and native in this test.
3. Flutter uses CPU while iOS Native actively uses GPU. in addition to that, Reconciliation in Flutter also increases the load on the CPU.

Test case 2 — Heavy animations

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

Conducting animation through Lottie for Android, iOS, React Native, and Flare for testing Flutter.

Android

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:

1. Android and React Native perform similarly. It’s clear that Lottie for React Native utilizes Native means (16–19% CPU, 30–29 FPS).
2. Flutter was surprising with its outcome, although it juggled a little during the performance. (12% CPU and 9 FPS).
3. Android needs the least memory space (205 Mb); React Native needs 280 Mb and Flutter requires 266 Mb.
4. The cold app started. Indicator, makes Flutter leading by 2 seconds in comparison to Android Native and React Native, which take 4 seconds here.

iOS

1. The outcome of iOS and React Native are both minimal in performance on this test and appear quite similar as Lottie for React Native uses native means.
2. Flare and Flutter continue to surprise but Flare definitely has a way to go
3. iOS Native uses comparatively the least memory space (48 Mb) when compared to React Native which requires 135 Mb and Flutter requires 117 Mb;
4. The cold app started. the indicator makes Flutter a leader (2 seconds) whereas iOS and React Native take around 10 seconds;

Please Note: The library used for this case here with Flutter was much heavier compared to others, used for more platforms which could be a reason for fps drops.

Test case 3 — Much heavier animations test with rotations, scaling and fade

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

Android

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

iOS

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

The Verdict

Regular business apps are possessing minor animations and shiny looks, and need not much technology. But if you require doing some heavy animations, Native indeed offers the actual power to perform it. 

Now 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 standpoints of CPU and Memory.

Moreover, the tool you choose depends upon the specific product and business case. If one is looking to build a single-platform MVP — they shall prefer native, but always remember that Flutter apps are compatible with every platform. Even today, Flutter has created a deep-valley competition for native development tools, especially if one has a restricted budget for development but is still seeking the decent performance of their application.

We do consciously consider the fact that there are several factors that are impacting the implementation and benchmarks of each technology, and many true experts in specific platforms can bring out much more out of these preferred sets of tools. Although we’ve tried to gain transparent results through this process by creating a single environment for each app to get tested and a single set of tools to measure the performance with utmost precision and clarity, We really hope you liked the result. Yet again our mobile and Flutter teams are happy to receive, carry and act on your feedback and suggestions.