REACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false not working

Question

REACT-native; react-navigation-tabs for createBottomTabNavigator wuth tabBarVisible=false not working. I tried to hide bottom tab for AddSetting & Manager but unsuccessful. My code as below:

import React from 'react' import { createSwitchNavigator, createAppContainer } from 'react-navigation' import { StyleSheet, Text, TextInput, View, Icon, Image, Button, ScrollView } from 'react-native'; import { createBottomTabNavigator} from "react-navigation-tabs"; import Ionicons from "react-native-vector-icons/Ionicons"; import Login from '../screens/Login' import Signup from '../screens/Signup' import MyList from '../MyList' import MyForm from '../MyForm'; import Manager from '../Manager'; import ManagerScreen from '../ManagerScreen'; import Setting from '../Setting'; import SettingScreen from '../SettingScreen'; import AddSetting from '../AddSetting'

const Tabs = createBottomTabNavigator({
Request: {
  screen: MyForm,
   navigationOptions: ({navigation}) => ({
     title: 'Request',
     tabBarVisible: true,
     tabBarIcon: ({tintColor}) => (
       <View style={styles.bottomButtons}>
          <Ionicons
                 name="ios-paper"
                 size={25}
                 color={tintColor}
               />
       </View>
     )
   })
},
Status: {
    screen: MyList,
    navigationOptions: ({navigation}) => ({
      title: 'Status',
     tabBarVisible: true,
      tabBarIcon: ({tintColor}) => (
        <View style={styles.bottomButtons}>
           <Ionicons
                  name="ios-alarm"
                  size={25}
                  color={tintColor}
                />
        </View>
      )
    })
},
Setting: {
    screen: Setting,
    navigationOptions: ({navigation}) => ({
      title: 'Setting',
     tabBarVisible: true,
      tabBarIcon: ({tintColor}) => (
        <View style={styles.bottomButtons}>
           <Ionicons
                  name="ios-settings"
                  size={25}
                  color={tintColor}
                />
        </View>
      )
    })
},
AddSetting: {
   screen: AddSetting,
   navigationOptions: ({navigation}) => ({
     title: 'AddSetting',
     tabBarVisible: false,
     tabBarIcon: ({tintColor}) => (
       <View style={styles.bottomButtons}>
          <Ionicons
                 name="ios-settings"
                 size={25}
                 color={tintColor}
               />
       </View>
     )
   })
},
Manager: {
   screen: Manager,
   navigationOptions: ({navigation}) => ({
    title: 'Manager',
    tabBarVisible: false,
    tabBarIcon: ({tintColor}) => (
      <View style={styles.bottomButtons}>
         <Ionicons
                name="ios-person"
                size={25}
                color={tintColor}
              />
      </View>
    )
   })
}
});


const SwitchNavigator = createSwitchNavigator({
        Login: {
            screen: Login
        },
        Signup: {
            screen: Signup
        },
        Home: {
            screen: Tabs
        }
    },
    {
        initialRouteName: 'Login'
    }
)


export default createAppContainer(SwitchNavigator)

const styles = StyleSheet.create({
buttonBottom: {
    width: 200
  },
  textFont:{
    fontFamily:'arial',
    size:20,
    alignItems: 'center',
  }
})

Please advise.

Regards, Micheale

displayname displayname · Accepted Answer · 2020-05-12T16:26:41

you'll have to make use of StackNavigator for those that you want the tabbar to be invisible

const SettingsStack = createStackNavigator({
 Setting: {screen: Setting}
})

SettingsStack.navigationOptions = ({navigation}) => {
  let tabBarVisible = true;
  if(navigation.state.index > 0){
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  }
}


const Tabs = createBottomTabNavigator({
 SettingsStack :{ screen :SettingsStack }
})

REACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false not working

1 Answers