Login not going to HomeScreen - reactjs

Question

My login not going to HomeScreen, but when I reload the app it will automatically go to HomeScreen? The login functionality works fine the only thing that bugging me right now, it needs to reload the app before it will go to HomeScreen.
Below are the file for my App, LoadingScreen, LoginScreen, and HomeScreen.
App.js
import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SignupScreen from './screens/SignupScreen';
import LoginScreen from './screens/LoginScreen';
import LoadingScreen from './screens/LoadingScreen';
import HomeSceen from './screens/HomeScreen';
import AsyncStorage from '#react-native-community/async-storage';
const App = ({ navigation }) => {
const [isloggedin, setLogged] = useState(null);
const detectLogin = async () => {
const token = await AsyncStorage.getItem('token');
if (token !== null) {
setLogged(true);
} else {
setLogged(false);
}
};
useEffect(() => {
detectLogin();
}, []);
const StackApp = createStackNavigator();
return (
<NavigationContainer>
<StackApp.Navigator headerMode="none">
<StackApp.Screen name="loading" component={LoadingScreen} />
<StackApp.Screen name="home" component={HomeSceen} />
<StackApp.Screen name="login" component={LoginScreen} />
<StackApp.Screen name="signup" component={SignupScreen} />
</StackApp.Navigator>
</NavigationContainer>
);
}
export default App;
LoadingScreen.js
import React, { useEffect } from 'react';
import {
ActivityIndicator,
View,
StyleSheet
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
const LoadingScreen = (props) => {
const detectLogin = async () => {
const token = await AsyncStorage.getItem('token');
if (token) {
props.navigation.replace("home");
} else {
props.navigation.replace("login");
}
};
useEffect(() => {
detectLogin();
}, []);
return (
<View style={styles.loading}>
<ActivityIndicator size="large" color="#ff0550" />
</View>
);
};
const styles = StyleSheet.create({
loading: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
});
export default LoadingScreen;
LoginScreen.js
import React, { useState } from 'react';
import { Button, TextInput } from 'react-native-paper';
import {
View,
Text,
StatusBar,
TouchableOpacity,
KeyboardAvoidingView,
Alert,
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
import { SafeAreaView } from 'react-native-safe-area-context';
const LoginScreen = (props) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = async (props) => {
fetch('http://localhost:3000/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
'email': email,
'password': password,
}),
})
.then(res => res.json())
.then(async (data) => {
try {
const items = [['token', data.token], ['user', data.user._id]];
AsyncStorage.multiSet(items);
props.navigation.replace('home');
} catch (e) {
console.log('error log', data.error);
Alert(data.error);
}
});
};
return (
<SafeAreaView style={{ flex: 1 }}>
<KeyboardAvoidingView behavior="position">
<StatusBar backgroundColor="#ff0550" barStyle="light-content" />
<View
style={{
borderBottomColor: '#ff0550',
borderBottomWidth: 4,
borderRadius: 10,
marginLeft: 20,
marginRight: 150,
marginTop: 4,
}}
/>
<Text
style={{
fontSize: 20, marginLeft: 18, marginTop: 20
}}
>Login with email</Text>
<TextInput
label='Email'
autoCapitalize="none"
mode="outlined"
value={email}
style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
theme={{ colors: { primary: '#ff0550' } }}
onChangeText={(text) => setEmail(text)}
/>
<TextInput
label='password'
autoCapitalize="none"
mode="outlined"
secureTextEntry={true}
value={password}
onChangeText={(text) => { setPassword(text) }}
style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
theme={{ colors: { primary: '#ff0550' } }}
/>
<Button
mode="contained"
style={{ marginLeft: 18, marginRight: 18, marginTop: 18, backgroundColor: '#ff0550' }}
onPress={() => handleLogin(props)}>
Login
</Button>
<TouchableOpacity>
<Text
style={{
fontSize: 18, marginLeft: 18, marginTop: 20
}}
onPress={() => props.navigation.replace('signup')}
>dont have a account ?</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</SafeAreaView>
);
};
export default LoginScreen;
HomeScreen.js
import React, { useEffect, useState } from 'react';
import { Button } from 'react-native-paper';
import { Text, View } from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
const HomeScreen = (props) => {
const logout = (props) => {
let keys = ['user', 'token'];
AsyncStorage.multiRemove(keys, (error) => {
props.navigation.replace('login');
});
};
return (
<View style={{ flex: 1, marginTop: 100 }}>
<Text style={{ fontSize: 18 }}>your email is sample here!</Text>
<Button
mode="contained"
style={{ marginLeft: 18, marginRight: 18, marginTop: 18, backgroundColor: '#ff0550' }}
onPress={() => logout(props)}
>
logout
</Button>
</View>
);
};
export default HomeScreen;

Answer 1

user props.navigation.navigate("Homescreen")
Also,you need add condition in app js if logged then go to homescreen else login page.
Check switch Navigator too from react-navigation
Replace just change current screen to another screen instead of navigating through screen. so it will stay that screen only