React-Native drawer menu open inside stack-Navigator screen

user_1197031 0
Viewed 1825

In my application I've 3 stack like StackOne

export const StackOne = createStackNavigator({
  OneScreen: { screen:one  },
  TwoScreen: { screen:two  },
  ThreeScreen: { screen:three  },
}, { initialRouteName: 'OneScreen', }
);

StackTwo 

export const StackTwo = createStackNavigator({
  OneScreenTwo: { screen:oneTwo  },
  TwoScreenTwo: { screen:twoTwo  },
  ThreeScreenTwo: { screen:threeTwo  },
}, { initialRouteName: 'OneScreenTwo', }
);

I use the drawer navigation like this. MainDrawer

const MainDrawer = createDrawerNavigator(
  {
    One: { screen: StackOne },
    Two: { screen: StackTwo },
    Other: { screen: OtherScreen},
  },
  {}
);

All working fine. manage drawer - to stack very well only issue is when I'm in StackOne's ScreenTwo of swipe the left- right still open the drawer menu. not only this screen in every screen open drawer menu.

I try several link but can't find the success. Hope some one help. I follow this link Navigation

Thanks

navigation-drawer stack-navigator react-native reactjs
2 Answers

You need to specify navigationOptions on the StackNavigator instead of TwoScreen etc, as otherwise it'd be configuring the StackNavigator instead of the DrawerNavigator:

StackOne.navigationOptions = ({ navigation }) => ({
  drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
});

Working example: https://snack.expo.io/@riwu/stack-nav-lock-drawer

user_56488830 
export const StackOne = createStackNavigator({
  OneScreen: { screen:one  },
  TwoScreen: { screen:two  },
  ThreeScreen: { screen:three  },
}, { initialRouteName: 'OneScreen', }
);


StackOne.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.routes[navigation.state.index] != 'OneScreen') {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
};


export const StackTwo = createStackNavigator({
  OneScreenTwo: { screen:oneTwo  },
  TwoScreenTwo: { screen:twoTwo  },
  ThreeScreenTwo: { screen:threeTwo  },
}, { initialRouteName: 'OneScreenTwo', }
);

StackTwo .navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.routes[navigation.state.index] != 'OneScreenTwo') {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
};

Create navigation option & issue resolved.

user_11970310
Related