react webview white screen after splash screen

user_19515251 0
Viewed 61

I want to get rid of the white screen

app.js 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}
      onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
    />
  );

}
react-native
1 Answers

In your <WebView>, you are passing platformStyles.webView which only has marginTop and marginBottom defined.

The white screen may not be a component shown on your app. Rather I believe it could be that there are no components being shown in your initial code, so you only see a white screen.

To check if this is the case, you can wrap your <WebView> with a <View> element with a red (or whatever color you prefer) background color.

For example,

<View style={{backgroundColor: 'red'}}>
  <WebView
    ref={webView}
    source={{ uri: "https://www.talesrunnerbestguild.co.kr/" }}
     
    style = {platformStyles.webView}
    onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
  />
</View>

If so, you can try fixing the platformStyles.webView style by filling the entire screen with flex: 1.

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