Hide Bottom Tab Bar In Specific Screen

Muhammad Uzair 0
Viewed 38

I am working on a mobile app and need your help. I want to hide bottom tab bar in "auth" route name. I have tried several methods from stackoverflow and google but it didn't work. My Code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {View} from 'react-native';
import Auth from './views/Auth';
import AuthState from './context/auth/AuthState';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import Home from './views/Home';

const Tab = createMaterialBottomTabNavigator();

const App = () => {
  return (
    <AuthState>
      <NavigationContainer>
        <Tab.Navigator initialRouteName="auth">
          <Tab.Screen name="auth" component={Auth} />
          <Tab.Screen name="home" component={Home} />
        </Tab.Navigator>
      </NavigationContainer>
    </AuthState>
  );
};

export default App;
react-native reactjs
3 Answers

Well a better solution can be to create layout components

  • authorized and unauthorized layout component
  • you will have wrapper ready to use for future updates on these screens
Zhivko Nikolov0

After reading your requirement, I suggest you to try an Authentication flow approch written by 'React-Navigator' API instead of putting 'Auth' page in the same Tab Navigator.

The main idea of that is using 2 Navigators.

  1. Stack Navigator for 'Auth'
  2. Tab Navigator for pages which logged in users can see

However, to make this flow available, you need to add Global State Management library like Redux / React Context to handle which navigator is showing.

<NavigationContainer>
    <Stack.Navigator>
    {
        !redux.isLoggedIn ?
        <Stack.Group>
            <Stack.Screen 
               name="auth" 
               component={Auth}
            />
        </Stack.Group>
        :
        <Stack.Group>
            <Stack.Screen
               name="home"
               component={YourHomeTabNavigator}
            />
        </Stack.Group>
    }
    </Stack.Navigator>
</NavigationContainer>
Peter Tam0

Issue solved by Nesting Navigators

Muhammad Uzair0
Related