Clever Geek Handbook

Dynamically hide / show title in responsive mode

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

I am changing dynamicLeft dynamically like this, but cannot find a way to do it for the whole 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 need something like this - hide / show header based on state:

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


source to share


2 answers


It worked:

I don’t know why this is, but passing undefined

to the header will show the default null

header and hide the header.

I am doing something like this:



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

and when the state changes;

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


source


As per the docs, setting the value header

to null hides the title. Go like this



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


source






More articles:


All Articles