How do I hide one icon in ReactNative React Navigation Bottom Tab

Question

Im making an app in React Native, and am looking to have a page that displays the bottom navigation bar but isn't directly on that navigation bar, ie it is sort of a child of another page though does not need to be access through the bottom Nav.

However, whenever I take it out of the bottom tab navigator it won't hide the icon, and if it is not added it wont allow me to see the bottom nav when I go to that page.

The code is as follows;

 {
   History: {
     screen: HistoryScreen,
     navigationOptions: {
       tabBarIcon: ({ focused, tintColor }) => 
       <Icon 
       focused={focused}
       color={{ tintColor }}
       name="history" 
       size={20} 
       zIdex="13"
       solid
       /> 
     }
   },
   Home: {
     screen: HomeScreen,
     navigationOptions: {
       tabBarIcon: ({ focused, tintColor }) => 
       <Icon 
       focused={focused}
       color={ Colors.gyroscopicOrgane }
       name="home" 
       size={20} 
       zIdex="13"
       solid
       /> 
     }
   },
   ConcreteTest: {
     screen: ConcreteTestScreen,
     navigationOptions: {
       tabBarIcon: ({ focused,tintColor }) => <
       Icon name="cog" 
       focused={focused}
       color={{ tintColor }}
       size={20} 
       zIdex="13"
       solid
       /> 
     }
   },
   Settings: {
     screen: SettingsScreen,
     navigationOptions: {
       tabBarIcon: ({ }) => {
         showIcon: false
       }
     }
   }
 },
 
 {
   tabBarOptions: {

     activeTintColor: "#E66F25",
     inactiveTintColor: "#B8BBC4",
     showLabel: false
 }
 }
 )



 const AppStack = createStackNavigator({
   Home: HomeScreen,
   History: HistoryScreen,
   ConcreteTest: ConcreteTestScreen,
   Settings: SettingsScreen,
 });

 const AuthStack = createStackNavigator({
   Launch: LaunchScreen,
   Login: LoginScreen,
   SignUp: SignUpScreen
 });

 export default createAppContainer(
   createSwitchNavigator(
     {
       Loading: LoadingScreen,
       Launch: LaunchScreen,
       Settings: SettingsScreen,
       App: AppTabNavigator,
       Features: AppStack,
       Auth: AuthStack
     },
     {
       initialRouteName: "Loading"
     }
   )
 )

Answer 1

It might be helpful to attach a screenshot of your layout. Try positioning your element absolutely (position: absolute) and then using top: left: bottom: right: to align it. If you need it to display conditionally, try setting a variable elementVar = null; and then if (needs to be displayed) {elementVar = YOUR_ELEMENT_CONTENT} then simply use {elementVar} in your render(return()) function.