Menu
React Native – Splash Screen
// App.js
import React, {Component} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Homescreen from './src/Dialphone';
import Splashscreen from './src/Splashscreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="Splash" component={Splashscreen} />
<Stack.Screen name="Home" component={Homescreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
// Splashscreen.js
import React, { Component } from 'react';
import { Image, View } from 'react-native';
export default class Splashscreen extends Component {
delay = async() => {
return new Promise((resolve) =>
setTimeout(
() => { resolve('result') },
3000
)
)
}
async componentDidMount() {
const data = await this.delay();
if (data !== null) {
this.props.navigation.navigate('Home');
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image source={{uri: 'https://picsum.photos/500'}}
style={{ width: 500, height: 300 }}
/>
</View>
)
}
}
// Homescreen.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Dialphone extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontSize:40}}>Home Screen</Text>
</View>
)
}
}
