React native Question posted in
The official React Native documentation can be found here.

webview at react native show white screen before load complete

I tried to show content using webview but screen shows me white screen before webpage load complete .
I want to change color white to #131416. but style option doesn’t work.

how can I fix this?

   <WebView
          ref={webViewRef}
          source={{
            uri: currentUrl.current,
          }}
          style={{ flex: 1, backgroundColor: "#131416" }}
          onLoadStart={handleOnLoadStart}
          javaScriptEnabled={true}
          allowFileAccess={true}
          onMessage={handleMessage}
          onNavigationStateChange={setNavigationState}
          userAgent={userAgent}
          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
          scrollEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true}
          onLoadEnd={handleOnLoadEnd}
          onContentProcessDidTerminate={() => {
            RNRestart.restart();
          }}
        />

I tried change styles and used renderLoading props but doesn’t work.

Tags:

2

Answers


  1. 0

    Wrap WebView (transparent background) with View and define the desired background color there.

    <View style={{ flex: 1, backgroundColor: 'blue' }}>
  <WebView
    style={{ flex: 1, backgroundColor: 'transparent' }}
    source={{
      uri: 'https://google.com',
    }}
  />
</View>
    Login or Signup to reply.
  2. 0 
    import React, { useEffect, useRef, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { WebView } from "react-native-webview";
import {
BackHandler,
Platform,
ActivityIndicator,
AppRegistry,
View,
Text,
} from "react-native";

const App = () => {
const webViewRef = useRef(null);
const [canGoBack, setCanGoBack] = useState(false);
const [isLoading, setIsLoading] = useState(true);

const onAndroidBackPress = () => {
    if (canGoBack && webViewRef.current) {
        webViewRef.current.goBack();
        return true;
    }
    return false;
};

useEffect(() => {
    if (Platform.OS === "android") {
        BackHandler.addEventListener("hardwareBackPress", onAndroidBackPress);
        return () => {
            BackHandler.removeEventListener(
                "hardwareBackPress",
                onAndroidBackPress
            );
        };
    }
}, [canGoBack]);

const jsCode = `
    var cookie={};
    document.cookie.split('; ').forEach(function(i){cookie[i.split('=')[0]]=i.split('=')[1]});
    document.querySelector('#username').value=cookie['username'] || '';
    document.querySelector('#password').value=cookie['password'] || '';
    document.querySelector('.Button Button--primary').onclick = function(){
        document.cookie = 'username='+document.querySelector('#username').value;
        document.cookie = 'password='+document.querySelector('#password').value;
    };
`;

return (
    <>
        <StatusBar backgroundColor="#2888a1" />
        {isLoading && (
            <View
                style={{
                    flex: 1,
                    justifyContent: "flex-end",
                    alignItems: "center",
                }}
            >
                <Text style={{ color: "black", fontSize: 20, marginBottom: 20 }}>
                    Please wait while the data loads.
                </Text>
                <ActivityIndicator size="large" color={"black"} />
            </View>
        )}
        <WebView
            ref={webViewRef}
            onNavigationStateChange={(navState) => {
                setCanGoBack(navState.canGoBack);
            }}
              source={{
               uri: 'https://google.com',
             }}
            javaScriptEnabled={true}
            injectedJavaScript={jsCode}
            domStorageEnabled={true}
            cacheEnabled={true}
            thirdPartyCookiesEnabled={true}
            sharedCookiesEnabled={true}
            pullToRefreshEnabled={true}
            style={{ marginTop: 30, opacity: isLoading ? 0 : 1 }}
            onLoadStart={() => {}}
            onLoadEnd={() => {
                setIsLoading(false);
            }}
        />
    </>
);
};

 AppRegistry.registerComponent("App", () => App);

 export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search