function is not a function - react-native - react-native

Question

In my project, I used stack navigator as the navigator. Inside navigationOptions, at headerRight, I used a custom button. When I try to call the onPress, it says the function is not a function.
this is the function
sharePost() {
// this.props.doShare();
console.log("DONE");
}
I have put the full code here. I want to use sharePost function inside the rightHeader of navigationOptions.
import React, { Component } from "react";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import {
View,
Text,
Image,
TouchableOpacity,
Animated,
ScrollView,
StyleSheet,
Dimensions
} from "react-native";
import { PostProfileBar, WritePost } from "../../components";
import { ButtonWithoutBackground } from "../../mixing/UI";
const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height / 3;
class SharePostScreen extends Component {
constructor(props) {
super(props);
sharePost() {
// this.props.doShare();
console.log("DONE");
}
render() {
return (
<View style={styles.container}>
<ScrollView>
<WritePost profile={this.state.loggedUserProfile} />
<View style={styles.sharePostWrapper}>
<PostProfileBar profile={this.state.postedUserProfile} />
<Image
source={{
uri: "https://pbs.twimg.com/media/DWvRLbBVoAA4CCM.jpg"
}}
resizeMode={"stretch"}
style={styles.image}
/>
</View>
</ScrollView>
</View>
);
}
static navigationOptions = ({ navigation }) => ({
headerTitle: "Share To Feed",
headerTitleStyle: {
paddingLeft: "20%",
paddingRight: "20%"
},
headerStyle: {
paddingRight: 10,
paddingLeft: 10
},
headerLeft: (
<Icon
name={"close"}
size={30}
onPress={() => {
navigation.goBack();
}}
/>
),
headerRight: (
<ButtonWithoutBackground
buttonText={styles.buttonText}
onPress={this.sharePost()}
>
Post
</ButtonWithoutBackground>
)
});
}

Answer 1

In order to call the class level methods inside the static method navigationOptions, you can do the following,
// Bind function using setParams
componentDidMount() {
const { navigation } = this.props;
navigation.setParams({
referencedSharePost: this.sharePost,
});
}
sharePost = (parameters) => {
// this.props.doShare();
console.log("DONE" + parameters);
}
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
//... Other Options
headerRight: (
<ButtonWithoutBackground
buttonText={styles.buttonText}
onPress={() => params.referencedSharePost("I'm passing something")}
>
Post
</ButtonWithoutBackground>
)
}
}