How to set 'react-native-drawer' visible only to Dashboard after login in react-native

Question

In react-native, I want to disable drawer on Login and enable drawer on Dashboard Screen. I have implemented 'react-native-drawer' with Navigator to navigate between routes.

render method as follows:

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>
      );
  }

renderScene as follows to navigate the routes:

_renderScene(route, navigator) {
    navigator.navigate = self.navigate;
        switch (route.id) {
            case 'Login':
                return ( <Login navigator={navigator}/> );

            case 'Dashboard':
                    return ( <Dashboard navigator={navigator}/> );
        }
    }

I have written one method to enable and disable drawer in react-native:

navigate(route, method){
        if(route)
        switch (route.id) {
            case 'Login':
            this.state = {drawerEnabled: false, navigationBarEnabled: false};
            break;

            case 'Dashboard':
            this.state = {drawerEnabled: true, navigationBarEnabled: true};
            break;
        }

          this.forceUpdate();
          this.refs.navigator[method](route);
      }
}

Initially I have set property in class and in constructor, navigate method was called.

state = {drawerEnabled:true, navigationBarEnabled: true};

  constructor(){
    super();
    this.navigate = this.navigate.bind(this);
  }

Then which would be possible way to disable drawer on Login menu and enable it on Dashboard Screen.

Answer 1

You have to change your _renderScene() method as follows:

_renderScene(route, navigator) {
    navigator.navigate = this.navigate;
        switch (route.id) {
            case 'Login':
                return ( <Login navigator={navigator} {...route.passProps} /> );
            case 'Dashboard':
                return ( <Dashboard navigator={navigator} {...route.passProps} />);
        }
    }

There is no need of navigate() method, so remove that method. All cases you have to write as your need and for default case you have set it as null. If you are setting null means left and right are disabled on Dashboard page but only title is enable on Dashboard.

You need to write code for left, right and title on toolbar as follows:

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Dashboard':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
            default:
                return null   //For setting Dashboard left button null
        }
    },
    RightButton(route, navigator, index, navState) {
      switch (route.id) {
          case 'Dashboard':
            return (
            <TouchableOpacity
                style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
                <Icon name={'map'} size={25} color={'white'} />
            </TouchableOpacity>
            )
            default:
              return null  //For setting Dashboard right button null
          }
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

Answer 2

You can set panOpenMask and panCloseMask properties of drawer to 0 on login scene.

Something like this

<Drawer>
   panOpenMask={isItLoginPage? 0 : 0.2}
   panCloseMask={isItLoginPage? 0 : 0.2}
   ...
</Drawer>