2

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} />;
    }
  };
};
Braven
  • 484
  • 1
  • 6
  • 27

0 Answers0