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

React Native – Splash Screen

Home >> React Native