My first react native code in expo: need to add splash screen with 5 seconds time

This is my first expo code which I am able to run successfully:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <WebView
        style={{ marginTop: 0 }}
        source={{ uri: 'https://baldeaglemall.com/' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

But I am unable to add a splash screen with 10 seconds time to it for display. Chasing google search is not leading me anywhere. What modifications do I need to do my code above?

Edit:

Splash screen works based on examples in expo documentation.

But the below answer causes a white screen right after the splash screen and it stays at white screen and never goes in the webview.

Solution

You could use SplashScreen.preventAutoHideAsync() (provided by expo-splash-screen) to make the native splash screen stay visible until SplashScreen.hideAsync() is called.

Add the package to your dependencies

$ expo install expo-splash-screen

And then, use it like this:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen'; // <-- import it

import AssetExample from './components/AssetExample';

import { Card } from 'react-native-paper';

// Prevent native splash screen from autohiding before App component declaration
SplashScreen.preventAutoHideAsync()
  .then((result) => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
  .catch(console.warn); // it's good to explicitly catch and inspect any error

export default function App() {
  React.useEffect(() => {
    setTimeout(async () => {
      await SplashScreen.hideAsync();
    }, 5000); // <-- Set this to `5000` ms to hide it after 5 seconds
  }, []);

  return (
    <WebView
      style={{ marginTop: 0 }}
      source={{ uri: 'https://baldeaglemall.com/' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

_{Disclaimer: I haven't tested this code, but it should work}