call functions when the uer opens drawer (onClick button or slide)

August 02, 2019, at 2:40 PM

I had create a drawer system with react-navigation (without using DrawerLayoutAndroid) and I open it with a button or slide it What I want is to call function when the user opens the drawer and my function will change something in UI drawer, it will check if there is a new message or not to set new message notification icon! this is drawer navigation code:

const DrawerNavigation = createDrawerNavigator({
      Home: {
        screen: HomeStackNavigation,
      },
      Login: {
        screen: Login,
        navigationOptions: {
          header: null,
        }
      },
  },
  {
    drawerWidth: width*0.83,
    contentComponent: props =>
    {
      return(<DrawerComponent  {...props}/>)
    },
    drawerPosition: 'left',
  },
  );
export default createAppContainer(DrawerNavigation)

and drawer layout code it only a scrollView with items..

and this is a button code to open and close drawer in a home screen:

  toggleButtonDrawer = () => {
    this.props.navigation.openDrawer();
  }

I call it here:

  <View style={Styles.buttonMunuContainer}>
    <TouchableOpacity style={Styles.buttonMunu} onPress= {this.toggleButtonDrawer}>
    <IconAD name="menu-fold" size={ hp('4%')} color='white'/>
    </TouchableOpacity>
  </View>

PS. if you have another solution to set notification icon (+1) when a new message is received knowing that I don't use redux

pS. I work only on Android

Answer 1

In your custom drawer component <DrawerComponent />, you can use componentDidUpdate to detect when the drawer is opened.

componentDidUpdate(prevProps) {
  if (!prevProps.navigation.state.isDrawerOpen && this.props.navigation.state.isDrawerOpen) {
    console.log('The drawer has been opened!')
  }
}

So all you have to do is to fetch your messages at this time and compare with the current state of the component to check if there is any new notification to display.