I implement login/register in react native app. but my navigation fails.
This is my app.js file. Tab Navigation that should be rendered once user is authenticated otherwise I need to show login page.
const MainTabs = ({ navigation }) => {
const { logout, removeToken } = useContext(UserContext);
const handleLogout = async () => {
await removeToken();
navigation.replace('Login'); // Use replace instead of navigate
};
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{
headerShown: true,
headerRight: () => (
<Button
onPress={handleLogout}
title="Logout"
color="#000"
/>
),
}}/>
<Tab.Screen name="Calendar" component={CalendarScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
};
const AuthStack = () => {
return (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
<Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false }} />
</Stack.Navigator>
);
};
const AppNavigator = () => {
const { user} = useContext(UserContext);
return (
<Stack.Navigator>
{user ? (
<Stack.Screen
name="MainTabs"
component={MainTabs}
options={{ headerShown: false }}
/>
) : (
<Stack.Screen
name="Auth"
component={AuthStack}
options={{ headerShown: false }}
/>
)}
</Stack.Navigator>
);
};
const App = () => {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
};
export default () => (
<UserProvider>
<App />
</UserProvider>
);
This is login page. I get an issue with NAVIGATOR. IT says : The action ‘NAVIGATE’ with payload {“name”:”HomeTab”} was not handled by any navigator. Do you have a screen named ‘HomeTab’? Same if I give name: “HOME” .
const LoginScreen = ({navigation}) => {
const [identifier, setIdentifier] = useState('');
const [password, setPassword] = useState('');
const {login: loginContext} = useContext(UserContext);
const handleLogin = async () => {
try {
const response = await login(identifier, password);
loginContext(response.jwt); // Update context with the token
navigation.navigate('HomeTab'); // Navigate to HomeTab in MainTabs
} catch (error) {
console.error('Login error:', error);
}
};
useEffect(() => {
const checkUser = async () => {
const token = await AsyncStorage.getItem('userToken');
if (token) {
navigation.navigate('HomeTab');
}
};
checkUser();
}, [navigation]);
return (
<View style={styles.container}>
<TextInput
placeholder="Username or Email"
value={identifier}
onChangeText={setIdentifier}
style={styles.input}
/>
<TextInput
placeholder="Password"
value={password}
onChangeText={setPassword}
style={styles.input}
secureTextEntry
/>
<Button title="Login" onPress={handleLogin} />
<Button
title="Register"
onPress={() => navigation.navigate('Register')}
/>
</View>
);
};