Modify header according to one parameter

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();
    };