Linköpings universitet/Linköping University | IDA

Examensarbete på grundnivå, 16hp | Innovativ programmering

HT 2023 | LIU-IDA/LITH-EX-G--23/054--SE

React Native vs. Flutter: A

performance comparison between
cross-platform mobile application
development frameworks

Gustav Tollin
Marcus Lidekrans

Handledare: Anders Fröberg

Examinator: Erik Berglund
Upphovsrätt
Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från
publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår.
Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för
enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning.
Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan
användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten
och tillgängligheten finns lösningar av teknisk och administrativ art.
Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god
sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras
eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära
eller konstnärliga anseende eller egenart.
För ytterligare information om Linköping University Electronic Press se förlagets hemsida
https://ep.liu.se/ .

Copyright
The publishers will keep this document online on the Internet – or its possible replacement – for a period
of 25 years starting from the date of publication barring exceptional circumstances.
The online availability of the document implies permanent permission for anyone to read, to
download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial
research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All
other uses of the document are conditional upon the consent of the copyright owner. The publisher has
taken technical and administrative measures to assure authenticity, security and accessibility.
According to intellectual property law the author has the right to be mentioned when his/her work is
accessed as described above and to be protected against infringement.
For additional information about the Linköping University Electronic Press and its procedures for
publication and for assurance of document integrity, please refer to its www home page:
https://ep.liu.se/.

© 2023 Gustav Tollin, Marcus Lidekrans

This work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy
of this license, visit http://creativecommons.org/licenses/by/4.0/
 React Native vs. Flutter: A performance comparison
between cross-platform mobile application development
frameworks
Marcus Lidekrans Gustav Tollin
[email protected] [email protected]

ABSTRACT able or feasible, and thus instead opt to use a cross-platform

This study compares the performance of two popular cross- development framework that allows for ease of distribution to
platform mobile application development frameworks, Flutter different platforms.
and React Native. As the number of mobile users continues
Multiple types of cross-platform development frameworks
to grow, the ability to target multiple platforms using a single
seek to accomplish the same goal of distributing the same
codebase is increasingly important for developers and compa-
app to different platforms but accomplish this through differ-
nies. We conducted three manual UI tests; scrolling through a
ent approaches. One such approach is to develop a mobile
list, testing the camera, and filtering a large dataset to measure
web application. However, running the app in a web browser
the performance of the frameworks in terms of CPU usage,
comes with the limitations of not being able to access all native
memory usage, and janky frames on an Android device. The
features and slower performance; companies have therefore
results indicate that Flutter may provide better performance in
developed frameworks that more closely resemble native so-
specific situations when compared to React Native. The study
lutions [3]. This paper will compare two such frameworks,
contributes to the existing research by providing additional in-
React Native and Flutter.
sights into the performance of these frameworks under specific
test scenarios. React Native was released as open-source by Facebook in
2015, allowing developers to use React’s popular UI frame-
INTRODUCTION work to create natively rendered mobile applications with the
Mobile app development has become increasingly important already familiar web language JavaScript 1 . Using a "bridge",
as the number of mobile users continues to grow each year, the JavaScript code can communicate with the native render-
surpassing desktop users since 2014 [11]. With this trend, the ing APIs and thus create mobile applications that both look
demand for cross-platform development has also increased, and feel native. It is one of the most popular frameworks
especially as mobile users are split between Android and iOS. for developing cross-platform mobile applications for good
This has led to the development of various cross-platform reasons, a large and thriving community, low bar to entry for
frameworks that allow developers to create mobile apps that experienced web developers, and high code reusability when
can be easily distributed to different platforms. developing to different platforms.

The work of Delia et al. [3] explains that native applications Flutter is another open-source framework that was introduced
developed for iOS and Android using their respective soft- by Google in 2018. Flutter applications are created with the
ware development kit (SDK) allow for unimpeded access to programming language Dart and compiled natively to each
all the system features (e.g., the camera, GPS) as well as high target platform ahead of time. One of the main benefits of
performance. These benefits, however, do not come without using Flutter to develop mobile applications is that neither a
drawbacks. Writing native applications for both iOS and An- JavaScript bridge nor a WebView is needed. There is a large
droid requires two separate code bases and thus doubles the community of both developers and organizations supporting
development effort. Furthermore, both codebases must be the project. 2
maintained, and the developed app should ideally have the As mentioned briefly above, the two frameworks operate in
same design, user experience, and functionality. This requires fundamentally different ways. Comparing two such different
highly skilled developers accustomed to both ecosystems (pro- frameworks is a daunting task, as countless metrics could
gramming language, tools, OS-specific implementation details, be used to evaluate them. It is crucial to determine which
etc.). For many companies, these drawbacks are not justifi- 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
Given the variation and potential for optimization, we made larger data sets due to its on-demand creation of child widgets.
two important decisions. First, we made a general performance Just like the FlatList component, items that go off-screen are
comparison, focusing on CPU usage, memory usage, and the destroyed. However, one big difference between the FlatList
number of janky frames. A janky frame is when the app’s component and the Listview widget is that the ListView widget
framerate drops below its target. Secondly, where the two does not asynchronously load items off-screen. 6
components were not identical, we chose the most similar
ones. Native features
Both React Native and Flutter allow developers to access the
Aim different native features of the device. However, the imple-
This thesis aims to compare two popular cross-platform mo- mentation of accessing native features differs between the
bile application development frameworks, React Native and frameworks, which may impact the app’s performance.
Flutter, to understand which framework is preferable when As mentioned previously, React Native uses a bridge to enable
developing mobile apps. There are many factors to consider communication between JavaScript and native code. This
when comparing two such frameworks, such as type of ap- bridge acts as an intermediary between the JavaScript code and
plication, project scope, and previous developer experience. the native code and may introduce some latency. Developers
This paper will seek to answer this question by considering can create native modules or use a third-party solution to
important performance metrics. access native platform APIs.

Research question On the other hand, Flutter provides access to native features
What are the performance differences between mobile apps through plugins that are compiled into the app and can directly
developed in React Native compared to Flutter in terms of: access the native features of the device. These plugins are
written in each platform’s language and provided by the official
• CPU usage Flutter team or the community.
• Memory usage Expo
Expo is an open-source framework that is used for building
• The number of janky frames React Native apps 7 . It provides developers various tools and
features to quickly and efficiently create high-quality mobile
THEORY apps. The Expo SDK is a set of APIs and components that
In this section, we present key concepts related to cross- allow developers to access device features such as the camera
platform mobile application development frameworks relevant and the GPS 8 . By leveraging the Expo SDK, developers can
to our study and previous research. build apps that take full advantage of the capabilities of modern
mobile devices. Expo Go is a client designed to test React
Frameworks Native apps 9 . After starting a development server using Expo
React Native and Flutter are the two most popular open-source CLI, developers can connect to the dev server using the Expo
mobile app development frameworks 3 . Below we present Go app on iOS or Android. This makes testing and debugging
some essential key concepts and differences between the two apps easier during development, saving developers time and
frameworks. effort.
List implementations Cross-platform development
Both React Native and Flutter provide different implementa- Web Applications
tions of lists for displaying data. These implementations differ Creating a web application is a simple way to distribute a
in performance, functionality, and how the data is displayed. mobile app across multiple platforms. These applications run
In React Native, the FlatList component is used to display in a web browser and are designed to work on various mobile
large datasets because of its lazy-loading strategy and removal devices. Typically written in HTML, CSS, and JavaScript,
of items that go off-screen. By default, ten items are initially they are easy to develop, deploy, and maintain. One of the
rendered (initalNumToRender prop), and 21 items (unit of visi- advantages of web applications is that they do not require
ble length) are asynchronously loaded off-screen (windowSize approval from an app store. They also need only an Internet
prop). This results in rendering items ten screens above and connection to work. However, performance can be slow [15]
below the currently visible screen. The ScrollView component compared to other options, and the native features accessed
is also available, which uses the more naive loading strategy through web APIs are limited.
of rendering all its child components at once. 4 5
Hybrid Apps
Flutter has a ListView widget that can display large and Another approach to building cross-platform mobile apps is
small datasets, depending on the constructor used. The to use a hybrid app development framework. Hybrid apps are
ListView.builder constructor is more suitable for displaying essentially web applications that are packaged as native apps
3 https://www.statista.com/statistics/869224/worldwide-software- 6 https://api.flutter.dev/flutter/widgets/ListView-class.html
developer-working-hours/ 7 https://docs.expo.dev/faq/
4 https://reactnative.dev/docs/flatlist 8 https://docs.expo.dev/versions/latest/
5 https://reactnative.dev/docs/scrollview 9 https://docs.expo.dev/get-started/expo-go/

2
and provide access to the native features of the device through FPS rate indicates smooth animations and transitions in the
a web view [12]. Popular hybrid frameworks include Apache user interface (UI), while a low FPS rate can lead to stuttering
Cordova and Ionic. Applications built with these frameworks and an overall poor user experience. [7]
are easy to distribute, but their performance is typically slower
than native apps. Related works
Cross-compiled Apps We first present previous research comparing frameworks
Cross-compiled application development frameworks enable where at least one is React Native or Flutter and then present
developers to build applications that run on multiple platforms related research more broadly.
by compiling code ahead of time for each platform. This
means the code runs directly on the device, improving perfor- Framework comparisons
mance and preserving the native user experience [15]. Flutter A prior study by Wu [14] has compared React Native and
is an example of a cross-compiled framework, where the code Flutter. The author made a case study where he analyzed and
is compiled into native code for the targeted mobile platform, compared a React Native open-source app rewritten in Flutter.
which can be either Android or iOS. The work included a performance comparison where they im-
plemented a list using both frameworks and measured dropped
Interpreted Apps frames while scrolling. The results showed that Flutter had a
With an interpreted application development framework, de- slight advantage in fewer frames dropped, while React Native
velopers can build mobile apps using an interpreted language performed better in an I/O speed test.
like JavaScript. The code runs in a runtime environment and
is then interpreted into native code, which enables access In another study conducted by Jagiello [5], the performance of
to the native features of the device while still maintaining a the two frameworks was compared by measuring the number
platform-independent logic. Interpreted applications are easy of dropped frames within a specific time frame. The author
to distribute while retaining the look and feel of native appli- measured the number of dropped frames under a certain time
cations. However, performance may not be optimal due to the for two different applications to determine which framework
runtime interpretation of the code [12]. For example, React performs better. The results revealed that React Native had
Native is considered an interpreted framework because it ex- fewer dropped frames, although the difference was not statisti-
ecutes JavaScript code at runtime using a JavaScript engine, cally significant.
with some platform-specific components compiled ahead of A comparative study by Danielsson [2] evaluated the devel-
time for the target platform. opment process, user experience, and performance of React
Native applications in relation to native Android applications.
Evaluation The study assessed performance by measuring GPU frequency,
User retention for mobile apps is generally low, and good app CPU load, memory usage, and power consumption using An-
performance is crucial for maintaining users. It is troubling droid Studio Profiler and Xcode Instruments profiling tools.
that in previous studies of mobile app performance, not much To evaluate performance, three test cases were conducted to
work has been done in evaluating React Native and Flutter. [7] replicate various user scenarios within the app. While the
results indicated that React Native applications were slower
When evaluating the performance of React Native and Flutter,
when compared to native Android applications, the former
we consider several key metrics, including central processing
did not hurt the overall user experience and had a shorter
unit (CPU) usage, random access memory (RAM) usage, and
development time.
the number of janky frames. These terms and their significance
in mobile app development are explained briefly in this section. Olsson [10] conducted a comparative study to evaluate the
performance and look between Flutter and native applications.
Both CPU and memory usage are important metrics to consider
The author developed four Flutter, Kotlin, and Swift applica-
when evaluating the performance of mobile apps. CPU usage
tions and measured CPU performance on Android and iOS
measures the amount of processing power the framework uses
platforms. CPU usage was measured using Android Studio
at any given time, while memory usage refers to the amount
Profiler and Xcode Instruments. The results indicated that
of RAM an app uses at a given time. High usage of either of
there was minimal difference in CPU usage between Flutter
these metrics implies that the device resources are strained
and native applications. However, the author noted that further
[7], leading to slow performance, reduced battery life, and
testing is necessary to demonstrate the variance in performance
resource bottlenecks for other applications running on the
between the two comprehensively.
device. Therefore, it is important to measure these metrics to
ensure that the app utilizes the device’s resources efficiently. Mahendra and Anggorojati [7] conducted a study compar-
ing five performance metrics (CPU usage, memory usage,
The fluidity of an application is defined by the number of
response time, frame rate, and application size) for Flutter and
frames displayed per second. Android and iOS devices operate
React Native with native Android as the baseline. The test
at 60 frames per second (FPS). This results in the system
application used in the study was a simple social media app
having 16.67ms to generate the static image for that interval
10 . Failing to do this will cause frames to get dropped (janky with a timeline and profile pages. The experiment involved
running two tests (infinite scroll and taking pictures with the
frames), resulting in a less fluid and unresponsive app. A high
camera) on an Android emulator, and each test was repeated
10 https://reactnative.dev/ 30 times for each app development framework. The results

3
showed that Flutter had better performance than React Native compilers. However, despite these improvements, developers
but that Native Android performed best. still need to optimize their code manually. One such manual
performance fix that developers can apply is to favor for-loops
Nawrocki et al. [9] explain that the quality of a cross-platform over functional-style processing of arrays. For example, use a
framework is hard to measure regarding developer experience, regular for loop instead of the reduce function.
but through a survey posted on Stack Overflow 2019, some
interesting data was collected. According to the survey, Flutter
METHOD
is the most popular framework, with 75.4% of developers hav-
Our study builds upon Mahendra and Anggorojati’s previous
ing used it before. React Native is in second place with 62.5%,
work and introduces several changes and additions. We used
and in third place with 48.3% came Xamarin, a framework
an actual device instead of an emulator to provide more au-
developed by Microsoft. After developing two mobile apps
thentic and reliable results depicting real-world application
to measure the performance and the development experience,
performance. Additionally, each test was carried out in release
the authors concluded that Flutter had the upper hand over the
mode, which is expected to outperform debug mode [2][5].
other frameworks. React Native performed well but was not
Although we ran all tests for Flutter in release mode, we were
as easy to develop as Flutter or Xamarin. This was mainly
unable to measure janky frames. Therefore, we had to repeat
due to React Native’s dependence on community-maintained
the test scenarios in profile mode to obtain this data for Flutter.
libraries, which affected the documentation quality.
We also incorporated networking into our apps to better sim-
Huber et al. [4] conducted a quantitative performance anal-
ulate real-world usage scenarios and added an extra test case
ysis of three typical UI interactions and developed one app
to filter large datasets. These improvements aim to reflect the
natively and two using mobile cross-platform development
outcomes observed in an actual app more accurately.
(MCPD) approaches (React Native and Ionic/Capacitor). They
measured CPU usage, main memory usage, janky frames, and
App description
GPU memory usage using automated tests. The study con-
firmed the results of previous studies, indicating that compared Using both frameworks to measure performance differences,
to natively developed apps, apps developed using MCPD ap- we developed a social media app inspired by Twitter. See
proaches put a higher load on mobile devices regarding CPU Figures 1 and 2. The app has three main routes, a home page
usage, main memory, and GPU memory consumption. Addi- with an infinite scroll list, a page where the user can take a
tionally, the study showed that the better the mobile device, photo, and a search page where the user can filter posts. The
the lower the additional load on resources. infinite scroll list will resemble the home feed seen in social
media apps. The list dynamically loads additional items from
After reviewing these previous studies, it can be observed that a server as the user scrolls down, ensuring an endless content
the general trend in terms of performance is that native appli- stream. This approach offers two key benefits. First, it more
cations outperform those developed using Flutter, followed accurately reflects the performance of real-world social media
by React Native and hybrid frameworks; however, the actual apps with multiple network connections. Second, it makes the
performance difference may depend on the specific test used list infinite by allowing new data to be fetched on demand.
and may not always be noticeable to users.
We chose to develop a social media app prototype to evaluate
Broadening the scope the performance of frameworks for building such apps. Social
Liu et al. [6] discovered that more than one-third of the 70 real- media apps have resource-intensive features, like the features
world performance bugs collected from eight large-scale and discussed above, making them useful test cases for measuring
popular Android applications required special user interactions performance. By creating an app with a social media app’s
to manifest. They concluded that these performance bugs can broad scope and external dependencies, we could simulate
easily escape traditional testing, and developers need to pay these technical demands and compare how different frame-
more attention to them. Through scenario-based testing, these works handle them, even though our prototype does not have
hard-to-find bugs can more easily be found. social functionality.
Mercado et al. [8] conducted an empirical study examining To accurately capture objective and comparable data, the app
user reviews of apps on app marketplaces to determine whether implemented in both frameworks was developed to be as simi-
there was a relationship between the approach used to develop lar as possible in design and functionality. Therefore, we used
apps and their perceived quality. The study found that hybrid Material Design for both apps to avoid inconsistency in the UI.
apps on both Android and iOS platforms were more likely to Flutter has built-in support that we used, and for React Native,
receive user complaints. Additionally, Android users tended to we used a community UI framework called React Native Paper
have a more unfavorable perception of the performance, relia- that offered similar components.
bility, and usability of apps developed using hybrid approaches
compared to traditional native approaches. Implementation
This section describes how the different features were imple-
In an empirical study by Selakovic et al. [13], 98 performance mented in the app.
issues in 16 popular JavaScript projects were fixed, most by
optimizations that changed only a few lines of code. The Home page
use of JavaScript has evolved from simple scripts to complex The posts displayed in the home page are loaded using HTTP
programs, thanks to the recent improvements in just-in-time GET requests from a local Go server. Each post in the list

4
 Figure 1. Flutter app Figure 2. React Native app

contains a username, randomly generated text, a profile picture, In React Native, the Expo Camera component was used to
an image, and four icons. To display the posts, we first make access the device’s camera and allow users to take photos
an HTTP GET request to our go server at /posts/get/:id/:count, within the app. In addition, the Expo Media Library was used
which returns the count number of posts, starting from id to save the image to the device’s gallery.
as JSON data. The client then parses this JSON data, and
additional HTTP GET requests are made to our server for
Search page
each image when they are to be displayed. See Figure 3 for a
sequence diagram. The icons displayed under each post are The route containing the search page loads the posts in the
stored on the device and not loaded from the server. same manner as described above in the home page section,
but with the difference that instead of loading new posts when
The profile picture is small (16KB), and the embedded images the user scrolls to the bottom of the list, we load all the data
are much larger (between 145KB and 1.3MB). Additionally, needed by sending a GET request for 100 000 posts. This
each request processed by the local server has an artificially data is parsed and saved in a list when the user clicks a button.
added delay (20ms - 150ms) to simulate the conditions one After the user presses the button, a text input field is displayed
would see in a production environment. from where the user can search for and filter posts based on
the username.
When the user scrolls down the list and reaches the bottom, an
additional request is sent, just like the initial request, with the
id, increased and processed accordingly. Building and installing
Building the apps in both frameworks required different pro-
Camera
cesses. To build the Flutter app, we used the "flutter build apk"
Flutter and React Native provide ways to integrate camera command to build an Android APK package. The resulting
functionality into mobile apps. The implementation process APK file was installed on the Android device using the "flutter
for both frameworks involves utilizing a camera plugin or install" command.
component to access the device’s camera and allow users to
take photos. Once a photo is taken, it can be saved to the For building the React Native app, we used EAS Build, which
device’s gallery using a package or library specific to the is a hosted service for building binaries for Expo and React
framework. Native projects 11 . When the build was done, we installed it
on the device using the command "adb install."
In Flutter, the ImagePicker plugin allowed users to take new
photos using the camera. The GallerySaver package was also
used to save the taken image to the device’s gallery. 11 https://docs.expo.dev/build/introduction/

5
 and "adb shell dumpsys gfxinfo package.name framestats," to
gather detailed statistics on CPU usage, memory usage, and
frame rate performance.
The "adb shell top" command was repeatedly executed for
30 seconds to generate CPU and memory usage data, which
we extracted and compiled into a visual graph. Meanwhile,
the "adb shell dumpsys gfxinfo package.name framestats"
command provided detailed frame rate statistics, including the
total number of frames rendered, janky frames, and the frames
per second.
As ADB could not be used for the Flutter app to generate
frame rate statistics, we measured the number of janky frames
separately through Dart DevTools. This involved opening the
performance profiler in Dart DevTools while the app ran in
profile mode. By doing so, we could view the app’s frame rate
over time in a chart and obtain the app’s average frame rate
Figure 3. Example of how the client communicates with the server throughout the recording.

Test scenario
Experiment
We conducted three test scenarios where we measured the
A Google Pixel 2 smartphone operating on the Android plat-
metrics stated in the research question, CPU usage, memory
form was used to conduct the experiment. The experiment
usage, and the number of janky frames. We measured all per-
involved executing three test scenarios manually on the smart-
formance metrics for each test case, allowing us to determine
phone five times each. We used React Native version 0.71.6
which test scenario had the most significant impact on each
and Flutter version 3.10.0 for this experiment. As the Android
metric. Before each test, we deleted the app cache and allowed
Studio Profiler only provided visual representations of CPU
a 10-second wait period to ensure that the starting conditions
and memory usage, we obtained data samples via the Android
for all tests were equal.
Debug Bridge (ADB) to better determine maximum, mean,
and minimum values. Test Scenario 1
While ADB allowed us to sample frame data for determin- The first scenario involved scrolling down the home page con-
ing the number of janky frames in the React Native app, this taining images and text, with the test running for 30 seconds.
method was not viable for measuring frame data within the This allowed us to evaluate the application’s ability to handle
Flutter app, as it employs its own rendering engine. Conse- heavy loads and assess its responsiveness under such condi-
quently, we resorted to running the Flutter app in profile mode tions.
and counting the number of janky frames with the help of Dart 1. Scroll down the list for 30 seconds
DevTools.
Test Scenario 2
file="$1.csv"
echo "cpu%,mem%" > $file In the second scenario, we focused on the performance of ac-
pid=‘adb shell pidof $1 ‘ cessing hardware functionality by testing the implementation
i=1 of the camera. Specifically, we repeated taking a photo and
adb shell dumpsys gfxinfo "$1" reset saving it to the device’s gallery for 30 seconds. This test pro-
start_time =$(date +"[%T]")
end_time =$(( SECONDS +30)) vided valuable insights into how accessing native functionality
differed between the two frameworks.
while [ $SECONDS -lt $end_time ];
do 1. Navigate to the route with camera functionality
res=‘adb shell top -b -n 1 -p $pid | tail -
n 1 awk ’/^ *[0 -9]/ {print $9 "," $10}’‘ 2. Press the camera button to take a photo
echo "[$(date +"%T")], $start_time , $i:
$res" 3. Save the taken photo
echo "$res" >> $file
((i++)) 4. Take a new photo
done
5. Repeat steps three and four for 30 seconds.
adb shell dumpsys gfxinfo "$1" framestats >
framestats .txt Test Scenario 3
Listing 1. Shell script The third scenario involved testing the application’s search
feature, with the user navigating to the search page by press-
We conducted a performance analysis of React Native and Flut- ing the search icon on the navigation bar and then loading
ter by implementing a shell script (Listing 1) on an Android posts from the server. The test involved entering an account
device. The script utilized two commands, "adb shell top" name in the search field at the top to filter and display posts

6
related to the searched account. This allowed us to evaluate
the performance when filtering large data.
1. Navigate to the search page
2. Click the button to load posts
3. Search for an existing account name

Automatic vs. manual testing

For the execution of the three test scenarios, we deliberated on
utilizing automated testing frameworks for both applications
to ensure consistent and objective test runs. Flutter’s built-in
automatic testing functionality, Flutter Driver, provided an Figure 6. MEM Test 1
extensive framework. However, for React Native, we had to
resort to an external testing framework to conduct the test.
As it transpired, there was no straightforward means of auto- React Native in terms of CPU usage, with an average CPU us-
matically running tests on both applications. Moreover, the age of 43.42% compared to React Native’s average of 52.92%.
scrolling speed of the two varying testing frameworks resulted This difference in CPU usage was 66 throughout the test sce-
in further inconsistency. Ultimately, we concluded that manual nario, with Flutter spiking higher in the beginning, as shown in
testing was the most appropriate solution. Figure 5. On the other hand, React Native had slightly lower
memory usage than Flutter, with an average memory usage of
RESULTS 7.85% compared to Flutter’s average of 8.06%, as shown in
The results of the test scenarios conducted on React Native Figure 6. Moreover, the test results showed that Flutter had
and Flutter are presented in this section. fewer janky frames than React Native, with an average of 2.6
janky frames compared to React Native’s average of 3.6, as
shown in Figure 4.

Test 2 Results

Figure 4. Janky Frames

Test 1 Results
Figure 7. CPU Test 2

Figure 5. CPU Test 1

Test 1 focused on rendering a scrolling list and evaluated CPU

usage, memory usage, and janky frames. Flutter outperformed Figure 8. MEM Test 2

7
The second test scenario focused on evaluating the perfor- DISCUSSION
mance of accessing hardware functionality through the camera The discussion section of this study addresses several impor-
implementation. The results indicate that Flutter performed tant points related to the performance tests conducted on React
better than React Native on average regarding memory usage Native and Flutter.
and janky frames. Figure 7 shows that React Native had lower
CPU usage than Flutter, with an average CPU usage of 49.06% Method
for React Native and 81.63% for Flutter. On the other hand, First, it is worth noting that the janky frames in Flutter were
Figure 8 demonstrates that Flutter had lower average memory measured using the Flutter profiler tool. This could have
usage, with an average of 5.62%, compared to React Native’s impacted the results obtained since the profiling mode can
average of 7.76%. Additionally, Figure 4 shows that Flutter negatively impact the performance.
had significantly fewer janky frames, with an average of 0.8,
compared to React Native’s average of 52.6. Another limitation of this study is the absence of automated
tests, which could have improved the consistency and relia-
bility of the measurements. Additionally, each test was only
Test 3 Results performed five times for each scenario, which may not have
been sufficient to obtain accurate data. Furthermore, most
tools for measuring performance are primarily designed for
debugging performance issues and not for extracting easily
readable data. This makes it challenging to ensure the mea-
surement values are accurate and reliable.
It should also be noted that the performance tests were con-
ducted exclusively on an older Android device. Certain tests
may have yielded different results on newer Android or iOS
devices. Previous research indicates no significant differences,
at least not in the general trend.

Results
According to Cheon and Chavez [1], developing a cross-
Figure 9. CPU Test 3 platform app can be challenging due to subtle platform dif-
ferences that can significantly impact its design and coding.
Even with prior research, unexpected challenges can arise
during development that requires additional problem-solving.
We encountered such challenges while working with React
Native and Flutter, platforms with which we had limited expe-
rience. Despite this, we remained committed to delivering a
high-quality app by following best practices and applying the
knowledge we gained through our research and development
efforts. Cheon and Chavez also note that platform differences
can be complex and difficult to anticipate at the early stages
of development, making it essential to stay adaptable and
resourceful throughout the process.
Test 1
We performed a scrolling test for the first test, but we did not
evaluate how the frameworks handle networking. The addition
Figure 10. MEM Test 3 of networking was mainly intended to capture more realistic
data rather than to examine its effect on performance precisely.
It is possible that networking had a more significant negative
In the third test scenario, the application’s search feature was impact on one of the frameworks than the other. It is also worth
tested, and the performance of the frameworks in terms of noting that the difference in the way the scrolling list work
CPU usage, memory usage, and janky frames was evaluated. between the two frameworks could have had a significant
The results showed that, on average, Flutter performed better impact on performance, particularly with the inclusion of
than React Native in all three areas, as shown in Figure 9, networking. React Native loads content asynchronously off-
10, and 4. Specifically, the average CPU usage for Flutter screen, which may have considerably affected performance.
was 11.34%, which was significantly lower than the average
CPU usage for React Native, which was 36.21%. The average Test 2
memory usage for Flutter was 4.91%, which was also lower For the app written in Flutter, we used an official plugin for the
than the average memory usage for React Native, which was camera, while we relied on an Expo plugin for React Native.
5.77%. Finally, the average number of janky frames for Flutter Our findings indicate that React Native produced more janky
was 2, lower than the average number for React Native, 6.6. frames than Flutter, which exhibited a smoother performance.

8
Additionally, Flutter performed better than React Native by CONCLUSION
capturing approximately seven more pictures within 30 sec- In conclusion, this thesis aimed to compare React Native
onds. During our testing, we experimented with disabling the and Flutter, two popular cross-platform mobile application
autofocus option temporarily in React Native and observed a development frameworks, to determine which framework is
slight improvement in the speed of picture-taking. However, preferable for mobile app development. The research question
it’s worth noting that Flutter had higher CPU usage, perhaps focused on performance differences between the two frame-
due to the more significant number of pictures taken and saved works in terms of CPU usage, memory usage, and the number
to disk. of janky frames.
Test 3 In comparison with previous research, our findings are gener-
The last test in our experiment involved fetching one hundred ally consistent with the results of other studies that have com-
thousand posts and filtering them based on username. To pared the performance of React Native and Flutter. However,
accomplish this, we used the built-in filter function for both our study contributes to the existing research by providing
frameworks. However, we knew this approach might have hurt additional insights into the performance of these frameworks
performance for React Native due to a lack of compiler opti- under specific test scenarios.
mization, compared to using a for loop. Despite this concern, Based on the performance tests conducted, it can be concluded
we decided to stick with the built-in functions since we wanted that both frameworks have their strengths and weaknesses
to assess how the built-in functions compare. Our intentional in mobile application development. The results suggest that
lack of optimization might help explain why we see such a big Flutter may perform better in certain scenarios, particularly
difference in CPU usage in test 3, and it is conceivable that regarding CPU and memory usage and janky frames. However,
the results could be more equal through optimization. it is essential to note that these results are based on specific
Finally, it is worth considering whether performance is the test scenarios and may not necessarily hold for other use cases.
most crucial factor when choosing between React Native and Developers should consider the particular requirement of their
Flutter for mobile application development. While there were application to determine which framework would best fit their
differences in performance between the two frameworks, they needs.
were not significant enough to suggest that one is inherently It is worth noting that our study has some limitations. For
better than the other. Other factors, such as developer expe- example, we only tested performance on limited devices and
rience and community support, may also be important con- scenarios. Future research could explore the performance of
siderations when choosing a framework. Additionally, for these frameworks on a wider range of devices and scenarios.
applications where performance is critical, developing a native It is also essential to continue monitoring and comparing the
application may be a better option. performance of these frameworks as they evolve and new
updates are released.
Source criticism
We had difficulty finding relevant research with many cita- REFERENCES
tions, as many articles on this topic have been published re- [1] Yoonsik Cheon and Carlos Chavez. 2021. Converting
cently. However, we used various sources, including bachelor- Android Native Apps to Flutter Cross-Platform Apps. In
level papers, and also discovered noteworthy academic pa- Proceedings - 2021 International Conference on
pers that we incorporated into our research. These sources Computational Science and Computational Intelligence,
provided valuable insights into the performance evaluation CSCI 2021. Institute of Electrical and Electronics
of cross-platform development frameworks, and we deemed Engineers Inc., 1898–1904. DOI:
them credible because they were consistent with more estab- http://dx.doi.org/10.1109/CSCI54926.2021.00355
lished sources. Although there is limited research on this topic, [2] William Danielsson. 2016. React Native application
we took a comprehensive approach to gathering insights from development : A comparison between native Android
multiple sources to ensure the reliability and validity of our and React Native. Master’s thesis. http:
findings. //urn.kb.se/resolve?urn=urn:nbn:se:liu:diva-131645
[3] Lisandro Delia, Nicolas Galdamez, Pablo Thomas,
The work in the broader context Leonardo Corbalan, and Patricia Pesado. 2015.
The focus of this paper is on performance. However, it’s im- Multi-platform mobile application development analysis.
portant to note that optimizing for performance without con- 2015 IEEE 9th International Conference on Research
sidering potential environmental impacts is not ideal. Given Challenges in Information Science (RCIS) (2015). DOI:
the significant number of smartphone users worldwide, opting http://dx.doi.org/10.1109/RCIS.2015.7128878
for greater battery consumption to achieve better performance
[4] Stefan Huber, Lukas Demetz, and Michael Felderer.
may have adverse environmental effects.
2020. Analysing the performance of mobile
While cross-platform development tools offer several advan- cross-platform development approaches using ui
tages, such as shorter development timelines than native de- interaction scenarios. In Communications in Computer
velopment, they might consume more computing resources. and Information Science, Vol. 1250 CCIS. Springer,
Hence, it is crucial to consider the trade-offs between these 40–57. DOI:
two approaches and their resource usage implications. http://dx.doi.org/10.1007/978-3-030-52991-8{_}3

9
 [5] Jakub Jagiello. 2019. Performance comparison between When to prefer Flutter over native in mobile application
React Native and Flutter. Bachelor’s thesis. Umeå development. Bachelor’s thesis. Blekinge Institute of
University. https://urn.kb.se/resolve?urn=urn:nbn:se: Technology.
umu:diva-163190 https://urn.kb.se/resolve?urn=urn:nbn:se:bth-19712
[6] Yepang Liu, Chang Xu, and Shing Chi Cheung. 2014. [11] Carlos Manso Pinto and Carlos Coutinho. 2018. From
Characterizing and detecting performance bugs for Native to Cross-platform Hybrid Development. 9th
smartphone applications. In Proceedings - International International Conference on Intelligent Systems 2018:
Conference on Software Engineering. IEEE Computer Theory, Research and Innovation in Applications, IS
Society, 1013–1024. DOI: 2018 - Proceedings (7 2018), 669–676. DOI:
http://dx.doi.org/10.1145/2568225.2568229 http://dx.doi.org/10.1109/IS.2018.8710545
[7] Mohammad Mahendra and Bayu Anggorojati. 2020. [12] C. P. Rahul Raj and S. B. Tolety. 2012. A study on
Evaluating the performance of Android based approaches to build cross-platform mobile applications
Cross-Platform App Development Frameworks. ACM and criteria to select appropriate approach. 2012 Annual
International Conference Proceeding Series (11 2020), IEEE India Conference, INDICON 2012 (2012),
32–37. DOI:http://dx.doi.org/10.1145/3442555.3442561 625–629. DOI:
http://dx.doi.org/10.1109/INDCON.2012.6420693
[8] Iván Tactuk Mercado, Nuthan Munaiah, and Andrew [13] Marija Selakovic and Michael Pradel. 2016.
Meneely. 2016. The impact of cross-platform Performance issues and optimizations in Java script: An
development approaches for mobile applications from empirical study. In Proceedings - International
the user’s perspective. In WAMA 2016 - Proceedings of Conference on Software Engineering, Vol.
the International Workshop on App Market Analytics, 14-22-May-2016. IEEE Computer Society, 61–72. DOI:
co-located with FSE 2016. Association for Computing http://dx.doi.org/10.1145/2884781.2884829
Machinery, Inc, 43–49. DOI:
http://dx.doi.org/10.1145/2993259.2993268 [14] Wenhao Wu. 2018. React Native vs Flutter,
cross-platform mobile application frameworks.
[9] Piotr Nawrocki, Krzysztof Wrona, Mateusz Marczak, Bachelor’s thesis. Metropolia University of Applied
and Bartlomiej Sniezynski. 2021. A Comparison of Sciences.
Native and Cross-Platform Frameworks for Mobile
Applications. Computer 54, 3 (3 2021), 18–27. DOI: [15] Spyros Xanthopoulos and Stelios Xinogalos. 2013. A
http://dx.doi.org/10.1109/MC.2020.2983893
comparative analysis of cross-platform development
approaches for mobile applications. ACM International
[10] Matilda Olsson. 2020. A Comparison of Performance Conference Proceeding Series (2013), 213–220. DOI:
and Looks Between Flutter and Native Applications : http://dx.doi.org/10.1145/2490257.2490292

10