'React Native WebView with local HTML

I need some help with an issue with React Native WebView.

Basically, I need to use a local HTML file, which works fine with iOS, but on Android it is causing a headache. I managed to load the file from the Android assets folder, but when the page loads, only shows me the following error:

net::ERR_BLOCKED_BY_RESPONSE

Giving more context, I'm trying to embed a chatbot inside the app, and I need to use their script inside this local HTML file. For what I can see when opening the HTML file on the browser, when the chat os open, all content is loading inside an iframe, which I think it is this what is causing the problem.

I checked all the URLs inside the HTML file, and all of them are being loaded with SSL.

This is the relevant part of the code:

HTML file

<body>
    <script
      src="https://unpkg.com/blip-chat-widget"
      type="text/javascript"
    ></script>
    <script>
      (function () {
        window.onload = function () {
          new BlipChat()
            .withAppKey(
              'api key',
            )
            .withEventHandler(BlipChat.LOAD_EVENT, () => {
              postLoadedMessage();
              removeChatContainerBorderRadius();
            })
            .withCustomStyle(generateCustomStyles())
            .withCustomCommonUrl('https://our-sub-domain.chat.blip.ai/')
            .build();

          openChatOnLoad();
        };

        function postLoadedMessage() {
          window.ReactNativeWebView.postMessage('loaded');
        }

        function removeChatContainerBorderRadius() {
          const chatContainer = getChatContainer();
          chatContainer.style.borderRadius = 0;
        }

        function getChatContainer() {
          return document.getElementById('blip-chat-iframe');
        }

        function generateCustomStyles() {
          return `
            #blip-chat-header svg {
              display: none;
            }
          `;
        }

        function openChatOnLoad() {
          const openChatButton = getOpenChatButtonButton();
          openChatButton.click();
        }

        function getOpenChatButtonButton() {
          return document.getElementById('blip-chat-open-iframe');
        }
      })();
    </script>
  </body>

React

import React from 'react';
import { Platform } from 'react-native';
import { WebView } from 'react-native-webview';

// On iOS, loading the file from the current folder works fine.
const chat =
  Platform.OS === 'ios'
    ? require('./chat.html')
    : 'file:///android_asset/html-files/default-chat.html';

export const DefaultChatScene: React.FC = () => {
 const rendered = React.useRef(false);
 const [loading, setLoading] = React.useState(true);

 React.useEffect(() => {
    if (rendered.current) return;

    rendered.current = true;
  }, []);

  const onLoadChat = () => {
    setTimeout(() => {
      setLoading(false);
    }, 200);
  };

  const getWebViewSource = () => {
    if (Platform.OS === 'ios') {
      return chat;
    }

    if (!rendered.current) {
      return null;
    }

    return {
      uri: chat,
    };
  };

 return (
  <WebView
   source={getWebViewSource()}
   originWhitelist={['*']}
   javaScriptEnabled
   onLoad={onLoadChat}
  />
 )
}

Sadly, serving the file on a external host it is not an option.

react-native react-native-webview

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React Native WebView with local HTML

Sources

Related Questions