CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
FeelRightz
FeelRightz

Reputation: 2999

react-navigation Drawer lock dynamically

How to lock the drawer dynamically ? I have a modal use from react-native-modalbox. When I open up the modal, I call this this.refs.modal.open(); and locked the drawer. I only know that drawerLockMode can set in navigationOptions. But modal is not a screen in DrawerNavigator

const MainDrawer = DrawerNavigator({
    Event: { screen: EventScreen },
    Wallet: { screen: WalletScreen},
    Profile: { screen: ProfileScreen},
    Contact: { screen: MemberContactScreen},
    Reward: { 
      screen: MemberRewardScreen,
      navigationOptions:{
        drawerLockMode :'locked-closed'
      }},
},{
  contentComponent: props => <DrawerScreen {...props} />
});

Upvotes: 0

Views: 3170

Answers (2)

Sumedh Ulhe
Sumedh Ulhe

Reputation: 677

I used the following code

    static navigationOptions = ({ navigation }) => ({
drawerLockMode: navigation.state.params ? navigation.state.params.drawerLockMode : undefined});

For hiding the navigation drawer used this code on condition called this.

    this.props.navigation.setParams({ 
    drawerLockMode: locked-closed });

Upvotes: 1

Kashif Ali
Kashif Ali

Reputation: 91

You can achieve this with the help of redux, here are the steps.

step 1: Create the reducer for drawer keep a flag in its state which we will be using to dynamically lock the drawer. step 2:subscribe to drawer's reducer and bind 'drawerLockMode' to that flag. step 3: just dispatch the action from anywhere to lock the drawer.

here is the code

Your drawer component

class Drawer extends Component{

    constructor(props) {
        super(props);
        this.state = {drawerLockMode:this.props.drawerLockMode};
      }

    render() {
      const options = {
        //   initialRouteName: 'LandingPage',
        drawerPosition: 'left',
        contentComponent: SideMenu,
        drawerWidth: Dimensions.get('window').width,
        gesturesEnabled: false
      };
        const Drawer = DrawerNavigator(RouteConfigs, options);
      return (
        <Drawer
        screenProps={{drawerLockMode:this.props.drawerLockMode}}
        />
      );
    }
  }
function mapStatetoProps(state)
{
    return {
        drawerLockMode:state.draweReducer.drawerLockMode
    }
}
export default connect(mapStatetoProps)(Drawer);


export default function reducer(state = {drawerLockMode:'unlocked'}, action) {
switch (action.type) {
  case 'DRAWER_LOCK':
      return Object.assign({},state,{drawerLockMode:'locked-closed'});
    case 'DRAWER_OPEN':
    return Object.assign({},state,{drawerLockMode:'unlocked'});
  default:
    return state
}

}

now use

this.props.dispatch({type:'DRAWER_OPEN'});

this.props.dispatch({type:'DRAWER_CLOSE'}); to lock the drawer dynamically

Upvotes: 0

Related Questions