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
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>
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.