How to remove tabbar from the top when I am navigating to another page from one of the tab in react native

Question

Everyone I am facing an issue in react-native as I am new to this .

I am callling a tabbpage from homePage so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs.

This is good till now but the problem starts from here In tabPage I have two tabs ->tab1 and tab2 from tab1 I am navigating to page MainPage1 where it is showing a Navbar below navbar a tabbar below tabbar an another navbar. As shown in the picture.

I am totally unable to remove both the top level navbar having title "Stopages" and the tabbar.

I am using Tabview for creating this tabbpage and using stacknavigator for navigating to different pages.I am stuck here and Not able to find solution

NOTE->I have tried using

      navigationOptions: {
      tabBar: ({ state }) => ({
       visible: false
       }) 

but its not doing anything Please help

   class TabPage extends React.Component{
   state = {
   index: 0,
    routes: [
     { key: 'Stopagess', title: 'Stopages' },
     { key: 'MapStopagess', title: 'Maps' },
    ],
   };

   render() {
   return (
           <TabView

         navigationState={this.state}
         renderScene={SceneMap({
         Stopagess: Stopages,
         MapStopagess: MapStopages,
             })
            }
             renderTabBar={props =>
              <TabBar
                {...props}
                style = {{backgroundColor:'#3f51b5'}}
                indicatorStyle={{ color: 'pink' }}
              />
            }
      onIndexChange={index => this.setState({ index })}
      initialLayout={{ width: Dimensions.get('window').width }}
      indicatorStyle={{ backgroundColor: 'pink' }}

       />
      );
      }

      }

This is my Stopages class

     class Stopages extends Component { 
     render()
    {
       return (
      <StopageDetail/>
     )
      } 
      }

       const StopageDetail = createStackNavigator({
      Stp:{
      screen: Stpforsomeissue,
     navigationOptions: () => ({
     header:null,
     tabBarVisible: false,
      }),



       },
       NextDetailStopage:{
      screen :StopageDetailOfStudents,
     navigationOptions: ({ navigation, screenProps }) => ({

     title:  'Stopages Detail',
    // tabBarVisible: navigation.state.params=false,
       headerStyle: { backgroundColor: '#ffd600'},
   />,
   })
  }
  })

Answer 1

I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail. Please correct me if thats not the case and edit your post to show the navigation stack you have written.

This might be useful to you:

The root stack can be like the one below:

createStackNavigator ({
   StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});

and the TabNavigator will be like this:

const MyTabNavigator = createMaterialTopTabNavigator({
  Stopages:  {screen: StopagesStack},
  Maps:  {screen: MapsStack},
});

const StopagesStack = createStackNavigator({
  StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});

The key to hide default stack navigator's header is to set it null in the navigationOptions.

Answer 2

You can play around within navigationOptions within a tab of createMaterialTopTabNavigator in order which ones had TopTabBar or not, Example:

export const Dashboard = createMaterialTopTabNavigator({
  First: {
    screen: FirstScreen, // This is my first Tab (a View)
    navigationOptions: {
      title: 'First'
    }
  },
  Second: {
    screen: SecondStack, // This is another Stack
    navigationOptions: ({ navigation }) => ({
      title: 'SecondStack',
      tabBarVisible: navigation.state.index === 0, //Tab bar will be visible depending of the state (you can put another index)
      animationEnabled: true
    })
  },
  Third: {
    screen: ThirdScreen, // This is my third Tab (a View)
    navigationOptions: {
      title: 'ThirdScreen',
    }
  }
});