Navigation is not called right after user is unauthenticated - react-native

Question

I am trying to logout the user and then send him to SignedOut screen but when I press on Sign Out it is calling the unauthUser function but then it restart the switch navigator to dashboard and I have to go in profile screen to tap again on Sign Out to go out. Any idea what am I doing wrong in all this?
Here is my button from Profile.js
<TouchableOpacity
onPress={() => onSignOut().then(() => {
this.props.dispatch(unauthUser)
navigation.navigate("SignedOut")
}
)}
>
<View style={styles.signOutButton}>
<Text style={styles.button}>SIGN OUT</Text>
</View>
</TouchableOpacity>
onSignOut() from Auth.js
export let USER_KEY = 'myKey';
export const onSignIn = async () => { await AsyncStorage.setItem(USER_KEY, 'true') };
export const onSignOut = async () => { await AsyncStorage.removeItem(USER_KEY) };
export const isSignedIn = () => {
return new Promise((resolve, reject) => {
AsyncStorage.getItem(USER_KEY)
.then(res => {
if (res !== null) {
// console.log('true')
resolve(true);
} else {
resolve(false);
// console.log('false')
}
})
.catch(err => reject(err));
});
};
unauthUser from authActions.js
exports.unauthUser = {
type: 'UNAUTH_USER'
}
and from authReducer.js
case 'UNAUTH_USER':
return {
user_id: undefined,
token: undefined
};
and here is my switch navigator
export const createRootNavigator = (signedIn = false) => {
return SwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
);
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
signedIn: false,
checkedSignIn: false
};
}
async componentWillMount() {
await isSignedIn()
.then(res => this.setState({ signedIn: res, checkedSignIn: true}))
.catch(err => alert("An error occurred"));
}
render() {
const { checkedSignIn, signedIn } = this.state;
// If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
if (!checkedSignIn) {
return null;
}
const Layout = createRootNavigator(signedIn);
return (
<SafeAreaView style={styles.safeArea}>
<View style={{flex: 1, backgroundColor: '#ffffff'}}>
<StatusBar barStyle="light-content"/>
<Layout />
<AlertContainer/>
</View>
</SafeAreaView>
)
}
};