Dynamically hide/show header in react-native

Question

I am using react-navigation for routing purpose. I want to dynamically hide or show header on one component. Any way to do it?

I change headerLeft dynamically like this but can not find any way to do it for entire header.

static navigationOptions = ({ navigation }) => ({
    headerRight: navigation.state.params ? navigation.state.params.headerRight : null
});

this.props.navigation.setParams({
        headerRight: (
            <View>
                <TouchableOpacity onPress={() => blaa} >
                     <Text>Start</Text>
                </TouchableOpacity>
            </View>
        )
});

I want something like this - hide/show header based on state:

this.props.navigation.setParams({
        header: this.state.header
});

David Schumann · Accepted Answer · 2018-05-09 16:25:03Z

17

Got it working:

Don't know why it is so but passing undefined to header will show default header and null will hide the header.

I am doing something like this:

static navigationOptions = ({ navigation }) => ({
    header: navigation.state.params ? navigation.state.params.header : undefined
});

and on state change;

this.props.navigation.setParams({ 
        header: null 
});

edited May 9, 2018 at 16:25

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Jun 28, 2017 at 16:42

Karan Bhutwala

79710 silver badges17 bronze badges

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

3 Comments

Karan Bhutwala Over a year ago

@kaya null hides the header. that is fine. what I dint get is how header is resetting to original on setting it undefined dynamically.

kaya Over a year ago

I didn't find it in docs but I can say that undefined means not defined so it resets the value.

Karan Bhutwala Over a year ago

@kaya Yes that is possible.

Diego Segura · Accepted Answer · 2023-06-14 22:20:17Z

1

Instead of using setParams as stated by other answers, you can use setOptions directly. Something like:

navigation.setOptions({ headerShown: false })

You can take navigation from the route props or using the useNavigation hook

This way you don't need to add logic to your route, but apply the effect directly

answered Jun 14, 2023 at 22:20

Diego Segura

1,0538 silver badges18 bronze badges

Comments

David Schumann · Accepted Answer · 2018-05-09 16:29:18Z

0

According to the docs, setting the header to null hides the header. Go about it like this

this.props.navigation.setParams({
  header: this.state.header ? whatever-you-want : null
})

edited May 9, 2018 at 16:29

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Jun 27, 2017 at 15:22

Chiamaka Nwolisa

9818 silver badges16 bronze badges

3 Comments

Karan Bhutwala Over a year ago

Hiding it is easy with null but what should be the value for 'whatever-you-want'

Chiamaka Nwolisa Over a year ago

you said you wanted to dynamically hide or show the header component right? whatever-you-want should be substituted for a react element or function. reactnavigation.org/docs/navigators/stack#header that you want to be shown as the header

Karan Bhutwala Over a year ago

here header is not separate react element, header is a part of react-navigation library.

Minh Nguyen · Accepted Answer · 2024-01-22 08:16:53Z

0

I need to set both of headerShow and header options:

on fullscreen

navigation.setOptions({ headerShown: false, header: null });

on exist fullscreen

navigation.setOptions({ headerShown: true, header: undefined });

answered Jan 22, 2024 at 8:16

Minh Nguyen

4901 gold badge4 silver badges8 bronze badges

Collectives™ on Stack Overflow

Dynamically hide/show header in react-native

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related