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

73
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.

READ ALSO
Programming a Button to Get the Next Focus

Programming a Button to Get the Next Focus

I am trying to program a button to set the focus to the object that is named with nextFocusDownCurrently, my

76
Integrating Facebook Audience Network into Cordova project

Integrating Facebook Audience Network into Cordova project

I tried to integrate Facebook Audience Network into an existing cordova project

92
schema update is not working correctly (hibernate.hbm2ddl.auto = update) with multiple data source

schema update is not working correctly (hibernate.hbm2ddl.auto = update) with multiple data source

In our application, using one master and many slave databasesMaster data source is configured in Tomcat context

119
Navigate to the jdk folder from console on Mac system

Navigate to the jdk folder from console on Mac system

I am new to Mac systemI want to navigate to the java jdk directory using command on Mac terminal

61