Hide and show navigation header on react native navigation

Question

I'll like to hide the navigation header when clicked on the icon, the code bellow hides the header but do not restore it when search back button is pressed ....

Here is the code:

static navigationOptions = ({ navigation }) => {
    const {params} = navigation.state;

    return {
            title: 'Chats',
            titleStyle: {
                color: '#ffffff',  
            },
            tintColor: '#ffffff',
            headerTintColor: '#ffffff',
            headerStyle: {
                backgroundColor: "#E6A919"
            },
            header: navigation.state.params ? navigation.state.params.header : undefined, 
            headerTitleStyle: {
                color: '#ffffff'
            }, 
            headerRight: () =>     
                                  <TouchableOpacity
                                    onPress={
                                        () => {
                                            
                                            navigation.setParams({ header: null });
                                            navigation.setParams({ showSearch: true });
                                        }   
                                    }                             
                                  >
                                    <Icon
                                        style={{ width: 24, height: 24, margin: 15, color: '#ffffff', backgroundColor: 'transparent'}}
                                        name={"search"}
                                    />
                                  </TouchableOpacity>
    }        
}

onBackPressed = () => {
    console.log("Back pressed!");
    
    this.props.navigation.setParams({ showSearch: false });
    this.props.navigation.setParams({ header: true });
    this.resetSearchText();
};

What can I do?

Thanks

Gabriel Menezes da Silva · Accepted Answer · 2021-02-04 11:02:05Z

1

This post answers your question. You're doing right, you just need to add the conditional expression now to return the header only when the navigation.state.params.header is different of undefined.

answered Feb 4, 2021 at 11:02

Gabriel Menezes da Silva

6023 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marco Martin Over a year ago

Thanks! worked to hide the header... but how do I restore it when pressing back button? Code has been modified on the question....

Gabriel Menezes da Silva Over a year ago

You're welcome! I'm glad I could help you!

Marco Martin · Accepted Answer · 2021-02-04 16:09:15Z

0

To make it visible again I solved setting 'undefined' to header...

answered Feb 4, 2021 at 16:09

Marco Martin

1851 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Hide and show navigation header on react native navigation

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related