How Can I Hide The Bottom Tab Bar On A Specific Screen (react-navigation 3.x)

I used the createBottomTabNavigator, but I can't hide the bottom app bar on a specific screen const StackHome = createStackNavigator( { Home: Home, Autor: Autor, Publ

Solution 1:

Finally I got a solution that works, the component would be like this

import { createStackNavigator } from"react-navigation";
importHomefrom"./Home";
importAutorfrom"./Profile";
importPublicacionfrom"./Publicacion";
importComentariosfrom"./Comentarios";

constStackHome = createStackNavigator({
  Home: Home,
  Autor: Autor,
  Publicacion: Publicacion,
  Comentarios: Comentarios
});

// This does the trickStackHome.navigationOptions = ({ navigation }) => {
  let tabBarVisible;
  if (navigation.state.routes.length > 1) {
    navigation.state.routes.map(route => {
      if (route.routeName === "Comentarios") {
        tabBarVisible = false;
      } else {
        tabBarVisible = true;
      }
    });
  }

  return {
    tabBarVisible
  };
};

exportdefaultStackHome;

Solution 2:

Nope, it should not... you are hidint the tab bar ... in a stacknavigator... you can do something similar to this. but i don't know how you would hide it on one screen

constStackHome = createStackNavigator(
  {
    Home: Home,
    Autor: Autor,
    Publicacion: Publicacion,
    Comentarios: Comentarios
  }
);
StackHome navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;

  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

Solution 3:

const routesWithNoTabNavigator = ['nameOfYourRoute', 'nameOfYourOtherRoute'];

<yourStackHere>.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  const currentRoute = 
        navigation.state.routes[navigation.state.routes.length -1].routeName;
  if(routesWithNoTabNavigator.includes(currentRoute)) {
      tabBarVisible = false;
  }

  return {
   tabBarVisible,
  };
};

Solution 4:

if your screen is also nested stack navigation and the parent is a bottom navigation, there is a navigation prop on options function you can use. e.g.:

const BottomTab = createBottomTabNavigator();

const Home = () => (
  <BottomTab.Navigator
    initialRouteName="Explore"
    tabBarOptions={{
      activeTintColor: "#00B0F0",
    }}
  >
    <BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

note that you will have to use if conditions there as props are not present when not activated, just simply do as my example. There is also a suggestion from the documentation: https://reactnavigation.org/docs/hiding-tabbar-in-screens/ personally i would do that if there's no option for tabBarVisible usage.

Solution 5:

Do like this:

if(navigation.state.routes[navigation.state.index].routeName == "Comentarios"){
tabBarVisible = false;
}