How to hide header in React native - functional component

Question

We are working on a react-native project. As we have our custom header, we used to hide the default header using the following line in the class component.

static navigationOptions = {
    header: null
  };

But currently, we are creating new pages with hooks, which are functional components. The above line is not helping to hide the default header in the functional component.

How to hide the default header with the functional component.

We have a solution which is hiding the header in the stack navigator itself.

Inside the createStackNavigator,

defaultNavigationOptions: {
    gesturesEnabled: true,
    header: null
  }

But this will hide the header for all the pages in the stack navigator. But If we need to hide for a particular page, what will be the solution?

Thanks for any valuable suggestions.

thamaphyr · Accepted Answer · 2020-09-15 15:24:37Z

I dont know if I understood you well. I think you are using react navigation.

There are to ways to apply react-navigation.

1**> You can put the createStackNavigator on jsx, and add the option headerOptions on false on each component or route, like this:

import * as React from 'react';

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

// components
import Home from './src/components/home';
import Login from './src/components/common/login';

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

export default App;

In this example, I created two components to route (Home and Login), adding options={{headerShown: false}} by default the header will be disappeared.

2**> The second way is on the object directly and put the option headerMode:"none" to don't show the header whole the navigator :

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// components
import Home from './src/components/home';
import Login from './src/components/common/login';

const App = createStackNavigator({ 
    Home: {screen: Home},
    Login: {screen: Login},
    
},{
    initialRouteName:'Home',
    headerMode:"none",
});

export default createAppContainer(App);

the second option is the shortest but you are not using arrow function and to apply redux I prefer the first option to wrap the Provider, but anyway depend on your necessity you could use one of both.

I hope this is what you were looking for. Best Regards

Guruparan Giritharan · Accepted Answer · 2020-09-15 05:06:15Z

If you are using Navigation V5. You can do like below When initializing the stack you can set the headerShown to false

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

Or if you want to do it inside the component, you can do this

  <Button
    title="Update the title"
    onPress={() => navigation.setOptions({ headerShown: false })}
  />

I've given a sample using a button click but you can call it anywhere based on your requirement.

If you want to use the navigationOptions which is used by older versions, you will have to do like below, using a static propery.

const HomeScreen = props => {
    return <View><Text>Home</Text></View>
}
HomeScreen['navigationOptions'] = screenProps => ({
   header: null
})

Collectives™ on Stack Overflow

How to hide header in React native - functional component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related