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)
JavaScript
x
27
27
1
import React from 'react';
2
import { View} from 'react-native';
3
4
import LogoImage from './LogoImage.js'
5
import styles from '../stylesheets/SplashStylesheet.js'
6
7
8
const SplashScreen = ({ navigation }) => {
9
render() {
10
let that = this;
11
setTimeout(function(){that.setState({timePassed: true})}, 1000);
12
const { navigate } = this.props.navigation;
13
14
if (!this.state.timePassed){
15
return (
16
<View
17
style = {styles.splashScreen}>
18
<LogoImage/>
19
</View>
20
);
21
}
22
else{
23
() => navigate('Onboarding);
24
}
25
26
export default SplashScreen;
27
Advertisement
Answer
Try like this
JavaScript
1
35
35
1
import React, { useState } from "react";
2
import { View, Text, StyleSheet } from "react-native";
3
4
const SplashScreen = ({ navigation }) => {
5
const [timePassed, setTimePassed] = useState(false);
6
7
setTimeout(function () {
8
setTimePassed(true);
9
}, 5000);
10
11
if (!timePassed) {
12
return (
13
<View style={styles.splash}>
14
<Text style={styles.text}>Splash Screen</Text>
15
</View>
16
);
17
}
18
navigation.navigate('Onboarding Screen');
19
return null;
20
};
21
22
const styles = StyleSheet.create({
23
splash: {
24
display: "flex",
25
alignItems: "center",
26
justifyContent: "center",
27
height: "100vh"
28
},
29
text: {
30
fontSize: 20
31
}
32
});
33
34
export default SplashScreen;
35
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.
JavaScript
1
16
16
1
import { NavigationContainer } from '@react-navigation/native';
2
import { createStackNavigator } from '@react-navigation/stack';
3
4
const Stack = createStackNavigator();
5
6
const App = () => {
7
return (
8
<NavigationContainer>
9
<Stack.Navigator initialRouteName="Splash Screen" >
10
<Stack.Screen name="Splash Screen" component={SplashScreen} />
11
<Stack.Screen name="Main Page" component={OnboadingPage} />
12
</Stack.Navigator>
13
</NavigationContainer>
14
);
15
};
16
Code sandbox => https://codesandbox.io/s/cool-violet-7lqqr?file=/src/App.js