This tutorial is the twelve chapter of the series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestions. The ultimate goal is to create food and health recommendation using Machine learning. We start with creating an app that the user wants to use and connect to google health and apple heath for gathering everything to create the dataset that applies for train model later. I start with the ultimate goal. Still, we will begin to build a react native app and set up screen navigation with React navigation. inspired by React native template from instamobile
your can view the previous chapter here
In this chapter we gonna move our app to the expo because React native CLI consumes a lot of resources. for moving process is easy because our app is on the initial mode here the summarize of step
create a new expo app
copy code from the old project to the expo
replace old package to expo package
replace Facebook login code to expo way
Create expo project
first, we create a new expo project
expo init fitexpo
after installation success run project
yarn start
copy code from the old project to the expo
next step we copy code from the old project to the new project
replace old package to expo package
here this list of the package that we need to install
yarn add react-native-elements formik yup react-native-password-strength-meter
Setup Firebase
for the first part, we want to finish on Firebase setup just add firebase package
yarn add firebase expo-constants
expo-constant use for reading configuration from app.json
{
"expo": {
"extra": {
"firebase": {
"apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
"authDomain": "rock-elevator-xxxxxx.firebaseapp.com",
"databaseURL": "https://rock-elevator-xxxxxx.firebaseio.com",
"projectId": "rock-elevator-xxxxxxx",
"storageBucket": "rock-elevator-xxxxxxx.appspot.com",
"messagingSenderId": "xxxxxxx",
"appId": "1:109151963963:web:xxxxxxx",
"measurementId": "G-xxxxxxx"
}
},
}
here we add firebase configuration to app.json
next, create Firebase component
import * as firebase from "firebase";
import Constants from "expo-constants";
firebase.initializeApp(Constants.manifest.extra.firebase);
export default firebase;
as we prepare read Firebase config from app.json
for using we import component to any file that we want
import firebase from "../components/Firebase";
Add SplashScreen
for the end in this part, we add a splash screen expo allow us to add splash screen config in the app.json
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
just replace splash.png is done
Conclusion
In this chapter, I decided to move all codebase to the Expo project because our app doesn’t require any native module. Expo provides dramatically reduce development time
Originally published at Kriss.
Top comments (0)