CODEWITHSUNDEEP
javascriptreact-nativenavigationbar
shohey1226
shohey1226

Reputation: 770

How to hide React Native NavigationBar

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

}

Upvotes: 25

Views: 49476

Answers (11)

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14792

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>

Upvotes: 19

AtulParmar
AtulParmar

Reputation: 4570

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.

Upvotes: 7

Ramana Sakhavarapu
Ramana Sakhavarapu

Reputation: 124

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

Upvotes: 2

Naeem Ibrahim
Naeem Ibrahim

Reputation: 3385

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.

Upvotes: 27

Shubham Goel
Shubham Goel

Reputation: 2186

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

Upvotes: 3

Isaac Sekamatte
Isaac Sekamatte

Reputation: 5598

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

navigationOptions: {
    header: null,
}

Upvotes: 2

Tibin Thomas
Tibin Thomas

Reputation: 1475

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

Upvotes: 2

Роман Карабанов
Роман Карабанов

Reputation: 71

I did this:

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

Upvotes: 7

Jeff Trudeau
Jeff Trudeau

Reputation: 211

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

Upvotes: 21

H87kg_X
H87kg_X

Reputation: 41

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

Upvotes: 4

Linai
Linai

Reputation: 56

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.

Upvotes: 2

Related Questions