App Development Using React Native, Expo and AWS
Uploaded by
Editor IJTSRDApp Development Using React Native, Expo and AWS
Uploaded by
Editor IJTSRDInternational Journal of Trend in Scientific Research and Development (IJTSRD)
Volume 4 Issue 4, June 2020 Available Online: www.ijtsrd.com e-ISSN: 2456 – 6470
App Development using React Native, Expo and AWS
Shiraz Ali, Shubham
Department of Computer Science and Engineering, Dronacharya College of Engineering,
Khentawas Farukhnagar, Gurugram, Haryana, India
ABSTRACT How to cite this paper: Shiraz Ali |
App development often requires the developer to have the knowledge of Shubham "App Development using React
different platforms like android, ios, the two leading operating systems for Native, Expo and AWS" Published in
mobile devices. To develop android apps one need to learn complex language International Journal
like Java or Kotlin and Android Studio IDE (Integrated Development of Trend in Scientific
Environment) whereas for ios languages are Swift, C#, objective C and Xcode Research and
as environment. The two applications may have the same layout and logic but Development
several components of the user interface (UI) will differ and the applications (ijtsrd), ISSN: 2456-
themselves need to be developed in two different languages. Besides, certain 6470, Volume-4 |
hybrid mobile application frameworks existing in the market were not able to Issue-4, June 2020, IJTSRD31360
cater similar experience to the same user on all native platforms. pp.1307-1309, URL:
www.ijtsrd.com/papers/ijtsrd31360.pdf
This thesis has evaluated the newly released framework React Native that can
create both iOS and Android applications by compiling the code written in
Copyright © 2020 by author(s) and
React. The resulting applications can share code and consist of the UI
International Journal of Trend in Scientific
components which are unique for each platform. The thesis focused on
Research and Development Journal. This
Android and tried to replicate an existing Android Application in order to
is an Open Access article distributed
measure user experience and performance. The result was surprisingly
under the terms of
positive for React Native as some users could not tell the two applications
the Creative
apart and nearly all users did not mind using a React Native application.
Commons Attribution
The overall experience is that React Native a very interesting framework that License (CC BY 4.0)
can simplify the development process for mobile applications to a high degree. (http://creativecommons.org/licenses/by
As long as the application itself is not too complex, the development is /4.0)
uncomplicated and one is able to create an application in very short time and
be compiled to both Android and iOS. The application base was set up using
Expo. Expo is a framework and a platform for universal React applications. It is
a set of tools and services built around React Native and native platforms that
help you develop, build, deploy, and quickly iterate on iOS, Android, and web
apps from the same JavaScript/TypeScript codebase.
KEYWORDS: React-Native, AWS, Amplify, Expo, Android, Ios
INTRODUCTION TO APP
App is created using expo-cli with a blank template providing javascript codebase. This project integrates a React Native front-
end with an AWS Amplify back-end that has user authentication (AWS Cognito) and the Storage API from AWS Amplify. This
configuration allows us to perform CRUD operations to interact with Amazon S3 from our React native front end.
App Overview
Users can sign up/in to the app.
Users can upload pictures by pressing the add button.
Users can delete pictures by pressing the trash button.
Users can update the feed by pressing the reload button.
Requirements
NodeJs, npm, expo-cli, react-native, aws-amplify
Configuring the project
1. Initialize the project in your directory using blank template
expo init S3 Image Upload
2. Configure your AWS account
amplify configure
@ IJTSRD | Unique Paper ID – IJTSRD31360 | Volume – 4 | Issue – 4 | May-June 2020 Page 1307
International Journal of Trend in Scientific Research and Development (IJTSRD) @ www.ijtsrd.com eISSN: 2456-6470
3. Initialize amplify project
amplify init
4. Add auth
amplify add auth
# When prompt, choose: Yes, use the default configuration.
5. Add Storage
amplify add storage
# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write access.
6. Deploy your project to AWS
amplify push
@ IJTSRD | Unique Paper ID – IJTSRD31360 | Volume – 4 | Issue – 4 | May-June 2020 Page 1308
International Journal of Trend in Scientific Research and Development (IJTSRD) @ www.ijtsrd.com eISSN: 2456-6470
Running the Application
1. Install client dependencies.
npm install
2. Launch the React Native app in your simulator under your project directory.
expo start --ios
# or
expo start --android
Link to access app
https://expo.io/@shirazali1997/image-upload
Screenshots
@ IJTSRD | Unique Paper ID – IJTSRD31360 | Volume – 4 | Issue – 4 | May-June 2020 Page 1309
