This is SplashScreen.js page
I want to get the splash screen displayed and goes invisible by a timeout and then navigate to Onboarding Screen (sliding splash screens)
import React from 'react';
import { View} from 'react-native';
import LogoImage from './LogoImage.js'
import styles from '../stylesheets/SplashStylesheet.js'
const SplashScreen = ({ navigation }) => {
render() {
let that = this;
setTimeout(function(){that.setState({timePassed: true})}, 1000);
const { navigate } = this.props.navigation;
if (!this.state.timePassed){
return (
<View
style = {styles.splashScreen}>
<LogoImage/>
</View>
);
}
else{
() => navigate('Onboarding);
}
export default SplashScreen;
Try like this
import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
const SplashScreen = ({ navigation }) => {
const [timePassed, setTimePassed] = useState(false);
setTimeout(function () {
setTimePassed(true);
}, 5000);
if (!timePassed) {
return (
<View style={styles.splash}>
<Text style={styles.text}>Splash Screen</Text>
</View>
);
}
navigation.navigate('Onboarding Screen');
return null;
};
const styles = StyleSheet.create({
splash: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh"
},
text: {
fontSize: 20
}
});
export default SplashScreen;
I set an alert when navigation happens for now. You can change it to redirect.
In your App.js you need to have a stackNavigator setup like below which gives the navigation prop.
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash Screen" >
<Stack.Screen name="Splash Screen" component={SplashScreen} />
<Stack.Screen name="Main Page" component={OnboadingPage} />
</Stack.Navigator>
</NavigationContainer>
);
};
Code sandbox => https://codesandbox.io/s/cool-violet-7lqqr?file=/src/App.js