Build React Native Fitness App #12: Move to Expo part 1

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

1. create a new expo app

2. copy code from the old project to the expo

3. replace old package to expo package

4. 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.