Build React Native Fitness App #12: Move to Expo part 1
Tags: reactnative, firebase, expo
Published: 2020-02-07 17:04:10

---
title: Build React Native Fitness App #12: Move to Expo part 1
published: true
description: 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
tags: react native ,firebase,expo
cover_image: https://cdn-images-1.medium.com/max/1024/0*lOQI1BSNl5wDSHdi.png
series: Build React native Fitness app
canonical_url: https://kriss.io/build-react-native-fitness-app-12-move-to-expo/
---


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](http://instamobile.io/) from instamobile

your can view the [previous chapter here](https://kriss.io/category/react-native-fitness/)

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

1. copy code from the old project to the expo

1. replace old package to expo package

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

![](https://cdn-images-1.medium.com/max/648/0*l92Zat6UtReF321s.png)

#### 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](https://kriss.io/build-react-native-fitness-app-12-move-to-expo/)._