how i can check condition inside navigationOptions in react native - react-native

Question

I want to set a custom navigation headerLeft property;How i can set the headerLeft property only if the condition is satisfied.otherwise not.I use a StackNavigator in my app. and also cannot access props from inside navigationOptions.
here is my code
componentDidMount() {
this.props.navigation.setParams({goBack: this.goBack, shouldShow: this.state.show });
}
onShow = () => {
if (this.state.steps >1) {
this.setState({show:true}, () => {this.props.navigation.setParam({shouldShow:true})} )
}
}
goBack= () =>{
this.setState({ steps: this.state.steps - 1 })
}
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
let headerLeft = null;
if (params.shouldShow) {
headerLeft = <TouchableOpacity onPress={() => params.goBack}>
<Image source={/* src */} style={Styles.navBarIcon} />
</TouchableOpacity>
}
return {
headerLeft: headerLeft,
headerTitle: 'Register',
headerStyle: Styles.navBar,
};
};

Answer 1

Since navigation options are static and not included inside your class, you cannot simply access states inside it. But you can follow below method.
// ------ inside your class -------
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
let headerLeft = null;
if(params.shouldShow) {
headerLeft = <TouchableOpacity onPress={() => params.onPressButton()}>
<Image source={/* source */} style={Styles.navBarIcon} />
</TouchableOpacity>
}
return {
headerLeft: headerLeft
};
};
componentDidMount(){
this.props.navigation.setParams({ onPressButton: this.onButtonPressedEvent, shouldShow:this.state.show });
}
onButtonPressedEvent = () =>{
// What you want to do when button pressed.
}
onShow = () =>{
if(this.state.count > 1){
this.setState({show:true}, () => {this.props.navigation.setParam({shouldShow:true})} )
}
}
Remember to call onShow method when you change the count to make changes in navigation.