I am using react-navigation for routing purpose. I want to dynamically hide or show header on one component. Any way to do it?
I change headerLeft dynamically like this but can not find any way to do it for entire header.
static navigationOptions = ({ navigation }) => ({
headerRight: navigation.state.params ? navigation.state.params.headerRight : null
});
this.props.navigation.setParams({
headerRight: (
<View>
<TouchableOpacity onPress={() => blaa} >
<Text>Start</Text>
</TouchableOpacity>
</View>
)
});
I want something like this - hide/show header based on state:
this.props.navigation.setParams({
header: this.state.header
});
Got it working:
Don't know why it is so but passing undefined
to header will show default header and null
will hide the header.
I am doing something like this:
static navigationOptions = ({ navigation }) => ({
header: navigation.state.params ? navigation.state.params.header : undefined
});
and on state change;
this.props.navigation.setParams({
header: null
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With