title: Splash screen using react navigation
body: <p>I have created a loading screen and a Registartion screen. I would like that after 2 second my loading screen goes which basically is splash screen changes to registration screen using settimeout , but it's showing: undefined is not an object(evaluating
  '_this.props')</p>
  <p><em>App works perfectly till the loading screen when the set time evoke the navigation.natvigate(reg)
  it throw the error</em></p>
  <p><strong>App.js</strong></p>
  <pre><code>import React,{Component, useState} from &quot;react&quot;;
  import { StyleSheet, Text, View } from &quot;react-native&quot;;
  import { AppLoading } from 'expo';
  import * as Font from 'expo-font';
  
  import Registrationscreen from './screen/Registrationscreen';
  import Loadingscreen from './screen/Loadingscreen';
  
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  
  function HomeScreen() {
    return (  
      &lt;Loadingscreen/&gt;   
    );
  }
  
  function Registration() {
    return (
      &lt;Registrationscreen/&gt;
           );
      }
  
   const Stack = createStackNavigator();
  
   const getFonts = () =&gt; Font.loadAsync({
    'light':require('./assets/font/font.ttf')
  });
  
   function App() {
  
    const [fontsLoaded, setFontsLoaded] = useState(false);
  
    if(fontsLoaded){
      
      return (
     &lt;NavigationContainer&gt;
       &lt;Stack.Navigator initialRouteName=&quot;home&quot; screenOptions={{
      headerShown: false
    }}&gt;
         &lt;Stack.Screen name=&quot;home&quot; component={HomeScreen}&gt;&lt;/Stack.Screen&gt;
         &lt;Stack.Screen name=&quot;reg&quot; component={Registration}&gt;&lt;/Stack.Screen&gt;
  
         
       &lt;/Stack.Navigator&gt;
     &lt;/NavigationContainer&gt;
      );
    } else{
      return (
      &lt;AppLoading
        startAsync={getFonts}
        onFinish={()=&gt; setFontsLoaded(true)}
        /&gt;
      )
    }
  
    
    
    }
  
    export default App;
  </code></pre>
  <p><strong>LoadingScreen js</strong></p>
  <pre><code>import React, { Component, useState } from 'react';
  import  {View, Image, Text , StyleSheet, Animated} from 'react-native';
  
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { NavigationActions } from &quot;react-navigation&quot;;
  import Logo from '../assets/Logo.png';
   
      const switchtoAuth = () =&gt;{
          
          this.props.navigation.navigate(&quot;reg&quot;);
  
              
       
        };
  
   class Loadingscreen extends Component {
       state = {
           LogoAnime: new Animated.Value(0),
           LogoText: new Animated.Value(0),
           loadingSpinner: false,
       };
  
      
       componentDidMount() {
       
           const {LogoAnime, LogoText} = this.state;
           Animated.parallel([
               Animated.spring(LogoAnime, {
                   toValue: 1,
                   tension: 20,
                   friction: 1,
                   duration: 2000,
                   
                }).start(),
  
               Animated.timing(LogoText, {
                   toValue: 1,
                   duration: 1,
                   useNativeDriver: true
               }),
              ]).start(() =&gt; {
                    this.setState({
                        loadingSpinner: true,
                    });
  
                    setTimeout(switchtoAuth,1200);
              });
           
       }
  
      render () {
          return (
            &lt;View style={styles.container}&gt; 
             &lt;Animated.View 
               style={{
                 opacity: this.state.LogoAnime,
                 top: this.state.LogoAnime.interpolate({
                  inputRange: [0, 1],
                  outputRange: [80, 0],
              }),
          }}&gt;
          &lt;Image source={Logo} /&gt;
          &lt;/Animated.View&gt;  
          
          &lt;Text style={styles.logotext}&gt; AL HANA  &lt;/Text&gt;
         
                 
          &lt;/View&gt;
           );
      }
  }
  
  export default Loadingscreen;
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#036BDD',
          justifyContent: 'center',
          alignItems: 'center',
      },
  
      logotext:{
          
          color: '#FFFFFF',
          fontFamily: 'light',
          fontSize: 26,
          position: &quot;absolute&quot;,
          top: 700,
          fontWeight: &quot;bold&quot;,
          letterSpacing: 3,
          textAlign: &quot;center&quot;,
      },
  });
  </code></pre>