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",
},
});
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
and in your LoadingScreen first you need to put the switchtoAuth inside the class component without the const and then call the navigation.navigate: