Send message from webview's page to the app

[Naoto-Ida]

Is there a way to send data from the HTML to the page when the user taps on a button or something in the webview?

What I'm looking for is basically the equivalent of this library that I can embed in the webpage which would send a value to the app on its terms, not page load.

[Naoto-Ida]

Closing this as I solved it.

On the web page side, I setup a condition as such:

// I'm using PHP here with jQuery.
<? if ($react_native)  { ?>
<script>
$(function() {
  $("h1").click(function() {
    var data = JSON.stringify({"clickedElement": "h1"});
    WebViewBridge.send(data);
</script>
<? } ?>

This way, if the user isn't accessing this page from the WebView,
they won't have errors in the console log.

This works pretty great. Hopefully it'll be useful to someone.

[huangxiaohao]

@Naoto-Ida hello, maybe I have the same issue as you.
In the RN I use the webview to visit a website and the website was return a json data. I want to know in RN how to fetch this json, because I need this json to do next step. Thank you.

[Naoto-Ida]

@huangxiaohao Are you trying to get a JSON from the website on page load?

[huangxiaohao]

@Naoto-Ida thank you for your reply!
I was visit a the third party website page, not my html page, that mean when I finish my operation, the third party website page will return a json data, and I can not do anything in the third party website page. I don't know this describes whether you are clear.

[Naoto-Ida]

@huangxiaohao
Ah, I think I know what your trying to do.
So on the third-party website there is a variable containing JSON?

I would do something like this:

const injectScript = `
  (function () {
                    if (WebViewBridge) {

                      WebViewBridge.onMessage = function (message) {
                        if (message === "hello from react-native") {
                          WebViewBridge.send(JSON.stringify(YOUR_JSON_VARIABLE_NAME);
                        }
                      };
                
                      WebViewBridge.send("hello from webview");
                    }
                  }());
`;

YOUR_JSON_VARIABLE_NAME would be the variable name on the third party website.
Send back the value with the inject script.

[huangxiaohao]

@Naoto-Ida I'm so sorry for reply you too late, because I met a problem when I installation this component. That take me a lot of time to resolved. But so far,I have no idea to resolve it. :(

[Naoto-Ida]

@huangxiaohao
Ah, what version of RN are you using?
If it's over 0.40, you should check this out.

[huangxiaohao]

@Naoto-Ida
yeah ... my RN version is "react-native": "0.41.2", over 0.40.
And there are issues in there , I think maybe you're right.

Should I use this component react-native-wkwebview in my project?
And I'm not an ios developer, and I don't use the OC, so I so happy that you can help me.
thanks a lot again!!!

[huangxiaohao]

@Naoto-Ida hey, thanks a lot. I tried to do what you tall me, and I didn't use the react-native-wkwebview
I change my four files like RCTWebViewBridge.h according to Fix iOS imports on RN0.40+ and replace UIWebview with WkWebview , and it was success.

But there have an error in it when I import the component, import WebViewBridge from 'react-native-webview-bridge';

error message:
'WebViewBridge' has no propType for native prop 'RCTWebViewBridge.keyboardDisplayRequiresUserAction' of native type 'BOOL' If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.