Journal of Research in Science and Engineering (JRSE)

ISSN: 1656-1996 Volume-7, Issue-1, January 2025

DOI: 10.53469/jrse.2025.07(01).02

Application Development Using Flutter and React

Native: Cross Platform Development
Khirod Chandra Panda
Software Developer
panda7@gmail.com

Abstract: Mobile application development has been in trend since the launch of smartphones. Most of the businesses are now handled
on mobile phones. Even Google has made it mandatory to build mobile-friendly websites. Mobile application developers need to develop
apps using the most suitable platform for better results and customer use. Here we have compared the most trending mobile application
development platforms that can be used to write a single codebase and deploy it on both Android and IOS. This paper also delves into
the reusability and performance considerations of both platforms. The future developments of both these cross-platforms have also been
discussed by considering the most emerging technologies. The research aims to provide enough information to the developers to
understand both these platforms, make better decisions, and produce efficient mobile applications. This paper provides a great resource
to all the developers and stakeholders to utilize both these cross platforms and produce the best mobile application projects.

Keywords: Mobile platforms, Cross-platform Framework, Mobile App Development, Flutter, React Native

1. Introduction idea and usage of the prior most adopted JavaScript

Language. It comes with a new idea which is supported by
A vast trend worldwide has been seen that consumers spend the React Framework of Web Development backed by
a lot of money to buy different mobile. This trend clarifies Facebook. It uses the architecture which JSI (Java Script
the usage of mobile devices in daily life. Every year Interface) which connects React Framework JavaScript
spending money on mobile apps is increasing continuously. Code and the native Layer of the Operating system to build
Mobile apps are a new way of interacting with users on mobile application code.
mobile devices rather than desktop sites. The statistics show
that site visiting requests on mobile devices are increasing In 2017, the launch of the new cross-platform Flutter with its
and their reach is about 50% as compared to desktop sites new programming language Dart. Flutter is a software
[1]. development kit that is backed by Google interestingly it
also owns the Android Operating system. It supports
Different Operating systems are used by different Android, IOS, Desktop, Web, and embedded systems which
manufacturers of the mobile device. IOS and Android are makes it more popular than React Native due to its diversity.
two widely used operating systems in mobile devices. Dart Language is a new language but its syntax matches
Statistics show that a quarter of mobile users use Android with Java and Koltin which are extensively used in Android
and roughly 23% hold IOS mobile devices [2]. Any mobile development. Flutter emerges with many tech giants as
application that has a diverse audience should be published Trustees like eBay, Google ads, and Alibaba Group which
on Android and IOS. The data demonstrate that 97% of enable it to produce a large user community.
mobile use these operating systems which means a vast
audience is targeted. Android and IOS have their own 2. Literature Review
distributed platforms, those are Playstore and AppStore
Respectively. Many companies prefer native applications Mobile phones become significant since the launch of the
over cross-platform applications due to their background Smartphone with its extensive and diverse features. But
services which can be utilized in native applications more different operating systems need different codebases for
efficiently. Native application cost is also another bottleneck applications which is solved by the emergence of 2 famous
that diverts the companies to Cross-Platform Framework. frameworks Flutter and React Native. The single codebase is
Product-based applications are very easy to maintain and revolutionizing the mobile applications [3].
develop using one codebase using cross-platform like React
Native and Flutter. Flutter is cross-platform which encompasses the Android
and IOS with extensive flexibility. Flutter utilizes the
With the emergence of the cross-platform application, native proprietary widget rather than converting them to native
applications are underrated to adopt by different companies, components. Its component is smooth and flexible due to
but not obsolete. There are still many areas where only optimized architecture which uses C/C++ language. Flutter
native applications are applicable. Cross-platform provides the hot reload option that only updates the change
applications combine both primary operating systems using and keeps the unchanged existing app to build the
one codebase which is easy to develop and maintain. application rapidly.

In 2015, React native was launched in the mobile industry Dart is an object-oriented and easy-to-model language that
which revolutionized the application using a single codebase can tackle the frontend and backend of applications as well.

6
 Journal of Research in Science and Engineering (JRSE)
ISSN: 1656-1996 Volume-7, Issue-1, January 2025

Dart provides the facility of integration of Android and other access core component. They use alternative ways to access
third-party APIs by different plug-ins. Flutter provides a the file and manipulate the user for required tasks.
gutsy User interface and fast response time making it
popular among others. Cross platforms have limitations in Update lag and Missing
features. When operating systems update with new features
React Native platform is equipped with the React Library these cross-platform come with solutions and take time, due
which open-source JavaScript framework that is the to which companies are unable to use the latest feature as
backbone of any website. It is very popular due to its large soon as possible. Despite of Update lag, there are many
community and optimized Document object model which missing features where cross-platform does not work
works like tree Data Structures. This framework provides appropriately due to security and its core usage of operating
ease to developers who are already familiar with JavaScript, system. Many apps use the core component of the operating
and only Understand the mobile application architecture and system to do a specific job which cross-platform lacks.
it is good to go for mobile development. These problems can be addressed by understanding the
Architecture.
React native utilizes JavaScript to combine the various
components of the application, which further converts the 5. Architecture
markup element into the native component which appears
like a native application. The native component is appealing
and efficient but it takes time to build and sync the code of
the application. It uses an approach that keeps its User
Interface thread away from the Background JS thread which
is responsible for the functionality of the application which
yields performance-intensive applications.

3. Benefits of Cross-platform
These cross-platforms provide many benefits that strengthen Figure 1:React Native Architecture
the application development industry which is why many
companies prefer this framework over the native application. React native uses the DOM document object model which
It offers a diverse range of benefits. Some of them are listed works like a tree data structure. The developer writes the
below: code in the JavaScript language and then it splits into two
• Reduce Cost: It provides a more cost-efficient solution threads one is the main (background) thread and another is
than a native application for each operating system. The the UI thread. The companioned we designed in JavaScript
technique is very simple to develop and maintain single converted into native UI Components using the bridge layer
code which will be applied to Android and IOS. as shown in the above figure. Although the conversion of the
• Widespread: companies can broadcast the product and JavaScript reacts component is time-consuming it looks like
service to all large market shares by targeting different a native component of the platform which is appealing to
platforms using one codebase for the whole application. customers.
• Rich User Experience: Client retention is very crucial
for any company, its consistent user experience is
provided to the audience which will help them to
promote and sell their product and service. It is a very
useful feature of the cross-platform.
• Native Features: Flutter and React Native continuously
develop plug-ins that enable native features like
Bluetooth, Sensors, Audio, etc. The native feature
enhances the user experience of the application.
• Model Building: Cross-platform enables the companies
to develop the rapid model of an idea and test it on
Android and IOS, which helps to take preemptive steps
to increase the efficiency and optimization of the
application rather than develop it on multiple platforms. Figure 2: Flutter System Overview
This helps the company to use their capital in the right
way. Flutter architecture consists of three tiers; one is the Dart
language tier where the developer writes the code then this
4. Problem Statement code bridges with the C++ engine after that it is finally
converted into machine code which is executable code for
Cross Platform does not bridge with core components that mobile devices. There are many elements involved in these
work with the platform for audio and video application tiers. The developer needs to understand the architecture and
program interface. Although it provides an alternative compare it with the requirements of the application. This
solution which will be discussed in the solution section. architecture enables them to optimize the app as much as
Reactive native and flutter do not come up with the file possible. The right use of the component in the right place is
very crucial to optimize cross-platform applications.

7
 Journal of Research in Science and Engineering (JRSE)
ISSN: 1656-1996 Volume-7, Issue-1, January 2025

6. Solutions optimization to fill the gap between native and cross-

platform application performance. Moreover, these
Bridging the front end with mobile applications is possible platforms need to be aligned with the latest technologies.
by cross-platform applications. Some applications are With the trend of Virtual Reality (VR) and AR, these cross-
discussed earlier. In this section, we come up with solutions. platforms need to integrate functionalities with these
Which is demonstrated in the architectural diagram. technologies.

9. Conclusion
React Native and Flutter offer immense solutions with
superb performance and uses. Both platforms have reduced
the maintenance cost and made it possible to codebase for
both Android and IOS. The developer needs to choose the
platform by considering the various factors associated with
each platform. These cross-platforms will play an important
role in the future of mobile application development.

Figure 3: React Native Vs Flutter References

React native provides the solution of the React-native- [1] gs. StatCounter, "Desktop vs Mobile vs Tablet
sounds library which provides the components for playing Market Share Worldwide," [Online]. Available:
sound clips on IOS and Android. React-native-video is a https://gs.statcounter.com/platform-market-
library that is utilized for playing and recording the video share/desktop-mobile-tablet/worldwide. [Accessed 21
[4]and[5]. Flutter offers the flutter sound library which March 2024].
supports all audio file formats for Android and IOS. A video [2] gs.statecounter, "Mobile Operating System Market
player plug-in is used for displaying video on Flutter Share Worldwide," February 2024. [Online].
widgets[6] and [7]. Available: https://gs.statcounter.com/os-market-
share/mobile/worldwide. [Accessed 19 March 2024].
The react-native-gl-model-view is a library used in React [3] E. Erturk, "2021 Proceedings Book of the 12th Annual
Native. It uses WebGL (Web Graphics Library) for CITRENZ Conference," in CITRENZ Conference,
rendering interactive 3d Graphics[8]. Flutter-3d-obj is a September 2021.
Flutter library that paves the way to develop around for [4] W. Wu, "React Native vs Flutter, cross-platform
displaying 3D images by hooking into OpenGL on Platforms mobile," Metropolia University of Applied Sciences, 1
because Flutter does not support OpenGL Directly [9]. March 2018.
[5] A. Fomushkin, "Practical application of advanced
The react-native-fs is a library of the react native which React Native concepts," Metropolia University of
supports native file system access for Android and IOS. Applied Sciences, 30 September 2019.
Each operating system needs configuration to grant [6] pu.dev, "flutter_sound package documentation,"
permission for accessing the file system [10]. Flutter [Online]. Available:
provides a solution for the file system with the help of the https://pub.dev/documentation/flutter_sound/latest/.
path-provider plug-in which is commonly used for the [Accessed 20 March 2024].
location on the primary operating system [11]. [7] pub.dev, "video_player package documentation,"
[Online]. Available:
7. Research Impact https://pub.dev/documentation/video_player/latest/.
[Accessed 20 March 2024].
Given the detailed analysis of cross-platform and how it [8] Fentaw and A. Eshetu, "Cross platform mobile
affects the performance of native applications, the writing application development : a comparison study of React
allows to equip the developers with this useful technology to Native Vs Flutter," University of Jyväskylä, 2020.
reflect efficiency in their systems as well as the process of [9] M. K. Fahnbulleh and X. SHUOBO, "Examining the
development. Certain difficulties for the mobile application Usage of Flutter to Design a Yatch in 3D,"
can only be solved with the use of Cross-Platform. Solutions International Journal of Research Studies in Computer
are suggested for the developers to overcome the hindrances Science and Engineering (IJRSCSE) , vol. 1, no. 1, pp.
existing to use React Native and Flutter. 1-11, 2021.
[10] H. Brito, Á. Santos, J. Bernardino and A. Gomes,
8. Future Developments "Mobile development in Swift, Java and React Native:
an experimental evaluation in audioguides," IEE, 2019.
Cross-platforms like React Native and Flutter hold a very [11] P. Tyagi, Building Cross-Platform Mobile Apps for
strong potential for the future. These platforms are now Android, iOS, Web & Desktop, Boca Raton, 13
moving toward multi-platform expansion where the August 2021.
developers will be able to codebase for web and desktop
platforms as well. Flutter has already moved toward this
step. Another future development is performance