CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Somename
Somename

Reputation: 3434

Hide and show reactnavigation headers onPress

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

Upvotes: 0

Views: 561

Answers (1)

ReyHaynes
ReyHaynes

Reputation: 3102

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

Upvotes: 1

Related Questions