React native drawer (for iOS & Android) disable/drawerLock mode not working

Question

I am new in React native development,I have completed drawer functionality using following tutorial and github example:-

• Drawer Git hub link
• Drawer Tutorial link

So,According to above link Drawer component has one disable parameter which is helpful to lock drawer.

In my case,I have:-

• Login Page :- So I am trying to lock the drawer when user is not logged into system.
• Home Page :- So when ever user logged in successfully,I have open this page and unlock my drawer.

Added render() method for reference:-

render() {
      <Drawer
                ref={(ref) => this._drawer = ref}
                disabled={!this.state.drawerEnabled}
                type="overlay"
                content={<Menu navigate={(route) => {
                    this._navigator.push(navigationHelper(route));
                    this._drawer.close()
                }}/>}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                closedDrawerOffset={-3}
                styles={{
                    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
                    main: {paddingLeft: 3}
                }}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
                    initialRoute={{
                        id: 'Login',
                        title: 'Login',
                        index: 0
                    }}
                    renderScene={(route, navigator) => this._renderScene(route, navigator)}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={styles.navBar}
                            routeMapper={NavigationBarRouteMapper} />
                    }
                />
            </Drawer>
      );
  }

So,My problem is:-

1. disabled parameter is not working.I have tried with `setState()' function also but the result is same.
2. Please suggest me other drawer examples/tutorials which works in above case.

Answer 1

I think React Navigation library is best option. Which is fully customizable and supported both Android and IOS. You should use Drawer Navigator, can get documentation here.

Here I am adding code sample, that How I am locked/unlocked the drawer.

Here StackApp will be your Stack Navigator which contain all the drawer pages.

StackApp.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) {
    drawerLockMode = 'locked-closed'; //For child page it will lock drawer
  }
  return {
    drawerLockMode
  };
};
const DrawerStack = createDrawerNavigator({
  StackHome: {screen: StackApp},
  // Auth: {screen: AuthScreen},
}
,{
  drawerWidth:width*0.8,
  contentComponent: (props) =>
    <ScrollView>
      <Menu {...props}/>
    </ScrollView>
});