React Native Login to Home Screen navigation

Question

I'm new to React Native, and want to build a login page that connects to the home page, but if I use a single stack navigator, I get the little arrow in the top lefthand corner that just allows the user to go back to the login page without clicking on the logout button, which wouldn't log them out correctly. How can I make it so that arrow goes away on the Home Screen? Do I need to make 2 stack navigators and link them together somehow? I don't have any code written yet, I'm just looking for a general explanation before I get started.

Answer 1

React Native login screen with form validation using react-hook-form, yup, and a custom TextInput component. Let me walk through it and provide suggestions for improvement or possible fixes if needed:

import { Text, View, TextInput, Button, Alert, Pressable } from "react-native";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";
import CustomTextInput from "./Component/TextInput";
import axios from "axios";
import { useNavigation } from "@react-navigation/native";

const schema = yup.object({
    email: yup.string()
        .matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i, 'Invalid email format')
        .required('Email is required'),
    password: yup.string()
        .required('Please Enter your password')
        .matches(
            /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
            "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
        ),
}).required();


export default function Login() {
    const navigation = useNavigation();
    const { control, handleSubmit, formState: { errors } } = useForm({
        resolver: yupResolver(schema),
        defaultValues: {
            email: '',
            password: '',
        }
    });
    
    const onSubmit = (data) => {
        console.log(data)
        axios.post('https://api.rehabloop.com/auth/login', data)
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    }

    return (
        <View style={{paddingHorizontal: 20}}>
            
            <Text style={{fontSize: 40, marginBottom: 20 , textAlign: 'center', fontWeight: 900, color: '#000', marginTop: 250}}>Login</Text>
            <CustomTextInput
                label="Email"
                name="email"
                control={control}
                placeholder="Email"
                errors={errors}
            />

            <CustomTextInput
                label="Password"
                name="password"
                control={control}
                placeholder="Password"
                errors={errors}
            />

            <Button title="Submit" onPress={handleSubmit(onSubmit)} />
            <Pressable onPress={()=> navigation.navigate('SignUp')}>
  <Text style={{textAlign: 'center', fontSize: 20, fontWeight: 700, paddingVertical: 10}}>Don't have an account? 
    <Text style={{color: 'red'}}> Sign Up</Text>
  </Text>
</Pressable>
        </View>
    );
}

CustomTextInput component is looking great! It's well structured and makes use of react-hook-form's Controller to handle form input along with validation

import { Controller } from "react-hook-form"
import { StyleSheet, Text, View } from "react-native"
import { TextInput } from "react-native-paper"

export default function CustomTextInput({ name, control, label, onChangeText, ...props }) {
    return (
        <Controller
            control={control}
            name={name}
            rules={{
                required: true,
            }}
            render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
                <View>
                    <TextInput
                        label={label}
                        onBlur={onBlur}
                        onChangeText={onChange}
                        value={value}
                        mode='outlined'
                        style={styles.form}
                        {...props}
                    />
                    {error && <Text style={styles.error}>{error.message}</Text>}
                </View>
            )}
        />
    )
}

const styles = StyleSheet.create({
    form: {
        marginVertical: 5
    },
    error: {
        paddingHorizontal: 10,
        color: 'red'
    }
})

Answer 2

You can also check the documentation of React Navigation authentication flow according to the documentation Don't manually navigate when conditionally rendering screens between Auth and Home screens.

isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
);

Full documentation of React Navigation

Answer 3

Got it, need to set "headerLeft" to null in the Stack Screen