How to update DrawerLabel text (via navigationOptions) on DrawerOpen/Close event - react-native

Question

I have define drawerLabel in navigationOptions as follows :
export default class Something extends React.Component {
static navigationOptions = {
drawerIcon: () => (
<Image source={drawerImage} style={styles.imageStyle} />
),
drawerLabel: ()=>{
if(~some condition~){
return 'New Label'
}else if(~some other condition~){
return 'Another Label'
}else{
return 'label'
}
},
};
This updates the label perfectly when any drawerItem is pressed in the drawer.
(apparently opening ANY drawer item updates the navigationOptions of all routes)
But I want this drawerLabel to be updated on drawer.Open() call as well.
or when left-header is pressed on any screen (triggers drawer.Open() )
So, how can I achieve this behaviour on DrawerOpen/Close ?
I am able to achieve this on pressing any drawerItem

Answer 1

Pass navigation prop to your navigationOptions.
static navigationOptions = ({ navigation }) => ({
drawerLabel: ()=>{ // maybe you also need to pass navigation to this function through the parentheses (navigation)
if(~some condition~){
return navigation.state.params.labels.first
}else if(~some other condition~){
return navigation.state.params.labels.second
}else{
return navigation.state.params.labels.third
}
},
});
Obviously, you need to create the labels:
navigation.setParams({ labels: { first: 'labelOne', second: 'labelTwo', third: 'labelThree' }})
before you can access them.
If you don't understand how to add the labels to the params - don't hesitate asking.
You can also use screenProps, if you have static labels. In this case you will need to define these props in your root-navigator. After that you will be able to access them in navigationOptions if you pass them alongside with navigation:
static navigationOptions = ({ navigation, screenProps }) => ({

Answer 2

I managed to achieve the desired output as follows (im afraid it might cause performance issues in the long run) :
I created a custom component and forced it to re-render every second using :
componentDidMount() {
this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000); }
And used that component in the navigationOption's drawerLabel :
drawerLabel: ()=> {
return <CustomComponent />
}
Now it does not need a click event on either any drawerItem or in drawerToggle call. (label gets updated even if the drawer is left open and no click is fired at all)
Following is the CustomComponent's render code :
if(~some condition~){
return <Text> New Label </Text>
}else if(~some other condition~){
return <Text> Another Label </Text>
}else{
return <Text>label</Text>
}
Now the if/else condition gets checked every second and a Text component is rendered as a label accordingly.
Even though I managed to achieve what I required, I would like to know if this affects the performance of the application?
(if so should I optimize this somehow? ... async maybe)