The picture file I drew is in ASSETS You can tell from this picture I want to set the time when this image appears I don't know much about coding because I'm a beginner I want you to modify my whole code I really want to complete this app Please help me I want to make the splash image appear for about 5 seconds

import React, { useRef, useState, useCallback, useEffect } from "react";
import { BackHandler, Platform, StyleSheet,ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";

export default function App() {
 const webView = useRef();

 const [canGoBack, setCanGoBack] = useState(false);
 const handleBack = useCallback(() => {
  if (canGoBack && webView.current) {
   webView.current.goBack();
   return true;
  }
  return false;
 }, [canGoBack]);

  useEffect(() => {
  BackHandler.addEventListener("hardwareBackPress", handleBack);
  return () => {
   BackHandler.removeEventListener("hardwareBackPress", handleBack);
  };
 }, [handleBack]);
 const App = () => (
 <View style={[styles.container, styles.horizontal]}>
  <ActivityIndicator />
  <ActivityIndicator size="large" />
  <ActivityIndicator size="small" color="#0000ff" />
  <ActivityIndicator size="large" color="#00ff00" />
 </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
  },
});


const platformStyles = StyleSheet.create({
    webView: Platform.OS === 'ios' 
      ? { marginTop: 30, marginBottom: 40 }
      : { marginTop: 30 }
  });


  return (
    <WebView
      ref={webView}
      source={{ uri: "https://www.talesrunnerbestguild.co.kr/" }}
   
      style = {platformStyles.webView}
      onl oadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
    />
  );

}

CodePudding user response：

So what you can do is once your splash image appears finish then launch default View where you can show splash image for 5 seconds, which you can set timer. Then navigate to another screen whichever you want to show after your timer time end ie after 5 seconds.

CodePudding user response：

As You are using expo. You can achieve it by using expo-splash-screen function SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync()

Install expo-splash-screen in your project root.

expo install expo-splash-screen

Here is what you need to add to your code. I modify it from above expo guide

export default function App() {

...
  const [appIsReady, setAppIsReady] = useState(false)

  async function preventSplashHide() {
      try {
        // Manually stop hiding the splash screen
        await SplashScreen.preventAutoHideAsync()
        // 5 second timer
        await new Promise(resolve => setTimeout(resolve, 5000))
      } finally {
        setAppIsReady(true);
      }
    }

  // call preventSplashHide() when mount
  useEffect(() => {
    preventSplashHide()
  }, [])


  const hideSplash = useCallback(async () => {
    if (appIsReady) {
      // hide the splash screen when root view is shown(when appIsReady is true)
      await SplashScreen.hideAsync()
     // meanwhile the callback is listening on appIsReady
    }
  }, [appIsReady])

  if (!appIsReady) {
    return null
  }

  return (
    <View
      onLayout={hideSplash}>
    ...
    </View>
  );

}