React Native React Navigation Header Button Event

May be same as above ...

   class LoginScreen extends React.Component {
      static navigationOptions = {
        header: ({ state }) => ({
          right: <Button title={"Save"} onPress={state.params.showAlert} />
        })
      };

      showAlert() {
        Alert.alert('No Internet',
          'Check internet connection',
          [
            { text: 'OK', onPress: () => console.log('OK Pressed') },
          ],
          { cancelable: false }
        )
      }

      componentDidMount() {
        this.props.navigation.setParams({ showAlert: this.showAlert });
      }

      render() {
        return (
          <View />
        );
      }
    }

This is for navigation v4. You need to modify navigationoptions outside of the functional component. Your button event needs to pass a param via navigation.

pageName['navigationOptions'] = props => ({
    headerRight:  ()=>
         <TouchableOpacity onPress={() => props.navigation.navigate("pageRoute", 
{"openAddPopover": true})  } ><Text>+</Text></TouchableOpacity>    })

and then in your functional component, you can use that param to do something like this:

useLayoutEffect(() => {
   doSomethingWithYourNewParamter(navigation.getParam("openAddPopover"))
}, [navigation])

You should use this in you navigator function

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        title: '[ Admin ]',
        headerTitleStyle :{color:'#fff'},
        headerStyle: {backgroundColor:'#3c3c3c'},
        headerRight: <Icon style={{ marginLeft:15,color:'#fff' }} name={'bars'} size={25} onPress={() => params.handleSave()} />
    };
};

use the componentwillmount so that it can represent where you are calling function .

componentDidMount() {
this.props.navigation.setParams({ handleSave: this._saveDetails });
}

and then you can write your logic in the function

_saveDetails() {
**write you logic here for **
}

**no need to bind function if you are using this **

react-navigation v5 version would be:

export const ClassDetail = ({ navigation }) => {
  const handleOnTouchMoreButton = () => {
    // ...
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={handleOnTouchMoreButton}>
          <Icon name="more" />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  return (
    // ...
  )
}