2

We are using React Navigation for our React Native application and showing side bar. Everything working fine, But, close Drawer is not working.

Actually, I have to close Drawer while user tap on Android device back button.

So, That I am calling navigation.closeDrawer(); inside the back button handler method.

backButtonTap = () => {
    const { navigation } = this.props;
    navigation.closeDrawer();
    DeviceEventEmitter.emit('NavigatedToNewRoute', {
      route: 'screen1'
    });
    navigation.navigate('screen1');
  }

But, While we tried to close by device back button side drawer not closing. OpenDrawer method working fine.

And I have number of screens in my sidebar. So, In each class do I need to call this closeDrawer method or any one global class can we call it? I just need to close if the drawer opens, And if the user tap on the device back button, I have to close this drawer.

Any suggestions?

2 Answers2

0

Can you try the following?

import { DrawerActions } from "react-navigation";
...
backButtonTap = () => {
    const { navigation } = this.props;
    //navigation.closeDrawer();
    this.props.navigation.dispatch(DrawerActions.closeDrawer());
    DeviceEventEmitter.emit('NavigatedToNewRoute', {
      route: 'screen1'
    });
    navigation.navigate('screen1');
  }
Jebin Benny
  • 933
  • 1
  • 5
  • 9
  • The problem is we are calling BackHandler.addEventListener('hardwareBackPress', this.backPressHandler); in componentDidMount method and removing it in componentWillUnmount, but, if we navigate to other screen and comeback to same screen, that method is not triggering. So, Where can we write addlistener instead of componentDidmount? – Anilkumar iOS - ReactNative Apr 09 '19 at 09:32
0

I think react-navigation has default function for close the drawer. and if its not working then try this also pass navigation prop in function so that it can easily handle this.

this.props.navigationProps.toggleDrawer();
Tanveerbyn
  • 764
  • 1
  • 10
  • 25