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

Krissanawat Kaewsanmuang
Feb 7 · 3 min read

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

after installation success run project

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

Setup Firebase

for the first part, we want to finish on Firebase setup just add firebase package

expo-constant use for reading configuration from app.json

here we add firebase configuration to app.json

next, create Firebase component

as we prepare read Firebase config from app.json

for using we import component to any file that we want

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

just replace splash.png is done


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.


for JS Coder

Krissanawat Kaewsanmuang

Written by

React native passionate developer, Coffee addict



for JS Coder

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade