使用 react-native 和 firebase-firestore 登录，当我们打开应用程序时，如果已经登录，如何重定向到主页？

Question

I was watching a training video. In the video, he was doing the login process with firebase. At the same time, the application was redirecting the user to another page if logged in. I did what had to be done, but when I click the login button, a white screen greets me. Could you please tell me where I went wrong?

HomeStack.js

import { View, Text } from 'react-native'
import React from 'react'

import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'

import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ResetPasswordScreen from '../screens/Auth/ResetPasswordScreen'
import HomeScreen from '../screens/Home/HomeScreen'

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const BottomTab = () => {
  return (
    <Stack.Navigator initialRouteName="HomeScreen">
      <Stack.Screen
        name='HomeScreen'
        component={HomeScreen}
        options={{
          headerShown: false,
        }}
      />

      
    </Stack.Navigator>
  )
}

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="BottomTab">
      <Stack.Screen
        name="BottomTab"
        component={BottomTab}
        options={{
          headerShown: false
        }}
      />
    </Stack.Navigator>
  )
}

export default HomeStack

AuthStack.js

import { View, Text } from 'react-native'
import React from 'react'

import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'

import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ResetPasswordScreen from '../screens/Auth/ResetPasswordScreen'

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const BottomTabStack = () => {
  return (
    <Stack.Navigator initialRouteName="LoginScreen">
      <Stack.Screen
        name='LoginScreen'
        component={LoginScreen}
        options={{
          headerShown: false,
        }}
      />

      <Stack.Screen
        name='SignUpScreen'
        component={SignUpScreen}
        options={{
          headerShown: false,
        }}
      />

      <Stack.Screen
        name='ResetPasswordScreen'
        component={ResetPasswordScreen}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  )
}

const AuthStack = () => {
  return (
    <Stack.Navigator initialRouteName="BottomTabStack">
      <Stack.Screen
        name="BottomTabStack"
        component={BottomTabStack}
        options={{
          headerShown: false
        }}
      />
    </Stack.Navigator>
  )
}

export default AuthStack

and LoginScreen.js

import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, TextInput, Button } from 'react-native'
import React, { useContext } from 'react'

import IconFA5 from 'react-native-vector-icons/FontAwesome5'

import { AuthContext } from '../../navigation/AuthProvider'
import { Formik, validateYupSchema } from 'formik'
import * as yup from 'yup'

const color = '#aaa';



const LoginScreen = ({ navigation }) => {

  const { login } = useContext(AuthContext);

  const loginValidationSchema = yup.object().shape({

    email: yup
      .string()
      .required("Boş Geçilemez")
      .email("Geçerli bir email giriniz!"),
    password: yup
      .string()
      .required("Boş Geçilemez")
      .min(6, ({ min }) => 'Şifre en az' + min + 'karakterden olmalıdır')

  });

  return (

    <SafeAreaView style={{ width: '100%', height: '100%' }}>

      <View style={{
        width: '100%',
        height: '90%',
        alignItems: 'center',
        justifyContent: 'center'
      }}>

        <View style={{
          width: '75%',
          alignItems: 'center',
          padding: 10,
          backgroundColor: '#ddd',
          borderRadius: 30
        }}>
          <Text style={{fontSize:24,color:'#000'}}>Üye Girişi</Text>
          <Formik
            validationSchema={loginValidationSchema}
            initialValues={{ email: '', password: '' }}
            onSubmit={values => login(values.email, values.password)}>
            {({ handleChange, handleBlur, handleSubmit, values, errors, isValid,
            }) => (
              <>
                <TextInput
                  name="email"
                  placeholder='Email Adresiniz'
                  style={{
                    height: 50,
                    width: '90%',
                    margin: 10,
                    borderColor: '#000',
                    borderWidth: 1,
                    borderRadius: 10,
                    padding: 10,
                    fontSize: 16
                  }}
                  onChangeText={handleChange('email')}
                  onBlur={handleBlur('email')}
                  value={values.email}
                  keyboardType="email-address"
                />
                {errors.email && <Text style={{ color: '#f00', fontSize: 14 }}>{errors.email}</Text>}

                <TextInput
                  name="password"
                  placeholder='Şifreniz'
                  style={{
                    height: 50,
                    width: '90%',
                    margin: 10,
                    borderColor: '#000',
                    borderWidth: 1,
                    borderRadius: 10,
                    padding: 10,
                    fontSize: 16
                  }}
                  onChangeText={handleChange('password')}
                  onBlur={handleBlur('password')}
                  value={values.password}
                  keyboardType="visible-password"
                  secureTextEntry
                />
                {errors.password && (<Text style={{ color: '#f00', fontSize: 14 }}>{errors.password}</Text>)}

                <View style={{ width: '60%' }}>
                  <Button style={{margin:10}}
                    color='#d55'
                    onPress={handleSubmit}
                    disabled={!isValid}
                    title="Giriş" />
                </View>


              </>
            )}
          </Formik>
        </View>

      </View>

      <View style={{
        backgroundColor: '#fff',
        width: '100%',
        height: 75,
        bottom: 0,
        position: 'absolute',
        flexDirection: 'row'
      }}>
        <TouchableOpacity style={{
          flex: 1,
        }} onPress={() => {
          navigation.navigate("LoginScreen")
        }}>
          <View style={{
            backgroundColor: '#fff',
            flex: 1,
            height: 75,
            bottom: 0,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
          }}>

            <IconFA5 name='user-shield' color={'#d55'} size={30} />
            <Text style={{ fontSize: 20, color: '#d55' }}>Giriş Yap</Text>

          </View></TouchableOpacity>
        <TouchableOpacity style={{
          flex: 1,
        }} onPress={() => {
          navigation.navigate("SignUpScreen")
        }}>
          <View style={{
            backgroundColor: '#fff',
            flex: 1,
            height: 75,
            bottom: 0,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
          }}>

            <IconFA5 name='user-plus' color={color} size={30} />
            <Text style={{ fontSize: 20, color: color }}>Kayıt OL</Text>

          </View></TouchableOpacity>

        <TouchableOpacity style={{
          flex: 1,
        }} onPress={() => {
          navigation.navigate("ResetPasswordScreen")
        }}>
          <View style={{
            backgroundColor: '#fff',
            flex: 1,
            height: 75,
            bottom: 0,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
          }}>

            <IconFA5 name='key' color={color} size={30} />
            <Text style={{ fontSize: 20, color: color }}>Şifre Değiştir</Text>

          </View></TouchableOpacity>

      </View>
    </SafeAreaView>

  )
}

export default LoginScreen

Answer 1

You can check this article about the authentication flows. https://reactnavigation.org/docs/auth-flow/

Basically it's about the conditional rendering. You should store state about isLogin (async-storage etc.)

return (
  <NavigationContainer>
    <Stack.Navigator>
      isLogin ? (
      <>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </>
      ) : (
      <>
        <Stack.Screen name="SignIn" component={SignInScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
      </>
      );
    </Stack.Navigator>
  </NavigationContainer>
  )