Remove Navigation Bar from React-Native-Navigation v2?

Question

How to disable navigation bar for a specific screen in React-Nativa-Navigation V2?

Payel Dutta · Answer 1 · 2018-12-18T13:49:14.900

For a specific component not showing topbar it can be done by putting

topBar: {  visible: false }

in the options of component like so

Navigation.setRoot({
      root: {
        stack: {
          id: "App",
          children: [
            {
              component: {
                name: "rci.Login",
                options: {
                  topBar: {
                    visible: false
                  }
                }
              }
            }
          ]
        }
      }
    });

And also if it need to be set at the stack level so that no screen in the stack shows topbar we can do that by setting

 options: {
    topBar: {
      visible: false
    }
  },

inside the stack. The whole code looks like

Navigation.setRoot({
root: {
 stack: {
  options: {
    topBar: {
      visible: false
    }
  },
  children: [
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 1',
          myFunction: () => 'Hello from a function!',
        }
      }
    },
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 2',
        }
      }
    }
   ]
  }
 }
});

score 1 · Answer 2 · answered Dec 03 '18 at 11:07

1

Your best option will be setting static options inside your component:

export default class YourComponent extends Component {
  static get options() {
    return {
      topBar: {
        visible: false,
        animate: false
      }
    };
  }
}

Notice that you can toggle the topBar visibility change animation.

answered Dec 03 '18 at 11:07

yogevbd

1,548
1
14
18

Thanks, Would Use this as well. But why do think this is a better option than the one used by me? – Payel Dutta Dec 05 '18 at 10:39
Because it is always a possibility that you will want to use this screen in a different flow.. in such case you will have to duplicate this code. It is just more explicit for the screen – yogevbd Dec 05 '18 at 10:41
Okay. If we want the screen without navigation bars in all flows this is a good option. Otherwise, if the visibility of the navigation bar is scenario specific then the other one is the better option. Thanks for your help – Payel Dutta Dec 05 '18 at 10:44

score 0 · Answer 3 · answered Nov 28 '18 at 12:26

If you are using a StackNavigator, you need to set header to null on a given screen:

class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  ...
}

export default createStackNavigator({
  Home: HomeScreen
});

score 0 · Answer 4 · answered Mar 28 '20 at 01:21

Hope this helps. The correct way to do as of @react-navigation/native 5.1.3 seems to be this headerShown: false

<NavigationContainer>
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen
      name="Login"
      component={LoginScreen}
      options={{ title: "Login Screen", headerShown: false }}
    />
    {..other stuff..}
  </Stack.Navigator>
</NavigationContainer>

Remove Navigation Bar from React-Native-Navigation v2?

4 Answers4