Content is not properly visible on IOS

[Salmankhan033]

The web view is working fine in Android but in ios 12 and so on the web view content is not properly visible, On the ios model Below 12 is working perfectly.
Sometimes it worked fine on all devices but normally it did not work.
I am using :
react-native-webview: 13.3.0,
react: 18.2.0
react-native: 0.72.3,
Here is the web link you can check
https://myshop.orderlemon.com/login
Not properly visible, also on some times the QR image did not show

When properly visible on different devices

Thanks!

[pcamarajr]

You haven't provided too much details about your implementation, but I was facing something similar. Are you passing the onMessage function to the WebView? If not, try to pass any function (even a noop) on it and test it again.

[PBeloborodov]

same problem

[hvq1919]

same

[Salmankhan033]

Here is the complete code of the WebView.
still same issue, some time it load perfect and some time not.
it only occur with the first page

 <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"
          />

[Salmankhan033]

@hvq1919 @PBeloborodov and @pcamarajr Have you fixed it ?
NO it occur in very IOS device
please assist

[PBeloborodov]

@Salmankhan033
This may be a strange solution, but it worked for me.
const emptyBackground = useMemo(
() =>
Platform.OS === 'ios' ? {uri: imagePath} : {html: emptyHtml, baseUrl: ''},
[emptyHtml, imagePath],
);

<WebView
  ref={r => {
    refWebView.current = r;
  }}
  originWhitelist={['*']}
  source={renderedOnce ? {html: filterHtml, baseUrl: ''} : emptyBackground}
  style={renderedOnce ? styles.webView : {opacity: 0}}
  allowFileAccess={true}
  allowUniversalAccessFromFileURLs={true}
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
  onLoad={updateSource}
  onMessage={event => {
    setFilterPhoto(event.nativeEvent.data);
  }}
  startInLoadingState={true}
  renderError={errorName => <View style={styles.loaderContainer} />}
  renderLoading={() => <View style={styles.loaderContainer} />}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccessFromFileURLs={true}
  overScrollMode={'never'}
  removeClippedSubviews={true}
  scrollEnabled={false}
  nestedScrollEnabled
/>

[Salmankhan033]

@Salmankhan033 This may be a strange solution, but it worked for me. const emptyBackground = useMemo( () => Platform.OS === 'ios' ? {uri: imagePath} : {html: emptyHtml, baseUrl: ''}, [emptyHtml, imagePath], );

<WebView
  ref={r => {
    refWebView.current = r;
  }}
  originWhitelist={['*']}
  source={renderedOnce ? {html: filterHtml, baseUrl: ''} : emptyBackground}
  style={renderedOnce ? styles.webView : {opacity: 0}}
  allowFileAccess={true}
  allowUniversalAccessFromFileURLs={true}
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
  onLoad={updateSource}
  onMessage={event => {
    setFilterPhoto(event.nativeEvent.data);
  }}
  startInLoadingState={true}
  renderError={errorName => <View style={styles.loaderContainer} />}
  renderLoading={() => <View style={styles.loaderContainer} />}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccessFromFileURLs={true}
  overScrollMode={'never'}
  removeClippedSubviews={true}
  scrollEnabled={false}
  nestedScrollEnabled
/>

Thanks for your good response :)
Could you send me your complete code/file Then I will compare it with my code
Thanks :)

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically