React Navigation Header not hiding/showing - reactjs

Question

I'm using react navigation. I want to hide the header onPress and show on another function. I am able to hide it but not show it again.It seems that I can do only 1 function on the header. My code is:
import React, { Component } from 'react'
import {
View, Text, Button, Alert,
} from 'react-native'
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
class HeaderTest extends Component {
static navigationOptions = ({navigation}) => ({
header: navigation.state.params ? navigation.state.params.showHeader : null,
title: 'HeaderTest'
});
constructor (props) {
super(props);
this.state = { showHeader: true}
this._handleHide = this._handleHide.bind(this);
this._handleShow = this._handleShow.bind(this);
}
_handleHide(){
this.props.navigation.setParams({
header: null
})
}
_handleShow(){
this.props.navigation.setParams({
header: true
})
}
render(){
return(
<View style={thisStyles.container}>
<Button onPress={this._handleHide} title="Hide Header" />
<Button onPress={this._handleShow} title="Show Header" />
</View>
)
}
}
export default HeaderTest;
I want to be able to hide and show the header on the button onPress. What am I doing wrong?
Please help.
Update 1:
_handleHide(){
this.props.navigation.setParams({
header: false
})
}
_handleShow(){
this.props.navigation.setParams({
header : (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>
})
}
componentWillMount(){
this.props.navigation.setParams({
header : (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>
})
}

Answer 1

According to the docs in React-Navigation,
header
React Element or a function that given HeaderProps returns a React
Element, to display as a header. Setting to null hides header.
Hence to hide the header just use
header = null;
Now to show header u must provide a custom element or a function which returns a element not 'true'
header = <View style={{ height:20,backgroundColor:'blue' }} ></View>
or
header = (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>
If u want to just hide and show the default Header instead of creating a custom one,
source: https://github.com/react-community/react-navigation/issues/1444
//Import Header from 'react-navigation' and render it back with the headerProps u get
import { Header } from 'react-navigation';
static navigationOptions = () => ({
header: (headerProps) => <Header {... headerProps} />,
});