Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation 5 - Nested navigation doesn't navigate

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>