Calling a redux action using props, from stack-navigator-options - react-native

Question

I want to call an action from redux inside the stack navigator options. This is my code. When I use the action using this.props.action_name, it says this is not a function. What am I doing wrong here? I used the navigation.params to achieve this, but still it doesn't work.
componentDidMount() {
this.props.navigation.setParams({
referencedSharePost: this.sharePost,
referencedDoShare: this.props.doShare
});
}
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 }) => {
const { params = {} } = navigation.state;
return {
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={() => params.referencedSharePost()}
>
Post
</ButtonWithoutBackground>
)
};
};
This is how I map my state to props.
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import SharePostScreen from "./SharePostScreen";
import { doShare } from "../../config/actions";
const mapStateToProps = state => {
return {
sharedPost: state.mainFeed.updatedPost
};
};
const mapDispatchToProps = dispatch => {
return {
doShare: bindActionCreators(doShare, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(SharePostScreen);
I want to use this.props.doShare inside onPress() of stackNavigationOptions.

Answer 1

You don't need to separately connect SharePostScreen after exporting it as a default, since it has got no instance to the redux states, during the time component's execution happens.
Therefore you can move your code in the second snippet, to the SharePostScreen and use it there, to have an access to the props.
const mapStateToProps = state => {
return {
sharedPost: state.mainFeed.updatedPost
};
};
const mapDispatchToProps = dispatch => {
return {
doShare: bindActionCreators(doShare, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(SharePostScreen);