I am writing an application with react native. When the user opens the application, if there is no session token, the Welcome.js screen opens first. Then he clicks on the Login.js screen to log in. If the login is successful, I am trying to redirect to the Homepage. But I just couldn't. It gives an error. The error I get is this:
[
The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator. Do you have a screen named 'Home'?
]
**App.js Code**
import React, {useState,useEffect} from 'react';
import { LogBox,Linking } from 'react-native';
import { createDrawerNavigator,DrawerContentScrollView,DrawerItemList,DrawerItem } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AsyncStorage from '@react-native-async-storage/async-storage';
import FirstPages from './src/screens/FirstPages';
import Home from './src/screens/Home';
import Notification from './src/screens/Notification';
import Message from './src/screens/Message';
import MessageDetail from './src/screens/MessageDetail';
import Profile from './src/screens/Profile';
LogBox.ignoreLogs(['NativeBase:']);
function App() {
const [user,setUser] = useState(false);
//AsyncStorage.removeItem("user");
useEffect(()=>{
AsyncStorage.getItem('user').then((value)=>(
setUser(value != null && JSON.parse(value).id ? value : false )
));
});
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const MessageStack = createNativeStackNavigator();
function MessageMain (){
return(
<MessageStack.Navigator screenOptions={{headerShown: false}}>
<MessageStack.Screen name="Message" component={Message} />
<MessageStack.Screen name="MessageDetail" component={MessageDetail} />
</MessageStack.Navigator>
)
};
function BottomTab(){
return (
<Tab.Navigator screenOptions={{headerShown:false}}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Notification" component={Notification} />
<Tab.Screen name="Message" component={MessageMain} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
)
}
return (
<NavigationContainer>
{
user ?
<Drawer.Navigator initialRouteName="Home3" screenOptions={{headerShown: false}} >
<Drawer.Screen name="Home3" component={BottomTab} />
</Drawer.Navigator>
:
<FirstPages />
}
</NavigationContainer>
);
}
export default App;
**Login.js**
import React, {useState,useEffect} from 'react';
import { LogBox,KeyboardAvoidingView } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { FontAwesome } from '@expo/vector-icons';
import { Input,Image,View,Text,NativeBaseProvider,Button,ScrollView,Icon,Modal,FormControl } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import colors from "../config/colors";
LogBox.ignoreLogs(['NativeBase:']);
function Login( {navigation} ) {
const storeSetData = async (value) => {
try {
await AsyncStorage.setItem('user', value)
} catch (e) {
alert("Hata oluştu!");
return false;
}
}
//Login Post İşlemi
const LoginPost = ( )=>{
setRequestPost(true);
setButtonPost("İşleniyor...");
const formData = new FormData();
formData.append("user_login",1);
formData.append("u_name",userName);
formData.append("u_pass",userPass);
fetch(API_URL, {
method: 'post',
body: formData,
})
.then((response) => response.json())
.then((responseData) => {
if(responseData.success){
const dataStringify = JSON.stringify({
id:responseData.user.u_id,
full_name:responseData.user.u_full_name,
name:responseData.user.u_name,
image:responseData.user.u_image
});
storeSetData(dataStringify);
//storage kayıt işleminde hata varsa uyar
if(!storeSetData){
setAlertModal( { message:"Hata oluştu!",type:"error" });
setShowModal(true);
return false;
}
setAlertModal( { message:responseData.success,type:"success" });
//redirect
navigation.navigate("Home");
}else{
setAlertModal( { message:responseData.error,type:"error" });
}
setShowModal(true);
setButtonPost("Giriş Yap");
})
.catch((error) => {
setAlertModal( { message:"Bir hata oluştu!",type:"error" } );
setButtonPost("Giriş Yap");
})
.finally(()=>{
setButtonPost("Giriş Yap");
setRequestPost(false);
});
}
return (
<NativeBaseProvider>
<LinearGradient
colors={['rgba(255, 221, 214, .95)', 'rgba(249, 241, 214, .9)']}
start={{ x: 0.65, y: 0.33 }}
end={{ x: 0.35, y: 0.33 }}
flex={1}
>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
>
<ScrollView>
<View flex="1" pt="5" pb="0" px={5}>
<Image
source={require("../img/login.png")}
alt="Alternate Text"
flex="1"
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
</LinearGradient>
</NativeBaseProvider>
);
}
export default Login;
**FirstPages.js**
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Welcome from './Welcome';
import Register from './Register';
import Login from './Login';
const Stack = createNativeStackNavigator();
const FirstPages = () => {
return(
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
)
};
export default FirstPages;You cannot navigate to a screen outside the current navigator like that.
It is recommended that you use the authentication flow in the react navigation docs here: https://reactnavigation.org/docs/auth-flow
It uses conditional operations to change the navigator, instead of directly navigating to a screen.
For Example:
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} />
</>
)
Source: https://reactnavigation.org/docs/auth-flow#how-it-will-work