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

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

Answer 1

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