How to remove top tab Navigator while navigating to different screen in react native and reactnavigation

Question

I have implemented a Tab navigation just below header of the screen. It works fine But the problem is when I Navigate to different screen tab bar still remains there. I want to hide them when i go to detail screen. I am not sure how to do that. Any Help would be great.

Here is what I want This is my screen.

Here when I click on any of the list item i wanted to navigate to detail screen. And i do get navigated but the tab bar is still there. Here is my code .

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const KarwarStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Karawar" component={Karwar} />
      <Stack.Screen name="KarawarDetail" component={KarawarDetail} />
    </Stack.Navigator>
  );
};

const CommunityHub = ({}) => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Karwar" component={KarwarStack} />
      <Tab.Screen name="Hubli" component={Hubli} />
      <Tab.Screen name="Bangalore" component={Bangalore} />
    </Tab.Navigator>
  );
};

export default CommunityHub;

Answer 1

Since your stack is part of the tab navigator, tabs will remain always there when you navigate to the KarawarDetail screen. You need to try inverse logic, a workaround could be like this

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const CommunityHub = ({}) => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Karwar" component={Karwar} />
      <Tab.Screen name="Hubli" component={Hubli} />
      <Tab.Screen name="Bangalore" component={Bangalore} />
    </Tab.Navigator>
  );
};

const RootStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="CommunityHub" component={CommunityHub } />
      <Stack.Screen name="KarawarDetail" component={KarawarDetail} />
    </Stack.Navigator>
  );
};

export default RootStack;