I am attempting to create a mobile application that has a back button on the bottom navigation bar. I will have three options on the tab bar: Back, Home and Settings. Home has 6 buttons that lead to different screens. When I navigate through these screens, I want the Back button to work as the default header back button does.

As I am using multiple screens, the back button has no stack history so navigation.goBack() does not work. When I check navigation.canGoBack() it returns true bit navigation.state is undefined. I think it is because the bottom tab is the parent and cannot see the navigation stack of the children but I cannot find a workaround for this.

I have tried nesting the BottomTabNavigator within a StackNavigator and vice versa but can't get it working. I have found no solutions online even though I have looked. I have considered creating a new bottom tab for each screen so that the back button would not be a parent and be in the correct stack but I'm not sure that would work and it is not very efficient coding.

I can post my code but it is not very helpful since I have been trying many different things.

Homepage: The picture shows my homepage with the bottom navigation bar. I want to be able to navigate to Medication, then navigate to other screens within medication (like the one here: Medication1), and be able to use the back button on the bottom left as the default back button in the header does.

I used this code snippet on the reactnavigation docs but it does not work for navigate.goBack():

<Tab.Screen
  name="Chat"
  component={Chat}
  listeners={({ navigation, route }) => ({
    tabPress: (e) => {
      // Prevent default action
      e.preventDefault();

      // Do something with the `navigation` object
      navigation.navigate('AnotherPlace');
    },
  })}
/>

Any help would be greatly appreciated :)