Hiding Bottom tabs in a certain screens

Question

I use a bottom tabs navigator imported from 'react-navigation-tabs'

import { createBottomTabNavigator } from 'react-navigation-tabs';

const AppNavigator = createBottomTabNavigator({
  Homepage: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
} , {
  initialRouteName:"Screen1"
});

Screen 1 is a stack navigator

const AppNavigator = createStackNavigator({
    Homepage: {
      screen: Screen1,
    },
    Screen2: {
        screen: Screen2
    }
} , {
    initialRouteName : "Homepage",
    headerMode:"none",
    navigationOptions: ({ navigation }) => ({
        tabBarVisible: navigation.state.routes[navigation.state.index].routeName === 'Screen2' ? false : true
    })
});

After some researches , I found the below solution , but not works

navigationOptions: ({ navigation }) => ({
        tabBarVisible: navigation.state.routes[navigation.state.index].routeName === 'Screen2' ? false : true
    })

It's a bad news because even to hide it from all screens , the below code also did not work

navigationOptions: ({ navigation }) => ({
        tabBarVisible: false
    })

the tabs always visible , after much researches and trying tens of solutions

Possible duplicate of [React Navigation how to hide tabbar from inside stack navigation](https://stackoverflow.com/questions/51352081/react-navigation-how-to-hide-tabbar-from-inside-stack-navigation) — Gaurav Roy, Nov 28 '19 at 11:59

Awab Ijaz · Answer 1 · 2019-11-28T11:54:25.433

0

Try this:

Screen1.navigationOptions = ({ navigation }) => {

    let tabBarVisible = true;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if ( routeName == 'ScreenX' ) {
        tabBarVisible = false
    }

    return {
        tabBarVisible,
    }
}

edited Nov 28 '19 at 11:54

answered Nov 28 '19 at 11:32

Awab Ijaz

101
5

ljaz , it is hided , but Screen1 is a stack navigator hold many screens (ScreenX and ScreenZ) for example , I want to hide it from ScreenX in this stack navigator , you understand me ? – Ahmed Mohsen Nov 28 '19 at 11:40
I have edited my answer, try that after creating your stack navigator. – Awab Ijaz Nov 28 '19 at 11:55
ljaz , but the bottom tabs navigator is the parent , and the stack navigator is a child of it – Ahmed Mohsen Nov 28 '19 at 11:58
Same , it still exist – Ahmed Mohsen Nov 28 '19 at 12:01

Hiding Bottom tabs in a certain screens

1 Answers1