Question 34639 in React native Question posted in
The official React Native documentation can be found here.

Hide Bottom Tab Bar In Specific Screen – React native

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;
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Issue solved by Nesting Navigators


  2. 0

    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
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search