Reputation: 487
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
Upvotes: 1
Views: 2393
Reputation: 51
I researched the drawer navigation documentation (https://reactnavigation.org/docs/drawer-based-navigation) and found the following:
import { useDrawerStatus } from '@react-navigation/drawer';
// ...
const isDrawerOpen = useDrawerStatus() === 'open';
This way, you can combine it with useEffect
like this:
useEffect(() => {
if(isDrawerOpen){
//yourFunction();
}
}, [isDrawerOpen]);
This worked for me, so when I open the drawer (with a button or sliding) a function is called
Upvotes: 1
Reputation: 2469
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.
Upvotes: 1