React Navigation stop back button behaviour on bottom bar

Question

Hey I am using the createBottomTabNavigator() from React Navigation and I have a custom topbar which I update with my own states. The problem is when I click on a Tab the listener gets called with every navigation so the topbar gets into the wrong state if you for example go to screen 2 the topbar changes for screen 2. When I press on the topbar back button it goes back to screen 1 and changes the topbar to screen 1 topbar. Now if I use the bottombar tab instead to navigate back instead of using the topbar one it keeps the topbar from screen 2. So my question is if I can disable somehow that if I press on the bottom bar that it navigates back to the initial screen 1.

 <Tab.Screen
      listeners={() => {
              switchTab(0);
            }}
            name="Input"
            children={() => (
              <SuchStackContainer
                ref={suchStackRef}
                switchStack={switchStack}
                listings={listings}
                setListings={setListings}
              />
            )}
            options={{
              tabBarLabel: 'Suche',
              tabBarIcon: ({color, size}) => (
                <Ionicons name="car" color={color} size={size} />
              ),
            }}
          />

which navigation version are you using? – Xhirazi Sep 14 '21 at 13:23 — Xhirazi, Sep 14 '21 at 13:23

score 3 · Accepted Answer · answered Sep 14 '21 at 05:28

I am supposing you are using Bottom Tabs Navigator from React Navigation. As mentioned in the docs you can override onPress method and navigate it to the desired tab. These can be specified under screenOptions prop of Tab.navigator or options prop of Tab.Screen. Let me know if you still need my help

function MyTabBar({ navigation }) {
  return (
    <Button
      title="Go somewhere"
      onPress={() => {
        // Navigate using the `navigation` prop that you received
        navigation.navigate('SomeScreen');
      }}
    />
  );
}

React Navigation stop back button behaviour on bottom bar

1 Answers1