I have a bottom tab navigator with two nested stack navigators like this:
import React from "react";import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";import { createStackNavigator } from "@react-navigation/stack";import { NavigatorScreenParams } from "@react-navigation/native";type BottomTabParams = { ScreenA: undefined; ScreenB: NavigatorScreenParams<StackBParams>;};const BottomTab = createBottomTabNavigator<BottomTabParams>();const BottomTabNavigator = () => { return (<BottomTab.Navigator initialRouteName="StackA"><BottomTab.Screen name="ScreenA" component={StackANavigator} /><BottomTab.Screen name="ScreenB" component={StackBNavigator} /></BottomTab.Navigator> );};export type StackAParams = { ScreenA: NavigatorScreenParams<BottomTabParams>; ScreenADetails: IADetailsData;};const StackA = createStackNavigator<StackAParams>();const StackANavigator = () => { return (<StackA.Navigator screenOptions={{ headerShown: false }}><StackA.Screen name="ScreenA" component={AScreen} /><StackA.Screen name="ScreenADetails" component={ADetailsScreen} /></StackA.Navigator> );};export type StackBParams = { ScreenB: undefined; ScreenBDetails: IBDetailsData;};const StackB = createStackNavigator<StackBParams>();const StackBNavigator = () => { return (<StackB.Navigator screenOptions={{ headerShown: false }}><StackB.Screen name="ScreenB" component={BScreen} /><StackB.Screen name="ScreenBDetails" component={BDetailsScreen} /></StackB.Navigator> );};export default BottomTabNavigator;
Now, in ADetailsScreen
I want to navigate to BDetailsScreen
, like this:
const ADetailsScreen: FunctionComponent<StackScreenProps<StackAParams, "ScreenADetails">> = ({ navigation, route,}) => { const onPress = () => { navigation.navigate("ScreenA", { screen: "ScreenB", params: { screen: "ScreenBDetails", params: detailsData } }); } return (...);}
But, this is not working, I'm just navigated to ScreenA
. What am I doing wrong?