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 ✅
- Easy to get started
- Option to live reload on Expo app and others
- Support both iOS and Android from the start.
- Save valuable time when creating production builds
- Publish updates for your apps faster
- Easily we can integrate push notification
CONS ❌
- If you need to keep your app size extremely lean, Expo may not be the best choice
- 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
AwesomeProjectand go inside it:$ cd create-react-native-app AwesomeProject - Start the app:
$ npm start
- Create Project called
Now, you can start the server.
Added the file structure for App:
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:
- To build android APK:
$ exp build:android
- 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 ❤️
| 📚 Ebooks |