react-native-webView not loaded first page perfectly of live website

445 Views Asked by At

I am using React Native Webview but sometimes it can't load data perfectly, and sometimes it works fine. It works randomly. It only occur on IOS mobiles. I am using :

react-native-webview: 13.3.0,
react: 18.2.0
react-native: 0.72.3,
 <WebView
            source={{ uri: initialLink, headers }}
            javaScriptEnabled={true}
            ref={webViewRef}
            mediaPlaybackRequiresUserAction={false}
            //For the Cache
            domStorageEnabled={true}
            //View to show while loading the webpage
            renderLoading={() => <ActivityIndicatorElement />}
            onContentProcessDidTerminate={() => webViewRef.current.reload()}
            //Want to show the view or not
            startInLoadingState={true}
            geolocationEnabled={true}
            scalesPageToFit
            allowsInlineMediaPlayback={true}
            javaScriptEnabledAndroid={true}
            allowFileAccess={true}
            originWhitelist={['*']}
            onError={() => setOnError(true)}
            injectedJavaScript={INJECTED_JAVASCRIPT}
            injectedJavaScriptBeforeContentLoaded={`
    window.onerror = function(message, sourcefile, lineno, colno, error) {
      // alert("Message: " + message + " - Source: " + sourcefile + " Line: " + lineno + ":" + colno);
      return true;
    };
    true;
  `}
            onLoad={sendPlatformSpecsToWebView}
            style={{ alignItems: 'center' }}
            onMessage={event => { }}
            limitsNavigationsToAppBoundDomains={true}
            onShouldStartLoadWithRequest={event => {
              const { url } = event;

              if (url.startsWith('https://api.whatsapp.com/send/')) {
                // Open WhatsApp externally

                Linking.openURL(url);
                return false; // Prevent the WebView from loading the URL
              }

              if (
                url.endsWith('.xlsx') ||
                url.endsWith('.csv') ||
                url.endsWith('.zip')
              ) {
                // Define headers to suggest a download
                const headers = {
                  'Content-Disposition':
                    'attachment; filename="' +
                    url.substring(url.lastIndexOf('/') + 1) +
                    '"',
                  'Content-Type': 'application/octet-stream',
                };

                // Open the URL externally to trigger the download
                Linking.openURL(url, { headers })
                  .then(() => {
                    // Handle success if needed
                  })
                  .catch(error => {
                    // Handle error if needed
                  });

                return false; // Prevent the WebView from loading the URL
              }
              return true; // Load other URLs normally
            }}
            userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
          />

Here is the issue link https://github.com/react-native-webview/react-native-webview/issues/3069

It load perfect but some time not. it only occur with the first page. It only occur on IOS mobiles.

0

There are 0 best solutions below