CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
user818700
user818700

Reputation:

Hide header on StackNavigator with React Navigation in React Native

I have the following:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

On HomeScreen there's a header now that looks like this:

enter image description here

How do I hide this header? I just want a blank screen, or in this case, just the <Text>Hello, Chat App!</Text> to show?

Upvotes: 12

Views: 30284

Answers (9)

6rchid
6rchid

Reputation: 1292

headerMode: 'none' doesn't work with the latest React Navigation. To disable the default header of the top screen set screenOptions={{ header: () => null }} on the navigator:

    <SpaceStack.Navigator screenOptions={{ header: () => null }}>
      <SpaceStack.Screen name="Workspaces" component={WorkspaceScreen} />
      <SpaceStack.Screen name="Details" component={WorkspaceDetailScreen} />
    </SpaceStack.Navigator>

To disable other headers (set by children or other navigators) set options={{ headerShown: false }} on the screen:

    <SpaceStack.Navigator>
      <SpaceStack.Screen name="Workspaces" component={WorkspaceScreen} />
      <SpaceStack.Screen name="Details" options={{ headerShown: false }} component={WorkspaceDetailScreen} />
    </SpaceStack.Navigator>

To disable headers from childrens of nested navigators, though it would dismiss it from other screens of the same stack once runned, set this in the child component:

  useLayoutEffect(() => {
    navigation.getParent().setOptions({ header: () => null });
  });

Upvotes: 0

Sajid Javed
Sajid Javed

Reputation: 497

Notice options={{headerShown: false}} in the below code. It's working with the latest version(^5.9.0) with me. Thank you.

const App = () => {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
    };

Upvotes: 2

Hamid Shoja
Hamid Shoja

Reputation: 4768

Version: 5.x

headerShown Whether to show or hide the header for the screen. The header is shown by default unless:

The headerMode prop on the navigator was set to none. The screen is in a stack nested in another stack navigator's screen which has a header. Setting this to false hides the header. When the header is hidden in a nested stack, you can explicitly set it to true to show it.

https://reactnavigation.org/docs/stack-navigator/#headershown

Upvotes: 3

Shahzad
Shahzad

Reputation: 1415

if you want to hide all screen header then use @pitty or @burhan answers (although both have same answer) but for specifically remove a screen header then just use header: null for the screen props as mentioned in the documentation of React Navigation so use it like this:

Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      header: null //this will hide the header
    },
},

Update February 2020 With new release of stack now you need to use param headerShown which default is true e.g.

Home: {
     screen: HomeScreen,
     navigationOptions: {
       title: 'Home',
       headerShown: false
     },
},

Upvotes: 31

Pitty
Pitty

Reputation: 1977

try to add { headerMode: 'none' } in your stactNavigator

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
}, {headerMode: 'none'});

Upvotes: 6

Ahad Khwaja
Ahad Khwaja

Reputation: 171

const RootStack = createStackNavigator(
{
LandingPage: LandingPage,
HomeScreen: HomeScreen,
Login: Login
},
{
initialRouteName: 'LandingPage',
**header: null,
headerMode: 'none'**
}
);
const AppContainer = createAppContainer(RootStack);

Your navigation options should look something like this, just add the bold lines in your code.

Upvotes: 0

Igor Thierry
Igor Thierry

Reputation: 21

Try this

Login: {
    screen: Login,
    navigationOptions: {
      title: '',
      headerTransparent:true,
    }
  },

Upvotes: 2

Harikrishnan S
Harikrishnan S

Reputation: 124

I think in stackNavigator you can use the headerMode: 'none' to hide the header. And one more thing, you can take this as a suggestion, use

react-native-router-flux

which would be more easy to use in case of navigations in react-native, and in there you can hide the header using the hideNavBar prop to the scenes and here is the documentation which would be helpful to you on the same Documentation

Upvotes: 1

Burhan Yılmaz
Burhan Yılmaz

Reputation: 804

    const SimpleApp = StackNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          title: 'Home'
        },
      },
      Chat: {
        screen: ChatScreen,
        navigationOptions: {
          title: 'Chat with Lucy'
        }
      },
{ headerMode: 'none'}
);

Upvotes: 5

Related Questions