Hide a header of a BottomTabNavigator from a StackNavigator in react-navigation





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I'm trying to hide a header in a BottomTabNavigator but this one came from a StackNavigator. I already tried to use the header: null inside the page and other ways but nothing works!



const AppTabNav = createBottomTabNavigator({
HomeScr:{
screen:Home,navigationOptions:{tabBarLabel:'Inicio',tabBarIcon: ({tintColor}) => (<Icon name='home' color={tintColor} size={25}/>)}
},
Settings:{
screen:Config,navigationOptions:{ tabBarLabel:'Configurações',tabBarIcon:({ tintColor })=>(<Icon name="settings" color={tintColor} size={25}/>)}
}

})

const AppStackNavigator = createStackNavigator({
AppTab:{
screen:AppTabNav,
navigationOptions:({navigation}) =>({
title:'Bem vindo @USER',
headerLeft:(
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<View style={{paddingHorizontal:10}}>
<Icon name="menu" color='black' size={24}/>
</View>
</TouchableOpacity>)
})
}
},{tabBarOptions:{
activeTintColor:'blue',
inactiveTintColor:'black'
}})


This is the header I want to hide when I click on configurações in the Bottombar



Imagem



This is the code of the Config.js file



export default class Config extends Component {
static navigationOptions = {
header: null,
drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
}
SignOut = async() => {
AsyncStorage.clear()
this.props.navigation.navigate('AuthLoading')
}

render() {
return (
<Container>
<Header>
<Left style={{flex:1}}>
<Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
</Left>
<Body style={{flex: 1,justifyContent: 'center'}}>
<Title>Configurações</Title>
</Body>
<Right style={{flex:1}}/>
</Header>
<View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
<Text>Configurações</Text>
</View>
</Container>
);
}
}









share|improve this question





























    0















    I'm trying to hide a header in a BottomTabNavigator but this one came from a StackNavigator. I already tried to use the header: null inside the page and other ways but nothing works!



    const AppTabNav = createBottomTabNavigator({
    HomeScr:{
    screen:Home,navigationOptions:{tabBarLabel:'Inicio',tabBarIcon: ({tintColor}) => (<Icon name='home' color={tintColor} size={25}/>)}
    },
    Settings:{
    screen:Config,navigationOptions:{ tabBarLabel:'Configurações',tabBarIcon:({ tintColor })=>(<Icon name="settings" color={tintColor} size={25}/>)}
    }

    })

    const AppStackNavigator = createStackNavigator({
    AppTab:{
    screen:AppTabNav,
    navigationOptions:({navigation}) =>({
    title:'Bem vindo @USER',
    headerLeft:(
    <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
    <View style={{paddingHorizontal:10}}>
    <Icon name="menu" color='black' size={24}/>
    </View>
    </TouchableOpacity>)
    })
    }
    },{tabBarOptions:{
    activeTintColor:'blue',
    inactiveTintColor:'black'
    }})


    This is the header I want to hide when I click on configurações in the Bottombar



    Imagem



    This is the code of the Config.js file



    export default class Config extends Component {
    static navigationOptions = {
    header: null,
    drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
    }
    SignOut = async() => {
    AsyncStorage.clear()
    this.props.navigation.navigate('AuthLoading')
    }

    render() {
    return (
    <Container>
    <Header>
    <Left style={{flex:1}}>
    <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
    </Left>
    <Body style={{flex: 1,justifyContent: 'center'}}>
    <Title>Configurações</Title>
    </Body>
    <Right style={{flex:1}}/>
    </Header>
    <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
    <Text>Configurações</Text>
    </View>
    </Container>
    );
    }
    }









    share|improve this question

























      0












      0








      0








      I'm trying to hide a header in a BottomTabNavigator but this one came from a StackNavigator. I already tried to use the header: null inside the page and other ways but nothing works!



      const AppTabNav = createBottomTabNavigator({
      HomeScr:{
      screen:Home,navigationOptions:{tabBarLabel:'Inicio',tabBarIcon: ({tintColor}) => (<Icon name='home' color={tintColor} size={25}/>)}
      },
      Settings:{
      screen:Config,navigationOptions:{ tabBarLabel:'Configurações',tabBarIcon:({ tintColor })=>(<Icon name="settings" color={tintColor} size={25}/>)}
      }

      })

      const AppStackNavigator = createStackNavigator({
      AppTab:{
      screen:AppTabNav,
      navigationOptions:({navigation}) =>({
      title:'Bem vindo @USER',
      headerLeft:(
      <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
      <View style={{paddingHorizontal:10}}>
      <Icon name="menu" color='black' size={24}/>
      </View>
      </TouchableOpacity>)
      })
      }
      },{tabBarOptions:{
      activeTintColor:'blue',
      inactiveTintColor:'black'
      }})


      This is the header I want to hide when I click on configurações in the Bottombar



      Imagem



      This is the code of the Config.js file



      export default class Config extends Component {
      static navigationOptions = {
      header: null,
      drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
      }
      SignOut = async() => {
      AsyncStorage.clear()
      this.props.navigation.navigate('AuthLoading')
      }

      render() {
      return (
      <Container>
      <Header>
      <Left style={{flex:1}}>
      <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
      </Left>
      <Body style={{flex: 1,justifyContent: 'center'}}>
      <Title>Configurações</Title>
      </Body>
      <Right style={{flex:1}}/>
      </Header>
      <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
      <Text>Configurações</Text>
      </View>
      </Container>
      );
      }
      }









      share|improve this question














      I'm trying to hide a header in a BottomTabNavigator but this one came from a StackNavigator. I already tried to use the header: null inside the page and other ways but nothing works!



      const AppTabNav = createBottomTabNavigator({
      HomeScr:{
      screen:Home,navigationOptions:{tabBarLabel:'Inicio',tabBarIcon: ({tintColor}) => (<Icon name='home' color={tintColor} size={25}/>)}
      },
      Settings:{
      screen:Config,navigationOptions:{ tabBarLabel:'Configurações',tabBarIcon:({ tintColor })=>(<Icon name="settings" color={tintColor} size={25}/>)}
      }

      })

      const AppStackNavigator = createStackNavigator({
      AppTab:{
      screen:AppTabNav,
      navigationOptions:({navigation}) =>({
      title:'Bem vindo @USER',
      headerLeft:(
      <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
      <View style={{paddingHorizontal:10}}>
      <Icon name="menu" color='black' size={24}/>
      </View>
      </TouchableOpacity>)
      })
      }
      },{tabBarOptions:{
      activeTintColor:'blue',
      inactiveTintColor:'black'
      }})


      This is the header I want to hide when I click on configurações in the Bottombar



      Imagem



      This is the code of the Config.js file



      export default class Config extends Component {
      static navigationOptions = {
      header: null,
      drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
      }
      SignOut = async() => {
      AsyncStorage.clear()
      this.props.navigation.navigate('AuthLoading')
      }

      render() {
      return (
      <Container>
      <Header>
      <Left style={{flex:1}}>
      <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
      </Left>
      <Body style={{flex: 1,justifyContent: 'center'}}>
      <Title>Configurações</Title>
      </Body>
      <Right style={{flex:1}}/>
      </Header>
      <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
      <Text>Configurações</Text>
      </View>
      </Container>
      );
      }
      }






      javascript react-native react-native-android react-navigation






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 23 '18 at 15:10









      Guilherme FagottiGuilherme Fagotti

      1




      1
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Just add this into your component code and Header will be hidden



          tabBarVisible: false



          export default class Config extends Component {
          static navigationOptions = {
          tabBarVisible: false,
          drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
          }
          SignOut = async() => {
          AsyncStorage.clear()
          this.props.navigation.navigate('AuthLoading')
          }

          render() {
          return (
          <Container>
          <Header>
          <Left style={{flex:1}}>
          <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
          </Left>
          <Body style={{flex: 1,justifyContent: 'center'}}>
          <Title>Configurações</Title>
          </Body>
          <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
          <Text>Configurações</Text>
          </View>
          </Container>
          );
          }
          }





          share|improve this answer


























          • Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configura├º├╡es screen.

            – Guilherme Fagotti
            Nov 23 '18 at 20:44











          • API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

            – Selmi Karim
            Nov 24 '18 at 9:57












          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449066%2fhide-a-header-of-a-bottomtabnavigator-from-a-stacknavigator-in-react-navigation%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Just add this into your component code and Header will be hidden



          tabBarVisible: false



          export default class Config extends Component {
          static navigationOptions = {
          tabBarVisible: false,
          drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
          }
          SignOut = async() => {
          AsyncStorage.clear()
          this.props.navigation.navigate('AuthLoading')
          }

          render() {
          return (
          <Container>
          <Header>
          <Left style={{flex:1}}>
          <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
          </Left>
          <Body style={{flex: 1,justifyContent: 'center'}}>
          <Title>Configurações</Title>
          </Body>
          <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
          <Text>Configurações</Text>
          </View>
          </Container>
          );
          }
          }





          share|improve this answer


























          • Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configura├º├╡es screen.

            – Guilherme Fagotti
            Nov 23 '18 at 20:44











          • API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

            – Selmi Karim
            Nov 24 '18 at 9:57
















          0














          Just add this into your component code and Header will be hidden



          tabBarVisible: false



          export default class Config extends Component {
          static navigationOptions = {
          tabBarVisible: false,
          drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
          }
          SignOut = async() => {
          AsyncStorage.clear()
          this.props.navigation.navigate('AuthLoading')
          }

          render() {
          return (
          <Container>
          <Header>
          <Left style={{flex:1}}>
          <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
          </Left>
          <Body style={{flex: 1,justifyContent: 'center'}}>
          <Title>Configurações</Title>
          </Body>
          <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
          <Text>Configurações</Text>
          </View>
          </Container>
          );
          }
          }





          share|improve this answer


























          • Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configura├º├╡es screen.

            – Guilherme Fagotti
            Nov 23 '18 at 20:44











          • API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

            – Selmi Karim
            Nov 24 '18 at 9:57














          0












          0








          0







          Just add this into your component code and Header will be hidden



          tabBarVisible: false



          export default class Config extends Component {
          static navigationOptions = {
          tabBarVisible: false,
          drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
          }
          SignOut = async() => {
          AsyncStorage.clear()
          this.props.navigation.navigate('AuthLoading')
          }

          render() {
          return (
          <Container>
          <Header>
          <Left style={{flex:1}}>
          <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
          </Left>
          <Body style={{flex: 1,justifyContent: 'center'}}>
          <Title>Configurações</Title>
          </Body>
          <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
          <Text>Configurações</Text>
          </View>
          </Container>
          );
          }
          }





          share|improve this answer















          Just add this into your component code and Header will be hidden



          tabBarVisible: false



          export default class Config extends Component {
          static navigationOptions = {
          tabBarVisible: false,
          drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
          }
          SignOut = async() => {
          AsyncStorage.clear()
          this.props.navigation.navigate('AuthLoading')
          }

          render() {
          return (
          <Container>
          <Header>
          <Left style={{flex:1}}>
          <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
          </Left>
          <Body style={{flex: 1,justifyContent: 'center'}}>
          <Title>Configurações</Title>
          </Body>
          <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>
          <Text>Configurações</Text>
          </View>
          </Container>
          );
          }
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 24 '18 at 9:58

























          answered Nov 23 '18 at 15:24









          Selmi KarimSelmi Karim

          613313




          613313













          • Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configura├º├╡es screen.

            – Guilherme Fagotti
            Nov 23 '18 at 20:44











          • API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

            – Selmi Karim
            Nov 24 '18 at 9:57



















          • Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configura├º├╡es screen.

            – Guilherme Fagotti
            Nov 23 '18 at 20:44











          • API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

            – Selmi Karim
            Nov 24 '18 at 9:57

















          Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configurações screen.

          – Guilherme Fagotti
          Nov 23 '18 at 20:44





          Not work, just give a new Error: Invalid key tabBar defined in navigation options for Configurações screen.

          – Guilherme Fagotti
          Nov 23 '18 at 20:44













          API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

          – Selmi Karim
          Nov 24 '18 at 9:57





          API for changing visibility has changed: Now it is navigationOptions: tabBarVisible: false

          – Selmi Karim
          Nov 24 '18 at 9:57




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449066%2fhide-a-header-of-a-bottomtabnavigator-from-a-stacknavigator-in-react-navigation%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()