Modify header according to one parameter - react-native

Question

I was trying to modify my custom header according to one parameter that is in the state from the same component. But I see that it does not work. I can do the same inside the render and it obviously does but how can I do it in the header?
In this case for instance, I would like to change the button for another if itemNumber > 0
...
static navigationOptions = ({ navigation }) => {
return{
title: "Edit Group"+' ',
headerStyle: {
backgroundColor: '#2ca089',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerTintColor: '#fff',
headerRight: (
<Button hasText transparent onPress={() =>
Alert.alert(
"Delete Group",
"Are you sure you want to delete this group? It is a non-reversible action!",
[
{text: 'Yes', onPress: () => console.log('Yes Pressed')},
{text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
],
)
}>
<Text>Delete Group</Text>
</Button>
),
};
}
constructor(props) {
super(props)
this.state = {
dataSource : [],
text : '',
itemNumber : 0,
}
}
...
I understand that because it is a static component it will not be modified dynamically but I do not see how can I do it in another fashion.
Thanks,

Answer 1

I can not see where the answer from TNC implement the callback function inside the headerRight in order to re-update the navigation header which I think it is the problem.
My solution is the following:
The variable which you want to observe is itemNumber, make sure is in the constructor ✅
constructor(props) {
super(props)
this.state = {
dataSource : [],
text : '',
itemNumber : 0,
selectedItems: []
}
}
Then, inside the function which you trigger the event which requires the update for the header add the following code:
triggerFunction = parameters => {
//...
let newValue = 1 //Implement your logic
this.setState(({itemNumber}) => {
this.props.navigation.setParams({itemNumber: newValue})
return {itemNumber: newValue }
});
//...
};
To conclude, on the navigationOption add the following code:
static navigationOptions = ({ navigation }) => {
return{
headerRight:
navigation.getParam('itemNumber', 0) > 0
?
<Button hasText transparent onPress={() =>
Alert.alert(
"Delete User",
"Are you sure you want to delete this user/users? It is a non-reversible action!",
[
{text: 'Yes', onPress: () => console.log('Yes Pressed')},
{text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
],
)
}>
<Text>Delete Users</Text>
</Button>
:
null
};
}
I have got the inspiration from this answer:
https://stackoverflow.com/a/51911736/5288983
I also attach you the documentation where you can understand better the approach:
https://reactnavigation.org/docs/en/headers.html#setting-the-header-title

Answer 2

You can pass multiple params to navigator as:
From Calling Container/Component
this.props.navigation.navigate('navigator-destination', {
title: 'Your Title',
label: 'Extra Params',
callback: callback // Even callback
});
In Called Container/Component
static navigationOptions = ({navigation}) => {
const {state} = navigation;
label = state.params.label;
return {
title: `${state.params.title}`,
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
};
To call callback:
_someMethod = () => {
const {navigation} = this.props;
navigation.state.params.callback(parameters);
navigation.goBack();
};