React Navigation V5 Hide Bottom Tabs

Question

I would like to be able to hide the tabs on a screen using React Native Navigation v5.

I\'ve been reading the documentation but it doesn\'t seem like they\'ve update

Answer 1

The above answer will help you to remove the bottom tabs from the root navigation.If you want to remove bottom tabs from a specific screen like Home Screen or Settings Screen you need to change navigation options dynamically.

For changing navigation options dynamically you will need the concept of:

• React.Context
• useNavigationState

Context - will dynamically change the navigationOption value i.e. either to hide the bottom Tabs or not. We can choose MobX or Redux to do the same.

UseNavigationState - will help context to know at which screen the user is.

We need to create Context in a separate .js file so that Home.js and Settings.js can access it in all the other screens.

import * as React from 'react';
import { View, Text } from 'react-native'
import { NavigationContainer, useNavigationState, useRoute } from '@react-navigation/native';
const Tab = createBottomTabNavigator();
const Context = React.createContext();

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { TouchableOpacity } from 'react-native-gesture-handler';


const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();

function SettingsScreen({ navigation }) {
  return (
    
      
        Setting
      
    
  );
}

function Home({ navigation }) {
  const rout = useNavigationState(state => state);
  const { screen, setScreen } = React.useContext(Context);
  setScreen(rout.index);
  return (
    
       {
          navigation.navigate("Settings");
        }}
      >
        
          Home
        
      
    
  );
}

function SettingsStackScreen({ navigation }) {
  return (
    
      
    
  )
}

function ProfileStackScreen({ navigation }) {
  const { screen, setScreen } = React.useContext(Context)
  if (screen == 0) {
    navigation.setOptions({ tabBarVisible: true })
  } else {
    navigation.setOptions({ tabBarVisible: false })
  }
  return (
    
      
      
    
  )
}

function BottomNav({ navigation }) {
  return (
    
      
      
    
  );
}


export default function App() {
  const [screen, setScreen] = React.useState(0);

  return (
    
      
        
      
    
  );
}

Here the screen is a flag that checks the index of the navigation and removes the bottom navigation for all the screen stacked in ProfileStackScreen.