Navigation Header not hiding in react native

Question

We are showing navigation side drawer in our react native application. So, In that, For particular screen, We have to disable gestures. And for complete app, We are hiding navigation header too.

MyStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if ((navigation.state.index === 2) || (navigation.state.index === 3)) {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
    header: null,
    headerVisible: false,
  };
};


const MyStack = createStackNavigator({
  screen1: { screen: screen1, navigationOptions: { header: null, headerMode: 'none' } },
  screen2: { screen: screen2, navigationOptions: { header: null, headerMode: 'none'} },
      screen3: { screen: screen3, navigationOptions: { header: null, headerMode: 'none'} },

.
.
});

const MyAppStack = createAppContainer(createDrawerNavigator({
  MyStack: {
    screen: MyStack,
  },
  login: {
    screen: login,
  },
.
.
.
));

But, Header is still showing for all the screens.

Even we have tried for individual screen navigation header hiding, But, still not hiding.

class login extends Component<Props> {

  static navigationOptions = {
    header: null
  };

Any suggestions?

Answer 1

Finally, After somany forums read and some practice, Found the best solution to restrict gestures/swipe for particular screens in React-Native Navigation. Hope this will helps someone in future.

Install following library

 import getCurrentRouteName from 'react-navigation-current-route';


    const MyStack = createStackNavigator({
      screen1: { screen: screen1, navigationOptions: { header: null, headerMode: 'none' } },
      screen2: { screen: screen2, navigationOptions: { header: null, headerMode: 'none'} },
      screen3: { screen: screen3, navigationOptions: { header: null, headerMode: 'none'} },

    .
    .
    });

MyStack.navigationOptions = ({ navigation }) => {
  const currentRoute = getCurrentRouteName(navigation.state);
  let drawerLockMode = 'unlocked';
  if ((currentRoute === 'screen1') || (currentRoute === 'screen2')) {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode
  };
};    

    const MyAppStack = createAppContainer(createDrawerNavigator({
      MyStack: {
        screen: MyStack,
      },
      login: {
        screen: login,
      },
    .
    .
    .
    ));

Answer 2

To hide navigation header, add headerMode outside of navigationOptions. Both should be at same level.

export default createStackNavigator({
  ...
}, {
  headerMode: 'none',
  navigationOptions: {
    ...
   }
});

Update 1

const MyAppStack = createAppContainer(createDrawerNavigator({
  MyStack: {
    screen: MyStack,
    navigationOptions: {
          header:false, // or drawerLabel: () => null  

    }
  },
  login: {
    screen: login,
  },
.
.
.
));

Answer 3

Hello Anil please try following code

MyStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if ((navigation.state.index === 2) || (navigation.state.index === 3)) {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
    header: null,
    headerVisible: false,
  };
};


const MyStack = createStackNavigator({
  screen1: { screen: screen1 },
  screen2: { screen: screen2 },
  .
  }, {
       headerMode: 'none',
       navigationOptions: {
         headerVisible: false,
       });