Hide and show reactnavigation headers onPress - reactjs

Question

I am using React Navigation and want to Hide/Show the header onScroll or onPress. Is this pseudo code the proper way to go about it? Also, could you please advice on what props do I need to pass and how do I pass them from the _handleHide and _handleShow functions?
import React, { Component } from 'react'
import { View, Text, StyleSheet, Button} from 'react-native'
class MyApp extends Component {
static navigationOptions = {
title: 'MyTitle' // this is the header I want to hide/show
}
constructor () {
super(props);
this.state = {
showHeader: false
}
this._handleHide = this._handleHide.bind(this);
this._handleShow = this._handleShow.bind(this);
}
_handleHide(){
// how do i code this to hide the header?
}
_handleShow(){
// how do i code this to show the header?
}
render(){
return(
<View style={styles.container}>
<Button onPress={this._handleHide} title="Hide Header" />
<Button onPress={this._handleShow} title="Show Header" />
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex: 1, justifyContent: 'center', alignItems: 'center'
}});
export default MyApp;
Many thanks.
UPDATE 1
_handleHide(){
this.setState({showHeader: false});
}
_handleShow(){
this.setState({showHeader: true});
}

Answer 1

There is no on state change for that post I mentioned. Not near a computer right now but I would add a state in the constructor called showHeader: true and in _handleHide and _handleShow, change the state of showHeader.
Then from the post Dynamically hide/show header in react-native:
this.props.navigation.setParams({
header: this.state.showHeader ? whatever-you-want : null
})