Splash screen using react navigation

Question

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')

App works perfectly till the loading screen when the set time evoke the navigation.natvigate(reg) it throw the error

App.js

import React,{Component, useState} from "react";
import { StyleSheet, Text, View } from "react-native";
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 (  
    <Loadingscreen/>   
  );
}

function Registration() {
  return (
    <Registrationscreen/>
         );
    }

 const Stack = createStackNavigator();

 const getFonts = () => Font.loadAsync({
  'light':require('./assets/font/font.ttf')
});

 function App() {

  const [fontsLoaded, setFontsLoaded] = useState(false);

  if(fontsLoaded){
    
    return (
   <NavigationContainer>
     <Stack.Navigator initialRouteName="home" screenOptions={{
    headerShown: false
  }}>
       <Stack.Screen name="home" component={HomeScreen}></Stack.Screen>
       <Stack.Screen name="reg" component={Registration}></Stack.Screen>

       
     </Stack.Navigator>
   </NavigationContainer>
    );
  } else{
    return (
    <AppLoading
      startAsync={getFonts}
      onFinish={()=> setFontsLoaded(true)}
      />
    )
  }

  
  
  }

  export default App;

LoadingScreen js

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 "react-navigation";
import Logo from '../assets/Logo.png';
 
    const switchtoAuth = () =>{
        
        this.props.navigation.navigate("reg");

            
     
      };

 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(() => {
                  this.setState({
                      loadingSpinner: true,
                  });

                  setTimeout(switchtoAuth,1200);
            });
         
     }

    render () {
        return (
          <View style={styles.container}> 
           <Animated.View 
             style={{
               opacity: this.state.LogoAnime,
               top: this.state.LogoAnime.interpolate({
                inputRange: [0, 1],
                outputRange: [80, 0],
            }),
        }}>
        <Image source={Logo} />
        </Animated.View>  
        
        <Text style={styles.logotext}> AL HANA  </Text>
       
               
        </View>
         );
    }
}

export default Loadingscreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#036BDD',
        justifyContent: 'center',
        alignItems: 'center',
    },

    logotext:{
        
        color: '#FFFFFF',
        fontFamily: 'light',
        fontSize: 26,
        position: "absolute",
        top: 700,
        fontWeight: "bold",
        letterSpacing: 3,
        textAlign: "center",
    },
});

Answer 1

First of all, in your loading screen switchtoAuth() function is outside of the LoadingScreen class that should be inside LoadingScreen class.

Since you already made LoadingScreen as a screen just add it to NavigationContainer

<NavigationContainer>
     <Stack.Navigator initialRouteName="home" screenOptions={{ headerShown: false}}>
       <Stack.Screen name="Splash" component={LoadingScreen}></Stack.Screen> //add LoadingScreen here
       <Stack.Screen name="home" component={HomeScreen}></Stack.Screen>
       <Stack.Screen name="reg" component={Registration}></Stack.Screen>
     </Stack.Navigator>   
</NavigationContainer>

And inside LoadingScreen componentDidMount() do this

setTimeout(() => this.props.navigation.navigate("reg"), 2000);

Answer 2

since your LoadingScreen component is not a screen component it will not receive the navigation prop automatically, so you need to pass through props from HomeScreen

function HomeScreen({ navigation }) {
  return (  
    <Loadingscreen navigation={navigation}/>   
  );
}

and in your LoadingScreen first you need to put the switchtoAuth inside the class component without the const and then call the navigation.navigate:

class Loadingscreen extends Component {
     state = {
         LogoAnime: new Animated.Value(0),
         LogoText: new Animated.Value(0),
         loadingSpinner: false,
     };

     switchtoAuth = () =>{
        
      this.props.navigation.navigate("reg");
    
     };

     // the rest of your component