React Native vs. Flutter: A performance comparison
between cross-platform mobile application development
frameworks
Marcus Lidekrans
marli691@student.liu.se
Gustav Tollin
gusto027@student.liu.se
ABSTRACT
This study compares the performance of two popular cross-
platform mobile application development frameworks, Flutter
and React Native. As the number of mobile users continues
to grow, the ability to target multiple platforms using a single
codebase is increasingly important for developers and compa-
nies. We conducted three manual UI tests; scrolling through a
list, testing the camera, and filtering a large dataset to measure
the performance of the frameworks in terms of CPU usage,
memory usage, and janky frames on an Android device. The
results indicate that Flutter may provide better performance in
specific situations when compared to React Native. The study
contributes to the existing research by providing additional in-
sights into the performance of these frameworks under specific
test scenarios.
INTRODUCTION
Mobile app development has become increasingly important
as the number of mobile users continues to grow each year,
surpassing desktop users since 2014 [11]. With this trend, the
demand for cross-platform development has also increased,
especially as mobile users are split between Android and iOS.
This has led to the development of various cross-platform
frameworks that allow developers to create mobile apps that
can be easily distributed to different platforms.
The work of Delia et al. [3] explains that native applications
developed for iOS and Android using their respective soft-
ware development kit (SDK) allow for unimpeded access to
all the system features (e.g., the camera, GPS) as well as high
performance. These benefits, however, do not come without
drawbacks. Writing native applications for both iOS and An-
droid requires two separate code bases and thus doubles the
development effort. Furthermore, both codebases must be
maintained, and the developed app should ideally have the
same design, user experience, and functionality. This requires
highly skilled developers accustomed to both ecosystems (pro-
gramming language, tools, OS-specific implementation details,
etc.). For many companies, these drawbacks are not justifi-
able or feasible, and thus instead opt to use a cross-platform
development framework that allows for ease of distribution to
different platforms.
Multiple types of cross-platform development frameworks
seek to accomplish the same goal of distributing the same
app to different platforms but accomplish this through differ-
ent approaches. One such approach is to develop a mobile
web application. However, running the app in a web browser
comes with the limitations of not being able to access all native
features and slower performance; companies have therefore
developed frameworks that more closely resemble native so-
lutions [3]. This paper will compare two such frameworks,
React Native and Flutter.
React Native was released as open-source by Facebook in
2015, allowing developers to use React’s popular UI frame-
work to create natively rendered mobile applications with the
already familiar web language JavaScript
1
. Using a "bridge",
the JavaScript code can communicate with the native render-
ing APIs and thus create mobile applications that both look
and feel native. It is one of the most popular frameworks
for developing cross-platform mobile applications for good
reasons, a large and thriving community, low bar to entry for
experienced web developers, and high code reusability when
developing to different platforms.
Flutter is another open-source framework that was introduced
by Google in 2018. Flutter applications are created with the
programming language Dart and compiled natively to each
target platform ahead of time. One of the main benefits of
using Flutter to develop mobile applications is that neither a
JavaScript bridge nor a WebView is needed. There is a large
community of both developers and organizations supporting
the project.
2
As mentioned briefly above, the two frameworks operate in
fundamentally different ways. Comparing two such different
frameworks is a daunting task, as countless metrics could
be used to evaluate them. It is crucial to determine which
metrics to prioritize and which to exclude to ensure a fair and
meaningful comparison. Furthermore, when attempting to
develop the same application using two different frameworks,
inevitably, some components will not be identical or even
remotely similar. So how do you account for these differences
when evaluating performance?
1
https://reactnative.dev/
2
https://docs.flutter.dev/resources/faq
1