react-nativewebviewexpo

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