I used the createBottomTabNavigator, but I can't hide the bottom app bar on a specific screen
const StackHome = createStackNavigator(
{
Home: Home,
Autor: Autor,
Publicacion: Publicacion,
Comentarios: {
screen: Comentarios,
navigationOptions:{
// this should do the work, but it doesn't
tabBarVisible: false
}
}
}
);
Finally I got a solution that works, the component would be like this
import { createStackNavigator } from "react-navigation";
import Home from "./Home";
import Autor from "./Profile";
import Publicacion from "./Publicacion";
import Comentarios from "./Comentarios";
const StackHome = createStackNavigator({
Home: Home,
Autor: Autor,
Publicacion: Publicacion,
Comentarios: Comentarios
});
// This does the trick
StackHome.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
};
};
export default StackHome;
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
const StackHome = createStackNavigator(
{
Home: Home,
Autor: Autor,
Publicacion: Publicacion,
Comentarios: Comentarios
}
);
StackHome navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
Do like this:
if(navigation.state.routes[navigation.state.index].routeName == "Comentarios"){
tabBarVisible = false;
}
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,
};
};