title: Hide bottomTabNavigator react native
body: <p>I'm trying to make my <code>bottomTabNavigator</code> hide when I click on a screen and then become visible again once you scroll. Here is my code for my <code>StackNavigator</code> and <code>BottomTabNavigator</code>:</p>
  <pre><code>function UsersScreenNavigator() {
          const Stack = createNativeStackNavigator();
      
          return (
              &lt;Stack.Navigator screenOptions={{headerShown: false}}&gt;
                  &lt;Stack.Screen name=&quot;Users&quot; component={BottomTabNavigator} options={{headerShown: false}}/&gt;
                  &lt;Stack.Screen name=&quot;Profile&quot; component={Profile} options={{headerShown: false}}/&gt;
                  &lt;Stack.Screen name=&quot;Settings&quot; component={Settings} options={{headerShown: false}}/&gt;
                  &lt;Stack.Screen name=&quot;EditProfile&quot; component={EditProfile} options={{headerShown: false}}/&gt;
                  &lt;Stack.Screen name=&quot;BackButton&quot; component={BackButton} options={{headerShown: false}}/&gt;
              &lt;/Stack.Navigator&gt;
          );
      }
  
      function BottomTabNavigator() {
      const {buttonShell, buttonText} = styles;
      const Tab = createBottomTabNavigator();
      const Icon = createIconSet(glyphMap, 'Fuze', 'Fuze.ttf');
      let [fontsLoaded] = useFonts({
          'Fuze': require('../../../assets/Fuze.ttf'),
          Roboto_500Medium
      });
  
      if (!fontsLoaded) {
          return &lt;&gt;&lt;/&gt;;
      } else {
          return (
              &lt;Tab.Navigator
                  initialRouteName=&quot;Users&quot;
                  screenOptions={{
                      headerShown: false,
                      tabBarShowLabel: false,
                      tabBarStyle: {borderColor: '#DBDBDB', height: 100, paddingTop: 16},
                  }}
              &gt;
                  {
                      bottomTabs.map((bottomTab) =&gt; {
                              return (
                                  &lt;Tab.Screen
                                      key={`screen-${bottomTab.title}`}
                                      name={bottomTab.title}
                                      component={bottomTab.componentName}
                                      options={{
                                          unmountOnBlur: true,
                                          tabBarIcon: (({focused}) =&gt; {
                                              return !focused ?
                                                  &lt;Icon name={bottomTab.icon} size={32}/&gt; :
                                                  &lt;View style={buttonShell}&gt;
                                                      &lt;Text style={buttonText}&gt;{bottomTab.title}&lt;/Text&gt;
                                                  &lt;/View&gt;
  
                                          })
                                      }}
                                  /&gt;
                              )
                          }
                      )
                  }
              &lt;/Tab.Navigator&gt;
          )
      }
  }
  </code></pre>
  <p>Here is my screen I want to hide the <code>bottomNavigator</code> on and the array of screens I map to my navigator:</p>
  <pre><code>   export const bottomTabs = [
      {
          title: 'User',
          componentName: Users,
          icon: 'icon-User'
      },
      {
          title: 'Check-in',
          componentName: CheckInScreenNavigator,
          icon: 'icon-CheckIn'
      },
      {
          title: 'Hub',
          componentName: HubScreenNavigator,
          icon: 'icon-Hub'
      },
      {
          title: 'Chats',
          componentName: Chats,
          icon: 'icon-Chats'
      }
  ]
  
      function Users() {
      const windowWidth = Dimensions.get('window').width;
      const windowHeight = Dimensions.get('window').height;
  
      let [fontsLoaded] = useFonts({
          Roboto_400Regular,
          Roboto_500Medium
      });
  
      if (!fontsLoaded) {
          return &lt;&gt;&lt;/&gt;;
      } else {
          return (
              &lt;View&gt;
              &lt;ScrollView&gt;
                  &lt;View style={{flex: 1}}&gt;
                      &lt;ProfileButton/&gt;
                      &lt;Image style={{height: windowHeight - 100, width: windowWidth}} source={mockUsers[0].pictures[0]}/&gt;
                      &lt;UserProfileInfo/&gt;
                  &lt;/View&gt;
                  &lt;View&gt;
                      &lt;Text style={{
                          fontSize: 16,
                          fontFamily: 'Roboto_400Regular',
                          marginTop: 32,
                          marginBottom: 16,
                          marginLeft: 32
                      }}&gt;About&lt;/Text&gt;
                      &lt;View style={{marginLeft: 32}}&gt;
                          &lt;Text style={{fontSize: 14, color: '#878787', fontFamily: 'Roboto_400Regular'}}&gt;
                              {mockUsers[0].about}
                          &lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;Text style={{
                          fontSize: 16,
                          fontFamily: 'Roboto_400Regular',
                          marginTop: 32,
                          marginBottom: 16,
                          marginLeft: 32
                      }}&gt;Interests&lt;/Text&gt;
                      &lt;View style={{flexDirection: 'row', flexWrap: 'wrap', marginLeft: 32, marginRight: 32}}&gt;
                          {mockUsers[0].userInterests?.map((interest, index) =&gt; {
                              return (
                                  &lt;View style={{backgroundColor: '#000', borderRadius: 44, minHeight: 44, justifyContent: 'center', marginRight: 8, marginBottom: 16}}&gt;
                                      &lt;Text key={`interest-${index}`} style={{
                                          color: '#FFF',
                                          fontFamily: 'Roboto_500Medium',
                                          fontSize: 18,
                                          paddingTop: 8,
                                          paddingLeft: 24,
                                          paddingBottom: 8,
                                          paddingRight: 24,
                                      }}&gt;{interest}&lt;/Text&gt;
                                  &lt;/View&gt;
                              )
                          })}
                      &lt;/View&gt;
                      &lt;Text style={{
                          fontSize: 16,
                          fontFamily: 'Roboto_400Regular',
                          marginTop: 32,
                          marginBottom: 16,
                          marginLeft: 32
                      }}&gt;Questions and answers&lt;/Text&gt;
                      &lt;AnsweredQuestionInput /&gt;
                      &lt;AnsweredQuestionInput /&gt;
                      &lt;AnsweredQuestionInput /&gt;
                      &lt;Text style={{
                          fontSize: 16,
                          fontFamily: 'Roboto_400Regular',
                          marginTop: 32,
                          marginBottom: 16,
                          marginLeft: 32
                      }}&gt;Pictures&lt;/Text&gt;
                      &lt;Pictures userPictures={mockUsers[0].pictures} blur={true}/&gt;
                  &lt;/View&gt;
              &lt;/ScrollView&gt;
                  &lt;LikeAndDislike /&gt;
              &lt;/View&gt;
  
          );
      }
  }
  </code></pre>
  <p>Apologies for the un-neat code I am mid writing this and cannot find a way to hide the <code>tabBar</code>.</p>