userashu19 userashu19 - 1 month ago 12
iOS Question

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


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

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