SwitchNavigator screens are never unmounted - react-navigation

Question

I've implemented https://reactnavigation.org/docs/en/auth-flow.html as described with a SwitchNavigator. However, my AuthScreen is never unmounted when I navigate to App.
I'm, using a SwitchNavigator, with in it a screen and a DrawerNavigator, as well as some StackNavigators. I've tried changing the structure of my navigators, but that doesn't seem to have any effect.
const AppStack = createDrawerNavigator(
{
StackA: {
name: 'someStackNavigator',
screen: someStackNavigator
},
},
{
...
});
const AppNavigator = createSwitchNavigator(
{
App: AppStack,
Auth: {
screen: AuthScreen
}
},
{
initialRouteName: 'App'
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
How do I force the Auth screen in the SwitchNavigator to be unmounted if you navigate to a screen in the other stacks/drawers?

Answer 1

Like this?
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {
createSwitchNavigator,
createStackNavigator,
createAppContainer,
createDrawerNavigator,
} from 'react-navigation';
class Screen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Screen</Text>
</View>
);
}
}
class AuthScreen extends Component {
componentDidMount() {
console.log('componentDidMount');
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return (
<View style={styles.container}>
<Text>Auth Screen</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('App')}>
<Text>Login</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 40,
justifyContent: 'center',
alignItems: 'center',
},
});
const SomeStackNavigator = createStackNavigator({
ScreenA: Screen,
ScreenB: Screen,
});
const AppStack = createDrawerNavigator({
StackA: {
name: 'StackA',
screen: SomeStackNavigator,
},
StackB: {
name: 'StackB',
screen: SomeStackNavigator,
},
});
const AppNavigator = createSwitchNavigator(
{
App: AppStack,
Auth: {
screen: AuthScreen,
},
},
{
initialRouteName: 'Auth',
},
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
You can try it here. You can see in the console that AuthScreen is unmounted when the login button is clicked.