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.

Answer 1

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