I want to spend more time on splash images I want to set the time of the splash image Splash image only appears for 1 second and then white screen. I want the first loading screen to appear only as splash image This is my app,js file. Please add the code here

    *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;`enter code here`
  }, [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：

I have fixed this code for you! Please don't forget to upvote if I helped you!

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

const DELAY_BEFORE_WEBVIEW = 10; // <--- seconds before webview load

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

  // callbacks
  const handleBack = useCallback(() => {
    if (canGoBack && webView.current) {
      webView.current.goBack();
      return true;
    }
    return false;
    `enter code here`;
  }, [canGoBack]);

  // effects
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleBack);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleBack);
    };
  }, [handleBack]);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000 * DELAY_BEFORE_WEBVIEW);
  }, []);

  // states
  const [canGoBack, setCanGoBack] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  return (
    <View style={styles.container}>
      <WebView
        ref={webView}
        source={{ uri: 'https://www.talesrunnerbestguild.co.kr/' }}
        style={styles.webView}
        onl oadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
      />
      {isLoading && <CenterLoader />}
    </View>
  );
}

const CenterLoader = () => (
  <View style={styles.loaderContainer}>
    <ActivityIndicator size="large" color="#00ff00" />
  </View>
);

const styles = StyleSheet.create({
  container: { flex: 1 },
  loaderContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor:'white' // <-- comment this to show webview while loading
  },
  webView:
    Platform.OS === 'ios'
      ? { marginTop: 30, marginBottom: 40 }
      : { marginTop: 30 },
});