React Navigation Header Is always shown

Question

I am trying to create multiple screens and to switch between them I thought react-navigation would be great. But I am getting this problem of header appearing automatically, despite setting header to null. I have my App.js createStackNavigation as :

const AppNavigator = createStackNavigator({


register : {
  screen: RegisterScreen, 
},

login: {
  screen: LoginScreen,
},

home : {
  screen: HomeScreen
},

  },

  {
    navigationOptions: {
      header:null,
      headerMode: 'none',
    }
  }
  );

Here I have three screens. Namely register , login and home. Inside register screen I have other createStackNavigator for registerFinal, login and register screen itself. It is shown below.

const registerNavigation = createStackNavigator(
    {
        register: {
            screen: RegisterScreen,
            headerMode: 'none',
            navigationOptions: ({ navigation }) => ({
                header: null,
              }),
        }, 
        registerFinal: {
            screen: RegisterFinalScreen, 
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerShown: false

              }),
        } ,
        login: {
            screen: LoginScreen, 
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerShown: false
              }),
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            header: null,
            headerShown: false
          }),
    }
    );

Though, I have header disabled in navigationOptions using both methods as specified in other questions, none of them seems to work for me. I am getting two header in my screen. How do I solve this?

Answer 1

Create one object as below

const screenOptions = {
    headerShown: false,
};

And then use options like I used below

    <NavigationContainer>
        <Stack.Navigator initialRouteName="Home"  >
            <Stack.Screen name="Home" component={Home} options={screenOptions} />
        </Stack.Navigator>
    </NavigationContainer>

Following this will not show component name when called.

Final version will look like this

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from './screens/Home';

export default function RootNavigation() {
const Stack = createStackNavigator();

const screenOptions = {
    headerShown: false,
};

return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Home"  >
            <Stack.Screen name="Home" component={Home} options={screenOptions} />
        </Stack.Navigator>
    </NavigationContainer>
);
}

Answer 2

Most of the times you will need to restart EXPO or RN cli in order for Simulator to take the change.

---

This is how you hide the header on one screen

`yourComponentName`.navigationOptions = () => {
    return {
        headerShown: false
    }
}

//above code needs to be before you EXPORT your component

export default `yourComponentName`

You could also hide header on all screens, check like this.

Tip: instead of adding headerShown: false to each screen’s option, you can add screenOptions={{ headerShown: false }} to the navigator to set the option for all of the screens.

https://medium.com/@satya164/tip-instead-of-adding-headershown-false-to-each-screens-option-you-can-padd-screenoptions-f67baf1e1eae][1]

Answer 3

headerMode: 'none' should not be inside navigationOptions:

const AppNavigator = createStackNavigator({
 // ...
}, {
  // No `navigationOptions` here
  headerMode: 'none'
})

Answer 4

Another way of hiding Headers are:

export default class LoginPage extends Component{
  static navigationOptions = { // remove header on this page
      header: null
  }
}

Answer 5

Use headerMode not headerShown on the registeration stack as well.

Basically change your registeration stack to reflect the following:

const registerNavigation = createStackNavigator(
    {
        register: {
            screen: RegisterScreen,
            headerMode: 'none',
            navigationOptions: ({ navigation }) => ({
                header: null,
            }),
        },
        registerFinal: {
            screen: RegisterFinalScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'

            }),
        },
        login: {
            screen: LoginScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'
            }),
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            header: null,
            headerMode: 'none'
        }),
    }
);const registerNavigation = createStackNavigator(
    {
        register: {
            screen: RegisterScreen,
            headerMode: 'none',
            navigationOptions: ({ navigation }) => ({
                header: null,
            }),
        },
        registerFinal: {
            screen: RegisterFinalScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'

            }),
        },
        login: {
            screen: LoginScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'
            }),
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            header: null,
            headerMode: 'none'
        }),
    }
);

Hope this Helps!

Answer 6

Restarting the emulator solved the problem. OMG. This thing had me change my project so many times. But sometimes, you just have to laugh at it.