React Native Auth Screen Login | Register - DevhubSpot

Share this article:
Design React Native Screen UI Login auth Register

In this article. I’ll show you how to create welcome,  login, Register screen in React-Native. Login and Register is the base of any application. Whenever we need user management we need Login/SignIn and Register/SignUp as it is the most basic flow which we prepare. For example finance, E-Commerce, Social Media, etc. everyone needs this flow.


Project Directory/File Structure

I created a structure which is as follows-



You can see
  1. App.tsx contains main Navigation and manage routing to navigate other screens
  2. Welcome.tsx for the Welcome Screen
  3. Login.tss for the Login Screen
  4. Register.tsx for the Register Screen
  5. AppTextInput.tsx for the text input component use login and register screen
  6. Images under assets directory will be used in Welcome Screen, log in and sign up screen

Huh! That was a lot of things. I hope you got the things which I want to share. Now Let’s do something interesting and see the code to complete this Welcome,  Login, Register example. Please follow the below steps.


Set-up and Installation

We are using the latest React navigation 6 for switching between the screens. To use this, we have to do some installation. So, let’s install that. 


For Navigation

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
or
yarn add @react-navigation/native @react-navigation/native-stack
yarn add react-native-screens react-native-safe-area-context

For Icons


npm install react-native-vector-icons
or 
yarn add react-native-vector-icons


After install dependencies run this command for iOS:

npx pod-install

Well, that’s a long list of installations but we have to install them as we are going to use them in our application.


Code Part

App.tsx


We add three screens here, one is welcome second is login and the other is signup in the stack navigator.

Now Open App.tsx in any code editor and replace the code with the following code:


import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import Welcome from './src/screens/Welcome';
import Login from './src/screens/Login';
import Register from './src/screens/Register';

const Stack = createNativeStackNavigator();

let theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#fff',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="Welcome" component={Welcome} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};


Welcome.tsx , Login.tsx and Signup.tsx

The UI of all screens is made with the custom component. We have added a secure text entry feature in the password section. And added a box (previously called card) for login using Facebook, Google, Twitter, or Apple ID.

Open Welcome.tsx in any code editor and replace the code with the following code:

Welcome.tsx

/* eslint-disable prettier/prettier */
import React from 'react';
import {
  Text,
  SafeAreaView,
  View,
  ImageBackground,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

const {height} = Dimensions.get('window');

const Welcome: React.FC<Props> = ({navigation: {navigate}}) => {
  return (
    <SafeAreaView>
      <View>
        <ImageBackground
          style={{height: height / 2.5, marginTop:10}}
          resizeMode="contain"
          source={require('../../assets/social.png')} />
        <View style={{paddingHorizontal:40, paddingTop:40 }}>
            <Text style={{fontSize: 35, color: '#1F41BB', textAlign: 'center'}}>
                Discover Your Social Platform Here
            </Text>

            <Text style={{fontSize:14, color:'#000', textAlign:'center', marginTop:20}}>
                Explore all the soical role based on your interest
            </Text>
        </View>
        <View style={{paddingHorizontal:20, paddingTop:60, flexDirection:"row"}}>
          <TouchableOpacity
            onPress={() => {
              console.log('login');
              navigate("Login");
            }}
            // eslint-disable-next-line react-native/no-inline-styles
            style={{
              backgroundColor: '#1F41BB',
              paddingVertical: 15,
              paddingHorizontal: 20,
              width: '48%',
              borderRadius: 10,
              shadowColor: '#1f41bb',
              shadowOffset: {width: 0, height: 10},
              shadowOpacity: 0.3,
              shadowRadius: 10}}>
                <Text style={{color:'#fff', fontSize:20, textAlign:'center'}}>
                    Login
                </Text>
            </TouchableOpacity>


            <TouchableOpacity style={{paddingVertical:15, paddingHorizontal:20, width:'48%', borderRadius:10,  shadowColor: '#FFF',
              shadowOffset: {width: 0, height: 10},
              shadowOpacity: 0.3,
              shadowRadius: 10}}
              onPress={() => {
                console.log('login');
                navigate("Register");
              }}
              >
                <Text style={{color:'#000', fontSize:20, textAlign:'center'}}>
                    Register
                </Text>

            </TouchableOpacity>
        </View>

      </View>   
    </SafeAreaView>
  );
};

export default Welcome;


Create a components folder in src folder and create AppTextInput.tsx file and add the following code:


AppTextInput.tsx

/* eslint-disable prettier/prettier */
import React, { useState } from 'react';
import {
  TextInput,
  TextInputProps,
} from 'react-native';


const AppTextInput: React.FC<TextInputProps> = ({...otherProps}) => {
  const [focused, setFocused] = useState<boolean>(false);
  return (
    <TextInput 
    onFocus={()=>setFocused(true)} 
    onBlur={()=>setFocused(true)}  
    placeholderTextColor={'#626262'}

    style={[
        {
          fontSize:14,
          padding:20,
          backgroundColor:'f1f4ff',
          borderRadius:10,
          marginVertical:10,
          borderColor:'#c2c2c2',
          borderWidth:3,
        },
        focused && {
          borderColor:'#1f41bb',
          borderWidth:3,
          shadowOffset:{width:4, height:10},
          shadowColor:'#1f41bb',
          shadowOpacity:0.2,
          shadowRadius:10
        },
    ]}
    {...otherProps}

  />
  );
};

export default AppTextInput;


Open login.tsx in any code editor and replace the code with the following code:

Login.tsx

/* eslint-disable prettier/prettier */
import React, {useState} from 'react';
import {Text, SafeAreaView, View, TouchableOpacity, Image} from 'react-native';
import AppTextInput from '../components/AppTextInput';
import Ionicons from 'react-native-vector-icons/Ionicons'


// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Login: React.FC<Props> = ({navigation: {navigate}}) => {

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [focused, setFocused] = useState<boolean>(false);
  return (
    <SafeAreaView>
      <View style={{padding:20}}>
          <View style={{alignItems:'center'}}>
                <Image
                style={{height: 100}}
                resizeMode="contain"
                source={require('../../assets/social.png')} />
                <Text style={{fontSize:30, color:'#1f41bb', marginVertical:30, fontWeight:'bold'}}>
                      Login Here
                </Text>
                <Text style={{fontSize:24, maxWidth:'60%', textAlign:'center', fontWeight:'600'}}>
                  Welcome back you've been missed!
                </Text>
          </View>
          <View style={{marginVertical:30}}>
              <AppTextInput  placeholder='Email' />
              <AppTextInput  placeholder='Password' />
          </View>

          <View>
              <Text style={{
                fontSize:14,
                color:'#1f41bb',
                alignSelf:'flex-end'
              }}>
                Forgot your password ?
              </Text>
          </View>
          <TouchableOpacity style={{
              padding:20,
              marginVertical:30,
              backgroundColor: '#1F41BB',
              borderRadius: 10,
              shadowColor: '#1f41bb',
              shadowOffset: {width: 0, height: 10},
              shadowOpacity: 0.3,
              shadowRadius: 10}}>

                  <Text style={{
                    color:'#fff',
                    textAlign:'center',
                    fontSize:20
                  }}>
                    Sign in
                  </Text>

          </TouchableOpacity>

          <TouchableOpacity onPress={() => {
                console.log('login');
                navigate("Register");
              }} style={{
              padding:10}}>

                  <Text style={{
                    color:'#000',
                    textAlign:'center',
                    fontSize:14
                  }}>
                   Create new account
                  </Text>

          </TouchableOpacity>

          <View style={{marginVertical:30}}>
                <Text style={{color:'#1f41bb', textAlign:'center', fontSize:14}}>
                  or continue with
                </Text>

                <View style={{
                  marginTop:10,
                  flexDirection:'row',
                  justifyContent:'center'
                }}>
                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-google" color="#000" size={20} />
                  </TouchableOpacity>

                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-apple" color="#000" size={20} />
                  </TouchableOpacity>

                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-twitter" color="#000" size={20} />
                  </TouchableOpacity>

                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-facebook" color="#000" size={20} />
                  </TouchableOpacity>

                </View>
          </View>
      </View>   
    </SafeAreaView>
  );
};

export default Login;


Open Register.tsx in any code editor and replace the code with the following code:

Register.tsx

/* eslint-disable prettier/prettier */
import React, {useState} from 'react';
import {Text, SafeAreaView, View, TouchableOpacity, Image} from 'react-native';
import AppTextInput from '../components/AppTextInput';
import Ionicons from 'react-native-vector-icons/Ionicons'


// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Register: React.FC<Props> = ({navigation: {navigate}}) => {

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [focused, setFocused] = useState<boolean>(false);
  return (
    <SafeAreaView>
      <View style={{padding:20}}>
          <View style={{alignItems:'center'}}>
             
                <Text style={{fontSize:30, color:'#1f41bb', marginVertical:30, fontWeight:'bold'}}>
                     Create Account
                </Text>
                <Text style={{fontSize:20, maxWidth:'80%', textAlign:'center', fontWeight:'600'}}>
                 Create an account so you can explore all the Social platform
                </Text>
          </View>
          <View style={{marginVertical:30}}>
              <AppTextInput placeholder='Name' />
              <AppTextInput placeholder='Email' />
              <AppTextInput placeholder='Password' />
              <AppTextInput placeholder='Confirm Password' />
          </View>
          <TouchableOpacity style={{
              padding:20,
              marginVertical:10,
              backgroundColor: '#1F41BB',
              borderRadius: 10,
              shadowColor: '#1f41bb',
              shadowOffset: {width: 0, height: 10},
              shadowOpacity: 0.3,
              shadowRadius: 10}}>

                  <Text style={{
                    color:'#fff',
                    textAlign:'center',
                    fontSize:20
                  }}>
                    Sign up
                  </Text>

          </TouchableOpacity>

          <TouchableOpacity onPress={() => {
              console.log('login');
              navigate("Login");
            }} style={{
              padding:10}}>

              <Text style={{
                color:'#000',
                textAlign:'center',
                fontSize:14
              }}>
                Already have an account
              </Text>

          </TouchableOpacity>

          <View style={{marginVertical:30}}>
                <Text style={{color:'#1f41bb', textAlign:'center', fontSize:14}}>
                  or continue with
                </Text>

                <View style={{
                  marginTop:10,
                  flexDirection:'row',
                  justifyContent:'center'
                }}>
                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-google" color="#000" size={20} />
                  </TouchableOpacity>

                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-apple" color="#000" size={20} />
                  </TouchableOpacity>

                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-twitter" color="#000" size={20} />
                  </TouchableOpacity>

                  <TouchableOpacity style={{padding:10, backgroundColor:'#ddd', borderRadius:5, marginHorizontal:10}}>
                      <Ionicons name="logo-facebook" color="#000" size={20} />
                  </TouchableOpacity>

                </View>
          </View>
      </View>   
    </SafeAreaView>
  );
};

export default Register;


OutPut:


Thanks for reading. Make sure to hit the comment box if you are facing any problems regarding this project. Share this with your community if the article is helpful.

Design React Native Screen UI Login auth Register
Share this article:
Comments
share
Categories
Recent Posts
Join Us

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.