Build React Native Fitness App #3: react native login screen
Tags: react, reactnative
Published: 2020-01-31 05:13:43

---
title: Build React Native Fitness App #3: react native login screen
published: true
date: 2020-01-30 22:05:06 UTC
tags: react,react native
canonical_url: https://kriss.io/build-react-native-fitness-app-3-react-native-login-screen/
cover_image: https://cdn-images-1.medium.com/max/1024/0*RQxPbfIl5Ktupfhj.png
series: Build React native Fitness app
---


here next screen we gonna implement react native login screen to make work both on iOS and Android this screen include two input fields email and password and three social login button eg. Facebook, Twitter, Google and submit button and last thing with a link for forgot password screen for the chapter we do only UI part

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

here for the previous chapter

[Build React native Fitness app #1: Setup App with React navigation](https://kriss.io/build-react-native-fitness-app-1-setup-app-with-react-navigation/)

[Build React native fitness app #2: Onboard screen](https://kriss.io/build-react-native-fitness-app-2-onboard-screen/)

first import necessary component

```
import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  ActivityIndicator,
  TouchableOpacity,
  KeyboardAvoidingView,
  ScrollView,
} from 'react-native';
import {Text, Icon, Input, Button, SocialIcon} from 'react-native-elements';
```

#### the container

first, for add container for handle input that needs to deal with the keyboard, we use KeyboardAvoidingView and add some active event style padding for a move up the input and add Scrollview for easy scrollable

```
<KeyboardAvoidingView
       behavior={'padding'}
       enabled
>
 <ScrollView
         style={styles.container}
         keyboardShouldPersistTaps="handled">

 </ScrollView>
</KeyboardAvoidingView>
```

for style container first requirement we want to center everything and set skyblue background-color

```
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F6FA',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
}
```

and for development mode, we set login screen to initial screen

```
const StackNavigator = createStackNavigator(
  {
    onBoardScreen: {
      screen: onBoardScreen,
    },
    EmailInputScreen: EmailInputScreen,
    LoginScreen: LoginScreen,
    TouchAuthentication: TouchAuthentication,
    PasswordInputScreen: PasswordInputScreen,
    SelectProfileScreen: SelectProfileScreen,
    SetGoalScreen: SetGoalScreen,
    CustomizeInterest: CustomizeInterest,
    SelectGender: SelectGender,
  },
  {
    initialRouteName: 'LoginScreen',
  }
);
```

and we don’t need header bar in this screen

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

here some first result from both platform

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

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

#### The header

next, we add logo in the header but we wrap with container

```
<View style={styles.headerContainer}>
   <Icon
     name="md-fitness"
     size={80}
     type="ionicon"
     color={'#7265E2'}
   />
 </View>
```

and add style

```
headerContainer: {
   top: 30,
   justifyContent: 'center',
   alignItems: 'center',
   padding: 40,
 },
```

here some result

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

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

#### the input

next, we add two input for email and password

```
<View style={styles.wrapper}>
   <Input
     leftIcon={
       <Icon
         name="email-outline"
         type="material-community"
         color="rgba(110, 120, 170, 1)"
         size={25}
       />
     }
     placeholder="Email"
     inputContainerStyle={styles.input}
     placeholderTextColor="grey"
     autoCapitalize="none"
     autoCorrect={false}
     keyboardType="email-address"
     returnKeyType="next"
   />
   <Input
     leftIcon={
       <Icon
         name="lock"
         type="simple-line-icon"
         color="rgba(110, 120, 170, 1)"
         size={25}
       />
     }
     inputContainerStyle={styles.input}
     placeholderTextColor="grey"
     placeholder="Password"
     autoCapitalize="none"
     secureTextEntry={true}
     autoCorrect={false}
     keyboardType="default"
     returnKeyType="next"
   />
 </View>
```

and add style to the input

```
wrapper:{
  },
  input: {
    borderWidth: 1,
    borderColor: 'white',
    borderLeftWidth: 0,
    height: 50,
    backgroundColor: 'white',
    marginBottom: 20,
  },
```

here some result

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

but we got icon issue on Android

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

for fix it we change the icon that works both platforms

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

#### the social button for login

next, we add three social buttons to activate login that we need to do in the next chapter

```
<View style={styles.socialWrapper}>
          <Text style={styles.signinwith}>Sign in with</Text>
          <View style={styles.socialLogin}>
            <SocialIcon type="facebook" light />
            <SocialIcon type="google" light />
            <SocialIcon type="twitter" light />
          </View>
          <Button
            title="Login"
            loading={false}
            loadingProps={{size: 'small', color: 'white'}}
            buttonStyle={{
              backgroundColor: '#7265E3',
              borderRadius: 15,
            }}
            titleStyle={{fontWeight: 'bold', fontSize: 23}}
            containerStyle={{marginVertical: 10, height: 50, width: 300}}
            onPress={() => console.log('aye')}
            underlayColor="transparent"
          />
        </View>
      </ScrollView>
```

and style

```
socialWrapper: {
    marginTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  socialLogin: {
    flexDirection: 'row',
    marginTop: 10,
  },
```

here result

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

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

finish with add link to forgot password screen

```
<TouchableOpacity
  onPress={() =>
    this.props.navigation.navigate('ForgotPasswordScreen')
  }>
  <Text h5 style={{textAlign: 'center', color: 'blue'}}>
    Forgot Password?
  </Text>
</TouchableOpacity>
```

here final result

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

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

#### Conclusion

in this chapter, we learn how to use react native element create login screen on both Android and iOS next chapter we learn how to create register screen while separate input to multiple scree

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

* * *