class FirstComponent extends React.Component<{}> {
    componentDidMount() {
        console.log('FirstComponent componentDidMount');
    }

    componentWillUnmount() {
        console.log('FirstComponent componentWillUnmount');
    }

    render() {
        const { navigation } = this.props;
        return (
            <Page>
                <Text>FirstComponent</Text>
                <Text onPress={() => navigation.navigate('Second')} style={{ color: 'blue' }}>to SecondComponent</Text>
            </Page>
        );
    }
}

class SecondComponent extends React.Component<{}> {
    componentDidMount() {
        console.log('SecondComponent componentDidMount');
    }

    componentWillUnmount() {
        console.log('SecondComponent componentWillUnmount');
    }

    render() {
        const { navigation } = this.props;
        return (
            <Page>
                <Text>SecondComponent</Text>
                <Text onPress={() => navigation.navigate('First')} style={{ color: 'blue' }}>to FirstComponent</Text>
            </Page>
        );
    }
}

const AppStack = createSwitchNavigator({
    First: createStackNavigator({ FirstComponent }),
    Second: createStackNavigator({ SecondComponent })
}, {
    resetOnBlur: true,
    initialRouteName: 'First'
});