Suprabha Supi
Suprabha's Blog

Suprabha's Blog

React Native App using EXPO

React Native App using EXPO

Suprabha Supi's photo
Suprabha Supi
Β·Aug 3, 2021Β·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

For beginner, who wants to start working on APP, it’s really easy to start with EXPO. You can build an app in short time using Native Base and Expo.
Xcode or Android Studio are not required.

You just have to install a tool called Expo πŸ˜‰

This toolchain includes over the air (OTA) updates, easy build tooling and a lot of extra API’s on top of React-Native.

What is OTA πŸ€”

An OTA update does pretty much what it says. You send an update out, the user downloads it, and the app updates β€” much like the web. OTA updates are a strong point of React Native. Since we, the developers, usually write our logic in JavaScript (which doesn’t have to be compiled and installed) we can just send out a new JavaScript bundle, and once the user downloads {"type":"block","srcIndex":0,"srcClientId":"9e83ea28-f3a5-4f1c-be6e-7ddde7f002cc","srcRootClientId":""} it they have the updated logic!

No waiting required.

Let's see few Pros and Cons of OTA πŸ‘‡

PROS βœ…

  1. Easy to get started
  2. Option to live reload on Expo app and others
  3. Support both iOS and Android from the start.
  4. Save valuable time when creating production builds
  5. Publish updates for your apps faster
  6. Easily we can integrate push notification

CONS ❌

  1. If you need to keep your app size extremely lean, Expo may not be the best choice
  2. Must stick with supported SDK’s

SETUP πŸ‘©πŸ»β€πŸ’»

You can setup the EXPO react native app by following steps:

  • Make sure Node.js has been installed in the system
  • $ brew install watchman
  • Install create-react-native-app globally $ npm install -g create-react-native-app
  • Then run the following commands to create a React Native project
    • Create Project called AwesomeProject and go inside it: $ cd create-react-native-app AwesomeProject
    • Start the app: $ npm start

Now, you can start the server.

Added the file structure for App: folder structure for react app using expo

Understand the key point of app.json file πŸ‘‡

In root you have app.json file which is configuration file for react native which contains many variables. Such as:

πŸ‘‰ Splash screen: First screen where user comes first.

πŸ‘‰ androidStatusBar: where the battery is present.

πŸ‘‰ associatedDomain: write all the list of api’s which we are using in app.

πŸ‘‰ Android permission: We have to give location information such as goole key.

certificateHash will be generated from android Xcode.

Debugging πŸ™‡β€β™‚οΈ

To debug react native code do install react-devtools:

$ npm install -g react-devtools

Then run in your terminal inside current project:

$ react-devtools

To work on single project, we can download into file by following steps:

$ npm install –save-dev react-devtools

Then add into script section in package.json

"react-devtools": "react-devtools"

Run:

$ npm run react-devtools

To Access console logs in React Native:

$ react-native log-ios

You can add the ICONS from EXPO Vector Icons

Build

Now, you have to build and export using following commands:

  1. To build android APK:

$ exp build:android

  1. Check the status:

$ exp build:status

The above command will give the result something like this:

The APK’s is hosted on amazon aws

[exp] Android:

[exp] APK: https://HOST/yourapp.apk

Where to log all bugs πŸ€”

You can use sentry for bug log.

We covered OTA, setup for Expo with react native and how can you add icons to the project.


Thanks for reading the article ❀️

Buy Me A Coffee

🌟 Twitter πŸ“š Ebooks 🌟 Instagram

Did you find this article valuable?

Support Suprabha Supi by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this