How to hide React Native NavigationBar

Question

I have NavigatorIOS under Navigator and would like to hide Navigator\'s NavigationBar to use NavigatorIOS\'s bar. Is there any way to do this?

This is screenshot tha

Answer 1

I did this:

Dashboard:{
  screen: Dashboard,
  navigationOptions: {
    headerStyle: {display:"none"},
    headerLeft: null
  },
},

Answer 2

I solved this by defining a custom NavigationBar which can inspect the current route. Would look something like this:

class NavigationBar extends Navigator.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];

      if (route.display === false) {
        return null;
      }
    }

    return super.render();
  }
}

Using your example:

render: function(){
  return (
    <Navigator
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        display: false,
      }}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

Answer 3

In your Navigator class it looks like you're passing in a navigation bar. You can add logic there to pass in either Navigator.NavigationBar or your NavigatorIOS bar depending on which you'd like to use. To do that you'd need to specify a state variable in Navigator that you'd update when you want the bar to change.

Answer 4

In the React Navigation (5.x) [Current Version]

Set headerShown property to false to hide navigation bar as below :

<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />

complete example :

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


// Screen
import LoginScreen from '../screens/auth/LoginScreen';

const Stack = createStackNavigator();

const CareAndCarersNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default MainNavigation

In the React Navigation (4.0)

to hide navigation bar you have 3 options :

1. For the single screen, you can set header null in navigationOptions

static navigationOptions = {
    //To hide the ActionBar/NavigationBar
    header: null,
};

2. For the single screen, you can set header null in createStackNavigator like this

const App = createStackNavigator({
  First: {
    screen: HomeActivity,
    navigationOptions: {
      header: null,
    },
  },
});

3. Hide the header from all the screens in once using defaultNavigationOptions

const App = createStackNavigator(
  {
    First: {
      screen: HomeActivity,
    },
  },{
    defaultNavigationOptions: {
      header: null
    },
  }
);

Answer 5

pass this property along with navigator.push or initialRoute by setting it as true

navigationBarHidden?: PropTypes.bool

Boolean value that indicates whether the navigation bar is hidden by default.

eg:

<NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'LOGIN',
            component: Main,
            navigationBarHidden: true,
          }}/>

or

this.props.navigator.replace({
        title: 'ProviderList',
        component: ProviderList,
        passProps: {text: "hai"},``
        navigationBarHidden: true,
  });

Answer 6

For the React Navigation 5.x

Hide the navigation bar in all screen

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Hide the navigation bar only one screen or specific screen see the following code.

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

See react-navigation-5.0 for more information.