CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Somename
Somename

Reputation: 3434

React Navigation Header not hiding/showing

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>
        })  
    }

Upvotes: 0

Views: 7201

Answers (1)

Ravi Raj
Ravi Raj

Reputation: 6687

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} />,
});

Upvotes: 3

Related Questions