I have homescreen where I have three buttons: Receive, Deliver ,Return. In the bottom tab navigation I have same buttons. Now inside the deliver screen i have also have a return button where the user can click on it if the customer wants to return the shipment. My issue is when I click on deliver button from home screen then click on return button that is inside deliver screen I get " ERROR The action 'NAVIGATE' with payload {"name":"NestedReturn"} was not handled by any navigator." whereas if i click from bottom navigation same scenario. it works perfectly fine. Note: i have two types of users each has it's own navigation. This is My APP navigation
<NavigationContainer>
<Tab.Navigator>
{authState?.token ? (
<>
{authState.userType === UserType.shipper ? (
<>
<Tab.Screen
name="Home"
options={{
tabBarIcon: ({ color, size }) => (
<MaterialIcons name="home" size={size} color={color} />
),
headerShown: false,
}}
>
{() => (
<Stack.Navigator>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={({ route }) => ({
headerTitle: getHeaderTitle(route),
})}
/>
<Stack.Screen
name="NestedReceive"
options={{ title: "Receive" }}
component={ReceiveScreen}
/>
<Stack.Screen
name="NestedDeliver"
options={{ title: "Deliver" }}
component={DeliverScreen}
/>
<Stack.Screen
name="NestedReturn"
options={{ title: "Return" }}
component={ReturnScreen}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
/>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen
name="BarCodeScanner"
component={BarCodeScanner}
options={({ route }) => ({
title: route.params.fromScreen,
})}
/>
</Stack.Navigator>
)}
</Tab.Screen>
<Tab.Screen
name="Receive"
initialParams={{ fromScreen: "NestedReceive" }}
listeners={({ navigation }) => ({
tabPress: (event) => {
event.preventDefault();
navigation.dispatch(
CommonActions.navigate({
name: "BarCodeScanner",
params: {
fromScreen: "NestedReceive",
},
})
);
},
})}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="email-receive-outline"
size={size}
color={color}
/>
),
headerShown: false,
headerTitle: "receive",
}}
>
{() => (
<Stack.Navigator>
<Stack.Screen
initialParams={{ fromScreen: "NestedReceive" }}
name="BarCodeScanner"
component={BarCodeScanner}
options={{ title: "Receive" }}
/>
<Stack.Screen
name="NestedReceive"
options={{ title: "Receive" }}
component={ReceiveScreen}
/>
</Stack.Navigator>
)}
</Tab.Screen>
<Tab.Screen
name="Deliver"
initialParams={{ fromScreen: "NestedDeliver" }}
listeners={({ navigation }) => ({
tabPress: (event) => {
event.preventDefault();
navigation.dispatch(
CommonActions.navigate({
name: "BarCodeScanner",
params: {
fromScreen: "NestedDeliver",
},
})
);
},
})}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="truck-delivery-outline"
size={size}
color={color}
/>
),
headerShown: false,
headerTitle: "Deliver",
}}
>
{() => (
<Stack.Navigator>
<Stack.Screen
initialParams={{ fromScreen: "NestedDeliver" }}
name="BarCodeScanner"
component={BarCodeScanner}
options={{ title: "Deliver" }}
/>
<Stack.Screen
name="NestedDeliver"
options={{ title: "Deliver" }}
component={DeliverScreen}
/>
</Stack.Navigator>
)}
</Tab.Screen>
<Tab.Screen
name="Return"
initialParams={{ fromScreen: "NestedReturn" }}
listeners={({ navigation }) => ({
tabPress: (event) => {
event.preventDefault();
navigation.dispatch(
CommonActions.navigate({
name: "BarCodeScanner",
params: {
fromScreen: "NestedReturn",
},
})
);
},
})}
options={{
tabBarIcon: ({ color, size }) => (
<Octicons
name="package-dependencies"
size={size}
color={color}
/>
),
headerShown: false,
headerTitle: "Return",
}}
>
{() => (
<Stack.Navigator>
<Stack.Screen
initialParams={{ fromScreen: "NestedReturn" }}
name="BarCodeScanner"
component={BarCodeScanner}
options={{ title: "Return" }}
/>
<Stack.Screen
name="NestedReturn"
component={ReturnScreen}
options={{ title: "Return" }}
/>
</Stack.Navigator>
)}
</Tab.Screen>
</>
and here how i handle the return button in deliver component
const handleReturn = () => {
navigation.navigate("NestedReturn");
};