I think its a bug, the problem is as fallow:
I have this (stacks navigators inside a tab navigator):
- A tab
- Aa stack
- Ab stack
Where:
- Ab stack
- Aba component
- Abb component
When I use navigation.goBack() function in Abb component, goBack function send me to Aa stack instead Aba component.
It's a strange behavior cause if I press Android back button sends me to Aba component and that is how navigation.goBack should work I think.
This is my Ab stack
const ComplementFormStack = ({ navigation, route, onSetGoToSyncData }) => {
return (
<Stack.Navigator
initialRouteName="ComplementForms"
screenOptions={{
...stackScreenOptions({
onPressLeftIcon:
route?.state?.index > 0 ? navigation.goBack : navigation.openDrawer,
onPressRightIcon: onSetGoToSyncData,
index: route?.state?.index
})
}}
>
<Stack.Screen
name="ComplementForms"
component={ComplementForms}
options={{
title: "Formularios"
}}
/>
<Stack.Screen
name="FilterIndividualTable"
component={FilterIndividualTable}
options={{
title: "Filtros de busqueda"
}}
/>
</Stack.Navigator>
);
};
this is my A tab:
const SettingsTab = () => (
<Tab.Navigator initialRouteName="DataRecorded" backBehavior="order">
<Tab.Screen
name="DataRecorded"
component={DataRecordedStack}
options={{
title: "Registros"
}}
/>
<Tab.Screen
name="ComplementForms"
component={ComplementFormsStack}
options={{
title: "Formularios"
}}
/>
</Tab.Navigator>
);
this is stackScreenOptions , if you want to know:
const stackScreenOptions = ({
onPressLeftIcon = () => {},
onPressRightIcon = () => {},
index
}) => {
return {
headerStyle: {
backgroundColor: "white",
height: hp(8.3)
},
headerTintColor: Color.primary.dark,
headerTitleStyle: {
fontSize: hp(2.6),
},
headerLeft: () => {
if (index > 0) {
return <GoBackBtn onPress={onPressLeftIcon} />;
}
return <ButtonDrawer onPress={onPressLeftIcon} />;
},
headerRight: () => {
return <SyncButton onPress={onPressRightIcon} />;
}
};
};