Hide header from old page in react-native

Question

I'm currently developing on a react-native application and I'm stucked at something for some time. The problem is that I have a setup like this

Home Page -> Settings Page -> Information Page

I've hidden the header on home page, made a visible header on Settings Page and what I want to do: I want to hide the header from the settings page when I navigate to Information Page. I mean I want that the third page gets all the space from the screen.

I'll attach a snack example of what happens in my case... Hope someone could tell me a solution. Thank you in advance! :)

https://snack.expo.io/@sapuu_ae/example-snack-stack -> open it on android/iOS device, it won't show good on web simulator.

Answer 1

The problem isn't the header, it's just that your navigation setup is a bit funky. Here are two working versions which use a different navigation setup. First, we need to define our screens.

class Home extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Second')}>
                    Press it
                </Text>
            </View>
        );
    }
}

class Second extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    Second Page
                </Text>
                <Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Third')}>
                    Press for Third Page
                </Text>
            </View>
        );
    }
}

class Third extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    Third page here
                </Text>
            </View>
        );
    }
}

1. This one assumes that all screens are part of the same stack:

const RootStack = createStackNavigator({
    Home: Home,
    Second: Second,
    Third : Third
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

2. This one assumes that the third screen is contained in another stack, along with the second screen.

const secondScreenStack = createStackNavigator({
    Second: Second,
    Third: Third
}, {
    defaultNavigationOptions: {
        header: null
    }
});

const RootStack = createStackNavigator({
    Home: Home,
    Second: secondScreenStack
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}