0

enter image description here

when I hide the tabbar using tabBarVisible in a specific screen the upper half of the button in the middle will be still visible (above the red line), any ideas how I can hide that also?

I'm using react-navigation v5

const StackNav = (props: any) => {

  React.useLayoutEffect(() => {
    routes.includes(name) 
               ? navigation.setOptions({tabBarVisible: false;})
               : navigation.setOptions({tabBarVisible: true;})
  }, [navigation, route]);

  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={HomeScreen} />
      <Stack.Screen name="food" component={FoodScreen} />
      <Stack.Screen name="review" component={ReviewScreen} />
    </Stack.Navigator>
  );
};

so the BottomTab navigation wraps the StackNav that holds all the screens of the App

const BottomTab = () => {
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused}) => {
          return <Tab focused={focused} />;
        },
      })}
      >
      <Tab.Screen name="profile" component={StackNav} />
      <Tab.Screen name="story" component={StackNav} />
    </Tab.Navigator>
  );
};
user00001
  • 71
  • 8
  • ist your middle button part of the tabBar? and is it bigger than the actual tabBar height? – Krismu Apr 20 '21 at 09:09
  • @Krismu yes it's part of the tabBar this is just visualization since I can't post the actual image of how it looks, as for the height no it's not bigger then the height of the tabBar, but the middle button for visual purposes has to appear like that so the upper half of the button outside of the tabBar. – user00001 Apr 20 '21 at 09:15
  • Can you provide the code for your navigation structure and the version of react-navigation you are using? – Krismu Apr 20 '21 at 09:20
  • @krismu the code here all works so just ignore if you don't see a variable somewhere declared or imported because I had to remove some code so that I could post the edit here – user00001 Apr 20 '21 at 09:43

1 Answers1

2

React-navigation don't recommend using the tabBarVisible option. To solve your problem, you can use this workflow to hide the tabBar properly.

The principle is simply to take out the screens that don't need the tabBar from the Tab.Navigator by a parent using a Stack.Navigator.

I use this to my own app using the same tabBar UI as you, it works perfectly.

Chris
  • 124
  • 1
  • 5
  • I was hoping for a way that doesn't change the navigation structure I have, because I was reading this documentation before, so I need to reconsider the decision of not changing the current structure right? – user00001 Apr 20 '21 at 09:45
  • 1
    I think you should try, it's not a big rework! Juste take out the screens you don't want the tabBar in a parent `Stack.Navigator` who contains theses screen and the `BottomTab`. It shouldn't change the rest of your app (and navigation will remain the same) – Chris Apr 20 '21 at 10:07