Build React native Fitness app #1: Setup App with React navigation

this tutorial is first chapter of series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestion the ultimate goal is to create food and health recommendation using Machine learning we start with creating app that user want to use and connect to google health and apple heath for gathering everything to create dataset that uses for train model later I start with ultimate goal but we will start with create react native app and set up screen navigation with React navigation. inspired by React native Theme from instamobile

we using react-native CLI to create a new project I didn’t talk too much about how to install your can follow official document

first, run react-native init fitness_master

for this series I use real iPhone and Android device for development because emulator have consumed 3 GB of Ram is take my Macbook air very slow

for developing on the real device require a connection on the same Wifi and here thing that require for real device your can following instruction from an official document

next, we set up react-navigation for make screen navigation easier

for iOS is simple we install all javascript dependency and pod dependency is all done for more step you can follow official document on this post I add for making comfortable to follow

we use version 4 is more stable and don’t require learning new thing like version 5

first, install all main react-navigation package

yarn add react-navigation react-navigation-stack

then add all required dependency

yarn add react-native-reanimated react-native-gesture-handler
react-native-screens
react-native-safe-area-context
@react-native-community/masked-view

finish with install Cacaopod dependency

cd ios ; pod install

To finalize the setup of react-native-screens , add the following dependencies to dependencies section in android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' 
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

create a new file for containing navigation

and place initial code

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import IntroScreen from '../screens/IntroScreen';
import LoginScreen from '../screens/LoginScreen';
import EmailInputscreen from '../screens/EmailInputScreen';
import PasswordInputscreen from '../screens/PasswordInputScreen';
const StackNavigator = createStackNavigator({
  IntroScreen: IntroScreen,
  LoginScreen: LoginScreen,
  EmailInputscreen: EmailInputscreen,
  PasswordInputscreen: PasswordInputscreen,
});
export default createAppContainer(StackNavigator);

then create four blank screen

fill out stater

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export class EmailInputScreen extends Component {
    render() {
        return (
            <View>
                <Text> EmailInputScreen </Text>
            </View>
        )
    }
}

export default EmailInputScreen

the last thing create stack navigation

const StackNavigator = createStackNavigator({
  IntroScreen: IntroScreen,
  LoginScreen: LoginScreen,
  EmailInputscreen: EmailInputscreen,
  PasswordInputscreen: PasswordInputscreen,
});

export default createAppContainer(StackNavigator);

 the final step we import Navigator.js to App.js

import React, {Component} from 'react';
import Navigator from './src/components/Navigator';
export default class App extends Component {
  render() {
    return <Navigator />;
  }
}

now you can view the result

for iOS

for Android

now we have done on the setup React native project and react-navigation in next chapter we learn how to create the first screen using react native elements

Also published on Medium.