fbpx

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 template 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

 

For iOS

finish with install Cacaopod dependency

cd ios ; pod install

 

For Android

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

Conclusion

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.