Build React native Fitness app #2: Onboard screen
Tags: react, reactnative
Published: 2020-01-30 14:46:23

---
title: Build React native Fitness app #2: Onboard screen
published: true
date: 2020-01-30 02:51:13 UTC
tags: reactjs,react-native
canonical_url: http://kriss.io/build-react-native-fitness-app-2-onboard-screen/
cover_image: https://cdn-images-1.medium.com/max/1024/0*14f3PjcBWC-USt27.png
series: Build React native Fitness app
---

this tutorial is second 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 wants 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](http://instamobile.io) from instamobile

here the first screen of our app that should display choice for users to decide what screen that user goes to the next login or register screen. We using react native element for more comfortable work on UI

first, install react native element

```
yarn add react-native-elements
```

then open IntroScreen.js import necessary component

```
import {
  View,
  StyleSheet,
  ActivityIndicator,
  TouchableOpacity,
} from 'react-native';
import {Text, Icon, Image, Button} from 'react-native-elements';
```

first, we create the main global wrapper and header section

```
<View style={styles.container}>
   <View style={styles.headerContainer}>
     <Icon name="md-fitness" size={80} type="ionicon" />
     <Text h4>Welcome to Fitness Master</Text>
     <Text h5 style={{textAlign: 'center'}}>
       The best App for track Fitness workout and Meal planner
     </Text>
   </View>
 </View>
```

then add stylesheet

```
const styles = StyleSheet.create({
    container: {
      backgroundColor: '#F4F6FA',height:'100%',
      flexDirection: 'column',
      justifyContent: 'center',
    },
    headerContainer: {
      top: 30,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 40
    },
  });
```

later try close terminal and rebuild app again your will found this because we did not set up Font icon

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

we need to install react native vector icons

```
yarrn add react-native-vector-icons
```

for iOS install Cacoapod

```
cd ios ; pod install
```

then open Xcode open info.plist then register font

```
<key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5\_Brands.ttf</string>
    <string>FontAwesome5\_Regular.ttf</string>
    <string>FontAwesome5\_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
  </array>
```

then rebuild the project again

![](https://cdn-images-1.medium.com/max/578/1*iPiym0sWEK7hmeGQp3-VOQ.png)

![](https://cdn-images-1.medium.com/max/415/1*LjbVR7OuIHQYodyaWsP20g.png)

you will see icon error because we did not activate font icon in Android project

open android/app/build.gradle add code below

```
project.ext.vectoricons = [
  iconFontNames: ['MaterialIcons.ttf','Ionicons.ttf','FontAwesome.ttf']
]
apply from: "../../node\_modules/react-native-vector-icons/fonts.gradle"
```

now run react-native run-android agian

![](https://cdn-images-1.medium.com/max/418/1*kTlF706XTC32B4FFzHdWcQ.png)

next step we add image feature create a folder for containing an image

![](https://cdn-images-1.medium.com/max/259/1*BiXQOvfQ_mZvu0da2YbiCA.png)

than add below the title

```
<Image
  source={require('../assets/image/onboard.jpg')}
  style={{width: '100%', height: 300}}
  PlaceholderContent={<ActivityIndicator />}
/>
```

your will see simple full-width image

![](https://cdn-images-1.medium.com/max/578/1*eWklRThD3bNpmVo5mJZgDg.png)

![](https://cdn-images-1.medium.com/max/418/1*GG5ba7uVHsod2GZ1ZW9-vQ.png)

next, we hide header bar

```
static navigationOptions = {
  headerShown: false,
};
```

and add button also touchable text

```
<View style={styles.contentView}>
          <Button
            onPress={() => this.props.navigation.navigate('EmailInputScreen')}
            title="Get started"
            loading={false}
            loadingProps={{size: 'small', color: 'white'}}
            buttonStyle={{
              backgroundColor: '#7265E3',
              borderRadius: 5,
            }}
            titleStyle={{fontWeight: 'bold', fontSize: 23}}
            containerStyle={{marginVertical: 10, height: 50, width: 300}}
            underlayColor="transparent"
          />
          <Text h4 style={{textAlign: 'center', color: 'grey'}}>
            Already have an account?
          </Text>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('LoginScreen')}>
            <Text h4 style={{textAlign: 'center', color: 'blue'}}>
              Sign in
            </Text>
          </TouchableOpacity>
        </View>
```

then add some style

```
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F6FA',
    height: '100%',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  headerContainer: {
    top: 30,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40,
  },
  heading: {
    color: 'white',
    marginTop: 10,
    fontSize: 22,
    fontWeight: 'bold',
  },
  contentView: {
    marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```

that show properly on iOS

![](https://cdn-images-1.medium.com/max/578/1*3AmaPl0nmwbrNqFxBX7LuQ.png)

but android need fix

![](https://cdn-images-1.medium.com/max/417/1*5_ZovYtu899BjfSzEb7SAQ.png)

we reduce image height and margin

```
headerContainer: {
    // top: 30,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40,
  },
  heading: {
    color: 'white',
    marginTop: 10,
    fontSize: 22,
    fontWeight: 'bold',
  },
  contentView: {
    // marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
```

now we got the final result

![](https://cdn-images-1.medium.com/max/417/1*_SDw0KJcTmqcDQOuyIBUOA.png)

![](https://cdn-images-1.medium.com/max/578/1*TAdmFJQ1f0Zhb6r0DY6oSA.png)

#### **conclusion**

here we just start and finish working on React native layout for simple style but require an amount of work but in the final, we got a beautiful screen that makes us feel better

_Originally published at _[_Kriss_](https://kriss.io/build-react-native-fitness-app-2-onboard-screen/)_._

* * *