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 that I've seen. I need backend of NavigatorIOS..

The structure that I want to build is the following:

├── NavigatorRoute1
│   ├── NavigatorIOSRoute1
│   ├── NavigatorIOSRoute2
│   └── NavigatorIOSRoute3
└── NavigatorRoute2

The code that I have is the below. (Basically obtained from UIExplore examples.

Navigator

render: function(){
return (
  <Navigator
    initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
    initialRouteStack={ROUTE_STACK}
    style={styles.container}
    renderScene={this.renderScene}
    navigationBar={
      <Navigator.NavigationBar
        routeMapper={NavigationBarRouteMapper}
        style={styles.navBar}
      />
    }
  />
);
}

NavigatorIOS

render: function(){
var nav = this.props.navigator;
 return (
  <NavigatorIOS
    style={styles.container}
    ref="nav"
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {nav: nav},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
);

}

UPDATE with my solution

I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.

hideNavBar: function(){
  this.setState({hideNavBar: true});
},
render: function(){
 if ( this.state.hideNavBar === true ) {
  return (
    <Navigator
      initialRoute={ROUTE_STACK[0]}
      initialRouteStack={ROUTE_STACK}
      renderScene={this.renderScene}
    />
  );
 }else{
  return (
    <Navigator
      initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
      initialRouteStack={ROUTE_STACK}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <Navigator.NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

}

and

render: function(){
 var hideNavBar = this.props.hideNavBar;
 return (
  <NavigatorIOS
    style={styles.container}
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {hideNavBar: hideNavBar},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
 );

}

Quinquepartite

How do you call the hideNavBar function that you created? My project is modular and I need to call it from a component from another file. – Pluviometer

Answer 1

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.

Soapwort

Answer 2

Because some old methods are deprecated i used stacknavigator. It works for me, if you are using StackNavigator.

//******For Older Versions. But Will be Deprecated in future*******
//static navigationOptions = { title: 'Welcome', header: null };

//For Latest Version Use:
static navigationOptions = { title: 'Welcome', headerShown: false};

Feel free to contact, if any issue.

Leeanneleeboard

Hey! Your solution is simple and works the best for me. Gave you an upvote :). What do you do to prevent notification bar overlapping with navigation bar on android? – Kilmarnock

Nothing else actually worked for me but this. I'm using react-native-cli: 2.0.1 react-native: 0.51.0 Using StackNavigator of course – Collywobbles

Answer 3

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}
        />
      }
    />
  );
}

Lipstick

I'd like to add that I've tried to rely on this.props.navState.presentedIndex but at render time it was always behind the real presentedIndex. What I ended up doing is using requestAnimationFrame in render and check on next frame the correct presentedIndex – Ziegler

@GastonM Can you please elaborate how you solved with requestAnimationFra‌me? – Kepi

Answer 4

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

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
    },
  }
);

UPDATED

As @DarthVanger said in the comment below, to hide all headers in the stack, use screenOptions like the following:

<NavigationContainer>
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Navigator>
</NavigationContainer>

Placido

To hide it on all screens use <Stack.Navigator screenOptions={{ headerShown: false }}> – Majors

Answer 5

I did this:

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

Rumen

hi, this addition should hide the soft buttons in android? what does mean the 'left' in headerLeft? why can't I do only 'header:null'? – Blockade

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.

Acuna

Answer 7

If you use NavigatorIOS always, you can do it like this:

1. modify the file NavigatorIOS.ios.js as below:

   before: navigationBarHidden={this.props.navigationBarHidden}
   after:  navigationBarHidden={route.navigationBarHidden}
   

2. navigator.push({navigationBarHidden: false})

Debroahdebs

Answer 8

static navigationOptions = { title: 'Welcome', header: null };

Cleveite

Answer 9

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,
  });

Convoke

Answer 10

use header: null for react-navigation, in your navigationOptions as follows;

navigationOptions: {
    header: null,
}

Triviality

hi this addition should hide the soft buttons in android? – Blockade

Answer 11

you need declare navigation object like this .

const StackNavigator = createStackNavigator(
  {
   Screen: { screen: HOME},
  },
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerShown: false,
        header: null,
        headerTitle: routeName
      };
    }
  }
);

Shark