CODEWITHSUNDEEP
react-nativereact-navigation
Karan Bhutwala
Karan Bhutwala

Reputation: 797

Dynamically hide/show header in react-native

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

Upvotes: 5

Views: 9020

Answers (4)

Minh Nguyen
Minh Nguyen

Reputation: 490

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

Upvotes: 0

Diego Segura
Diego Segura

Reputation: 1033

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

Upvotes: 1

Chiamaka Nwolisa
Chiamaka Nwolisa

Reputation: 971

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

Upvotes: 0

Karan Bhutwala
Karan Bhutwala

Reputation: 797

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

Upvotes: 17

Related Questions