Navigation outside render function - react-native

Question

I have a function to navigate to different component by checking in Async storage.
Here is my Loading Page Code:
import React from 'react';
import {
View,
Text
} from 'react-native';
import { AsyncStorage } from 'react-native';
export class LoadingScreen extends React.Component{
componentDidMount(){
async()=>{
try{
const usertoken = await AsyncStorage.getItem('token');
if(usertoken !== null ){
return this.props.navigation.navigate('Login');
}else{
return this.props.navigation.navigate('Register');
}
}catch(error){
this.props.navigation.navigate('Register')
}
};
}
render(){
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>This is loading...</Text>
</View>
);
}
}
But while running the app its not navigating to another Screen.
What am I doing wrong?
This is my register component:
import React , { Component } from 'react';
import {
View,
Text
} from 'react-native';
import { withNavigation } from 'react-navigation';
class RegisterScreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Register Screen</Text>
</View>
);
}
}
export default withNavigation(RegisterScreen);

Answer 1

Export both Login and Register using withNavigation. Like below.
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { withNavigation } from 'react-navigation';
class Login extends Component {
render() {
return (
<View>
<Text> Login </Text>
</View>
)
}
}
export default withNavigation(Login);