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

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>
      );
  }
}

Answer 1

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>
      );
  }
}

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

Question

1 answers

solution1
0 2018-11-23 15:24:22

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

Question

1 answers

solution1 0 2018-11-23 15:24:22

solution1
0 2018-11-23 15:24:22