See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/331429981

React Native Application Development

Conference Paper · March 2019

CITATIONS READS

0 3,130

3 authors, including:

Kamali Gupta Gupta Deepali

Chitkara University Chitkara University
6 PUBLICATIONS   20 CITATIONS    32 PUBLICATIONS   13 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Cloud computing View project

Heuristics View project

All content following this page was uploaded by Kamali Gupta on 01 March 2019.

The user has requested enhancement of the downloaded file.

 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

4th International Conference on Cyber Security and Privacy in Communication Networks

React Native Application Development

Vipul Kaushika, Kamali Guptab, Deepali Guptaa,b,*
a
Department of Computer Science and Engineering, #5027/G, Modern Housing Complex Manimajra , Chandigarh ,160101, India
b
Department of Computer Science and Engineering, #282 sector -48-B Kendriya Vihar Society Chandigarh ,160047, India
c
Department of Computer Science and Engineering, #203 sector-2 Kurukshetra, 136118, India

Abstract: Creating mobile apps compatible on cross platforms is a tedious

task and poses momentous challenges before a developer as he has to be 1.1. Introduction to Proposed Application: Medikyte.
acquainted with cognizance specific to two or more native platforms.
Besides, certain hybrid mobile application frameworks existing in market Medikyte is the mobile application generated by the author using react
were not able to cater similar experience to same user on all native native and is compatible with platforms iOS and Android. The application
platforms. Comprehending a solution to the underlying problem, the can cater to the user need of ordering medicines online. The new user is
research work presented in this paper utilizes the advantages of React-
Native framework to create a hybrid mobile application “Medikyte app” first registered and can enter the medicines he/she requires. Subsequently
capable of provisioning solutions pertaining to medications. The the user can generate an order of medicines and its quantity while adding
generated framework has been developed for Android and ios and the the user’s shipping address. A registered user can generate an order using
produced results reflects satisfactory experience of user in both the their phone’s camera or by their photo library in the phone as if the user
platforms. The proposed methodology has been implemented using
already have some prescribed prescription. Each order is uniquely
javascript ES6.
Keywords: Code-Base, React-Native, Firebase, cross-platform, mobile identified by an order id. Any user can place multiple orders. The react-
app, medication. native has a built-in feature codebase, a run-time environment that runs
same code for android and iOS and has been used by researcher to
develop compatible code. The modules of Medikyte application are
1. Introduction discussed in next section.

Creating mobile application [1] often tends to be a difficult job for a 1.2. Medikyte Modules
developer as the developer has to make one application for Android
platform and one for iOS platform which requires knowledge of two Exploiting ideas gathered from existing researches, the functionality of
different domains i.e. for Android mobile application, the knowledge of Medikyte have been partitioned into four modules which are explicated
IDE (Android studio, programming language: kotlin or java) and for iOS below:
mobile application (programming language: swift or objective c and IDE: • Home:
Xcode) is required. Besides, some popular hybrid mobile application It is the first module of the mobile application that is composed of two
framework made by developers were not much successful for creating the modules to realize its functionality. The screenshot comprising the Home
exact same experience on multiple native platforms. Module is presented in Figure 1 (a) and (b).
Comprehending a solution to the problem, this paper utilizes the
advantages of React-Native which is a framework capable of generating
hybrid mobile applications for cross platforms. React-Native developed
by Facebook developer’s in 2015, tends to have a single place to write
code in javascript ES6 as the programming language and build mobile
application for both iOS and Android at the same time with single code
written for both the native platforms. To implement complex
applications[2], it uses another dependency with name Redux or Mobx
capable of managing the state in react native.
Moreover, this Research paper describes the dependencies developed
by other react native developers that has been utilized in this research
work such as database and user interface. The research paper tends to
achieve the following objectives:
• To adjudge the user experience of the mobile application made by react
native framework as satisfactory.
• To check if the user interface formation is easy in comparison to other
native platforms.
• To differentiate between generation of simple and complex apps using
react-native.

Fig. 1 – (a) Home Module.

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 461
 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

Figure –1 (b) describes first page of App with Take a photo and Make a It is the second feature of the home module which if tapped by the user
list feature. will navigate the user to cart module of the mobile application.
• MyOrders:

Fig. 2 – (a) My orders module.

Figure 2-(a) describes placed orders by photo or my list. The detailed
functionality of this module has been elaborated through flowchart in
Figure 2-(b).

Fig. 1 –(b) Home module flowchart.

Fig. 1-(b) describes flowchart for home module. The modules that are
contained in it are discussed below:
1. Take a Photo:
It is the first feature of the mobile application that lets the user to place an
order by taking a photograph of prescription written on any medical slip
or piece of paper. Besides, it allows to fetch or extract existing photograph
from photo library. An interface is provided that in form of a dialogue box
prompts user to enter his choice by selecting any one option out of two
stated options, namely, Camera and Photo Library. Subsequent to it, the
photo will be verified by presenting two options to the user, namely,
choose and cancel. On selecting the cancel option, the photograph gets
disappeared and the user is returned to Home screen for re-processing. Fig. 2 –(b) My orders module flowchart.
Once choose option is selected, the selected photograph gets uploaded in This module carries the capability of showing the generated order. The
the database for future reference and for generating order. Consequently, layout of the module is categorized into show by List option and show by
the user is prompted with next button that acknowledges the user about Photo option. Former presents order id’s which are generated by the list
his order id along with the mode of payment and details of the order and later shows order id’s that are generated by photo. On tapping on any
placed. Again the user is shown the confirm order button and cancel order id user is redirected to another view that shows details pertaining to
button , if the user taps the cancel button then the user is returned to home the generated id.
screen. On clicking next button the user is redirected to existing address
list or provision to add a new address gets enabled. Then, the user • Cart:
confirms the order and the user is directed to my orders to show the
generated order.
2. Make a List:

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 462
 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

Fig. 3 –(a) Cart module. Fig. 4 –(a) Account module.

Figure 3-(a) describes getting user input on user choices and making a list. Figure 4-(a) describes account multiple features that have been created in
this app.

Fig. 4 –(b) Account module flowchart.

Figure 4-(b) describes account module flowchart to show its various sub-
modules.

• Account:
It is the last module of the mobile application which encompasses
multiple features that are as follows:
• Addresses:
This feature allows user to add, see and delete any desired address.
Fig. 3 –(b) cart module flowchart.
• Customer Care Email:
Figure 3-(b) describes cart module flowchart elucidating in detail the
This feature when tapped tells the companies email.
functionality. In its explanation, this module takes as input medicine name
• Call Support:
and required quantity using field textinput and generates a list using Add
This feature assists in getting a call from the company customer care.
button. Then the user is prompted with a message to confirm the order by
• Legal:
displaying order identity, mode of payment and the created list. On
It is place where all the documents of the mobile application can be
selecting confirm order button, user is redirected to address page to select
stored and shown to user when desired.
existing address or enter a new address. After selecting again, confirm
• Share:
order option, the user is navigated to my orders module of the mobile
It stores the link of the app store and can be shared to other users by
application to show the generated order. If the user selects cancel button,
third party mobile application.
the user is taken back to cart screen.
• Rate the App:
This feature sets the link of the app store where the user can submit the
• Account Module:
rating of mobile application and opens the link this option is tapped.
• Logout:
It is the feature in which the user can logout of the mobile application.

2. Related Survey

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 463
 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

The researcher has explored applications developed using a similar It acts as the storage unit for the mobile application and saves the account
approach that has been deployed in Play store and App Store to validate information, order information and address information pertaining to each
its functioning. The applications are illustrated below: user within seconds.
• Practo mobile application: • Storage:
Being a storage unit for images, it stores all the ordered images of various
Practo is a company which deals with ordering medicines and making
users.
appointment with the doctor and is really ahead in the game of health care • React-Native-Google-Places-Autocomplete[2]:
in india’s north region. It deals with all kind of doctors, assists in getting It is another product of google which is capable of getting the current geo
appointment from anywhere and holds a good user interface. location and the cities which the user searches. It presents location by
• Myra: fetching state followed by city. Rest location details are manually entered
This company also deals with health care, and being a Bengaluru- based by the user.
company offers advantage of getting the medicines under 1 hour at the • React-Native-Image-Crop-Picker[3]:
It is dependency which has a capability of getting image from camera and
doorstep. In inception to navigating in the mobile app, user enters
photo library. This capability is used in present work in option ordering
medicine name and quantity, sees the product and generates the order. from photo.
• NetMeds: • React-Native-Elements[4]:
This company also deals with ordering medicines and delivering the It is a dependency which helps the developer in configuring user interface
medicines at the user’s doorstep. as it has all the necessary defined components like button , list ,avatar etc.
• React-Native-Keyboard-Aware-Scroll-View[5]:
It is a dependency which is used only for ios for enabling virtual
keyboard.
3. Problem Statement
• React-Native-Segmented-Control-Tab[6]:
It is a dependency which creates segment of a component. Present work
Medikyte is a mobile application that is inclined towards providing uses this feature in differentiating order by list and by photo.
services at the doorstep by ordering medicines from nearby pharmacy and • React-Native-Vector-Icons[7]:
delivering at the user’s specified shipping address. It offers advantage of It is a dependency which is used along with react native elements to offer
easy-to-use-interface bearing simple order generation steps, thus, custom icons.
providing an interface in which older people can easy dive into and can • React-Navigation[8]:
get medicines at their doorstep. The application has been created keeping It is the most important dependency of react native as this redirects the
in mind the busy schedules of common and corporate people just with a user from one screen to another. Tab navigator is also provided by this
few clicks. dependency to create multiple tabs in mobile application. Stack navigator
is another important part that stores all the screens in a single stack.
• Native-Base[9-11]:
4. Working Methodolgy It is another user interface forming dependency which is capable of
creating user interface and contains elements such as button, image, text,
form, form input, list etc.

5. Results and Discussion

The application generated lets the user access the app using a simple
interface which is comprised of a number of modules already discussed
above. This section presents all the screenshots of the entire application
and are discussed below:

Fig. 5 –(a) Authentication flowchart.

The working methodology of the mobile app gets initiated with
authentication process. The flowchart for it is presented in Figure 5-(a).
The mobile application harnesses advantages of React-native framework.
The dependencies used in the generated modules are discussed below:
• React-Native-Firebase[1]: Fig. 6 – Home Module
It is a google product which is giving the backend to the mobile Figure 6 presents the first module of Medikyte and have two features
application and offers following capabilities: ‘Make a list’ which navigates the user to cart screen and ‘Take a photo’
• Authentication: which uses React-Native-Image-Crop-Picker to open camera and photo
Multiple authentication channels such as phone, email and social media library and generated order.
are supported. Present work exploits available services of phone
authentication.
• Real-Time Database:

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 464
 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

Fig. 10 – Place order.

Fig. 7 – Photo Library. Figure 10 elucidates options for selecting addresses from existing list.
Figure 7 allows the app to access the photo library of the phone in order to
allow user to take the image of the prescription.

Fig. 8 – User selected image. Fig. 11 – Confirm address.

Figure 8 elucidates the option “order by image” for selecting the image Figure 11 depicts app page that conforms against the selected address for
depicting the prescription. shipment of order.

Fig. 9 – Order details by image.

Figure 9 describes the order generated by image putting together the Fig. 12 – My orders module.
details like order id, price etc. Figure 12 expounds the second module of Medikyte that shows the order
which are generated either through order by List option or by Photo
option. It is segmented by using React-Native-Segmented-Control-Tab
dependency.

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 465
 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

Fig. 13 – Order details of photo. Fig. 16 – Order generation by list.

Figure 13 presents the order details generated through photo. Figure 16 screenshot of order that has been generated by user under cart
module.

Fig. 14 – Order details by list.

Figure 14 illustrates the details of order generated using list.
Fig. 17 – Attaching address in order.
Figure 17 describes placing order and adding address to it for shipment.

Fig. 15 – Cart module.

Figure 15 presents the third module of Medikyte and have the capability
of getting medicine name and medicine quantity, further add it in a list
Fig. 18 – Address for shipment.
and then generate order using React-Native-Firebase as this saves the list
Figure 18 depicts selection of address for shipment and confirmation
in real time database
whether the order can be placed to the selected address or not.

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 466
 Special Issue based on proceedings of 4th International Conference on Cyber Security (ICCS), 2018

Fig. 21 – Logout feature.

Figure 21 provisions logging out from the app.

6. Future Scope

Medikyte is a mobile application which enables user to enter medicine

name and its quantity; generates orders via list and photos; adds addresses
and places order. The application is complete in generating order at
doorstep once the user is aware of the required medicines. The design and
interface is user friendly and performs the desired functionality accurately
as indicated in results and discussion section. The future scope of the
present work constitutes developing a pharmacy application with name
‘Medikyte Pharmacy’ that provides solutions pertaining to display of
product stock and establishes a mapping of disease type and product type.
Fig. 19 – Account module. The future application can be integrated with existing app to make it a
Figure 19 depicts the fourth module of Medikyte and have multiple
complete pharmaceutical product that allows user to view medicine for a
features as add, see, delete address, get call support from customer care
and get email id of customer care. It further extracts legal documents of disease type and after viewing complete stock and price listings, places
the company and then share and rate application if deployed on app store. orders; thereby locating nearest pharma stores available.
Logout feature is also supported.

7. References

1. https://rnfirebase.io.
2. https://github.com/tolu360/react-native-google-places
3. https://github.com/ivpusic/react-native-image-crop- picker
4. https://github.com/react-native-training/react-native-elements
5. https://github.com/APSL/react-native-keyboard-aware-scroll-view
6. https://github.com/kirankalyan5/react-native-segmented-control-tab
7 https://github.com/oblador/react-native-vector-icons
8. https://reactnavigation.org
9. https://nativebase.io
10. Danielsson, W., Froberg, A., & Berglund, E. (2016). React Native
Application Development- A comparison between native Android and React
Native,(pp. 1-70), http://www.diva-
portal.org/smash/get/diva2:998793/FULLTEXT02
11. Beyshir, A. (2016). Cross-platform development with React Native.(pp. 1-
Fig. 20– Customer care email and legal feature.
32), https://uu.diva-portal.org/smash/get/diva2:971240/FULLTEXT01.pdf
Figure 20 describes app page that assists user to get connected to
customer care in case of any issue in order placement and generation and
also allows for legal feature.

INTERNATIONAL JOURNAL OF ADVANCED STUDIES OF SCIENTIFIC RESEARCH (IJASSR)

ISSN 2460 4010 ABSTRACTED & INDEXED IN ELSEVIER-SSRN 467

View publication stats