Currently, in order to go from the login page to the userHomeScreen, I check to make sure a user is logged in and onboarded. The routes page automatically goes to the userHomeScreen since that’s the initial route.
I want to display information pulled from an API onto the userHomeScreen upon arrival, but currently it only appears after a re-render. In order to fix this, I called the API on the login page (page before the userHomeScreen) and want to pass the object over to the login page via navigation parameters. How do I go from the login page to the userHomeScreen inside the App Stack. I’ve tried doing navigation.navigate("Home", {screen: "userHomeScreen", params: {user: user_nm}) but I get the "navigation was not handled my any navigator error" . Please help.
This is my auth stack.
const Stack = createNativeStackNavigator();
const AuthStack = () => {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen
name="Home"
component={LandingPage}
options={({ navigation }) => ({ navigation })}
/>
<Stack.Screen
name="Login"
component={LoginScreen}
options={({ navigation }) => ({ navigation })}
/>
<Stack.Screen
name="Registration"
component={RegistrationScreen}
options={({ navigation }) => ({ navigation })}
/>
</Stack.Navigator>
);
};
export default AuthStack;
This is my AppStack
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const HomeStack = () => {
return (
<Stack.Navigator
initialRouteName="userHomeScreen"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="userHomeScreen" component={UserHome} />
<Stack.Screen name="viewRecipeScreen" component={ViewRecipe} />
<Stack.Screen name="recipeDetailsScreen" component={RecipeDetails} />
<Stack.Screen name="editProfileScreen" component={EditProfile} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="AllFriends" component={FriendsResultsScreen} />
</Stack.Navigator>
);
};
const AppStack = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarLabelStyle: styles.tabLabel,
headerShown: false,
tabBarIcon: ({ focused, size }) => {
let iconName;
if (route.name === "Home") {
iconName = focused ? "home" : "home";
} else if (route.name === "Add Recipe") {
iconName = focused ? "plus" : "plus";
} else if (route.name === "Find Friends") {
iconName = focused ? "search1" : "search1";
} else if (route.name === "Profile") {
iconName = focused ? "profile" : "profile";
} else if (route.name === "Feed") {
iconName = focused ? "profile" : "profile";
}
// Use the iconName variable in the AntDesign component
return <AntDesign name={iconName} size={size} color={"#8252ff"} />;
},
})}
>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Add Recipe" component={AddRecipe} />
<Tab.Screen name="Find Friends" component={OurQuery} />
<Tab.Screen name="Profile" component={ProfileScreen} />
{/* <Tab.Screen name="viewRecipeScreen" component={ViewRecipe} /> */}
</Tab.Navigator>
);
};
export default AppStack;
This is my routes page
const Routes = () => {
const { user, isOnboarded, initializing } = useContext(AuthContext);
if (initializing) return null;
return (
<NavigationContainer>
{user ? (
isOnboarded ? (
<AppStack />
) : (
<RegistrationStack />
)
) : (
<AuthStack />
)}
</NavigationContainer>
);
};
export default Routes;
