[WebView] Message passing between WebView / Javascript #586

notduncansmith · 2015-04-01T18:05:38Z

It would be really great to be able to run JS inside of a WebView component and register event listeners within regular React Native code.

My specific use-case is PouchDB, which really wants to run either in Node.js or the browser; however, there are lots of libraries that are designed to work within one or the other of the existing JS runtimes, but would still be useful to a React Native app.

I'm thinking something along these lines, perhaps register a react:// protocol or something for message passing - though I'd love to hear about a cleaner way to implement it.

The text was updated successfully, but these errors were encountered:

ghost · 2015-04-02T15:02:49Z

+1. That would be quite handy indeed.

nwjohn · 2015-04-02T15:27:33Z

+1, also fits my use case.

hedgerwang · 2015-04-08T07:07:45Z

I came up this hacky approach to send message from the webview's HTML back to the react native.
The idea is to generate a navigation change event from web page so that the react native can catch it.

var WebViewExample = React.createClass({

  getInitialState() {
    return {
      message: '....',
    };
  },

  render() {
    var html = `
      <html>
        <script>
          var pinID = 0;
          function ping() {
            var message = 'hello ' + Date.now();
            document.title = message;
            window.location.hash = pinID++;
            return false;
          }
        </script>
        <body>
          This is a HTML Page inside WebView
          <hr />
          <button onClick="window.location.hash = ping()">ping</button>
        </body>
      </html>
    `;

    return (
      <View>
        <Text style={{display: 'block'}}>Native View</Text>
        <Text style={{display: 'block'}}>{this.state.message}</Text>
        <Text style={{display: 'block'}}>Web View</Text>
        <WebView
          automaticallyAdjustContentInsets={false}
          style={{height: 400}}
          html={html}
          onNavigationStateChange={this.onNavigationStateChange}
          startInLoadingState={false}
        />
      </View>
    );
  },

  onNavigationStateChange(navState) {
    this.setState({
      message: navState.title,
    });
  },
});

sahrens · 2015-04-08T07:45:23Z

We can also just run all of the ReactNative JS in a WKWebView - would that make PouchDB happy? We could potentially make the executor mode configurable per app so you could use that instead of JSC if you prefer that tradeoff (more latency, probably more memory, etc).

sophiebits · 2015-04-08T10:56:09Z

@sahrens Even if we do that, I'm not sure if we'd want to allow access to all DOM APIs?

I'm don't think that running incompatible libraries in a headless web view is likely the right solution, but there certainly are cases where you'd want to have something in a web view and pass messages to it, so maybe we could add something here.

brentvatne · 2015-05-31T16:33:58Z

@notduncansmith - any interest in this still? if so, a PR would be welcome! you can ping me on irc/twitter @notbrent (nice username, by the way) if you need a hand

Intellicode · 2015-06-10T20:07:11Z

I had a go at this, and I got basic messages working using the techniques described at the Stackoverflow page. However, I was wondering how Apple would look at this feature since it allows remote websites execute code (sort of). Titanium seems to allow communication if the code is loaded from a local source (http://docs.appcelerator.com/titanium/3.0/#!/guide/Communication_Between_WebViews_and_Titanium). Any thoughts on this?

brentvatne · 2015-06-11T18:19:14Z

@Intellicode - it seems like Titanium allows some actions to be triggered on remote sites as well - that said, I think the best angle here is to pull this out into an external library where we can discuss it and iterate on it and when it is mature enough potentially integrating it back into React Native. Are you willing to do that? It would be awesome 😄

Intellicode · 2015-06-12T19:18:57Z

I'll have a go at it this weekend, should be a good learning opportunity :)

kevlened · 2015-06-22T14:26:47Z

I was able to get this to work: https://github.com/alinz/react-native-webview-bridge

The example included in the repo was more helpful than the docs.

UPDATE: Be aware of this issue - alinz/react-native-webview-bridge#3

Intellicode · 2015-06-26T22:23:36Z

nice, I guess I can stop working on my version then :)

christopherdro · 2015-09-13T21:05:47Z

@ide @brentvatne Issue can be closed.
Anyone looking for this functionality can take a look at https://github.com/alinz/react-native-webview-bridge.

gre · 2015-10-20T11:49:13Z

I really wish this was built-in in WebView,
communication between WebView and the React Native component feel to me to be a core feature you expect from WebView.

sophiebits · 2015-10-20T18:24:43Z

@gre I imagine we'd take a high-quality PR for this. You can see my comments on #1191.

gs-akhan · 2015-11-12T20:14:44Z

@spicyj
What could add some relief is having some query params on the URL being added to the WebView.
This way we could at least send data one way (Is there any way to get this now ?) .
Sending Data back and forth is for sure a core requirement, I am thinking why would React-Native not do this natively.

        <WebView 
              scrollEnabled = {false}
              style = {styles.webView}
              url = "index.html?data=<base64EncodedStuff>"
            />

Thanks

sophiebits · 2015-11-12T21:42:33Z

I don't know. I don't work actively on React Native. Generally, if things haven't been implemented it means that there hasn't been much demand at Facebook for a feature and often means that there hasn't been much demand externally either. This is a community project and if you want to improve the components, please send pull requests.

gs-akhan · 2015-11-13T06:54:13Z

@spicyj Thanks :)

pglotov · 2016-02-05T15:20:23Z

Is there any way to implement a callback of WebView in JS? E.g. in Android WebViewClient has a method shouldOverrideUrlLoading() which I'd like to override in RN. Is it possible?

gre · 2016-02-05T17:13:05Z

@pglotov I recommand to use https://github.com/alinz/react-native-webview-bridge . for the moment it's only for iOS but see in issues, someone has worked on an android version.

pglotov · 2016-02-05T19:36:43Z

@gre thanks, interesting stuff. But seems like an overkill for my purpose. I'll try to make the shouldOverrideUrlLoding() work. It is similar in purpose to already existing onShouldStartLoadWithRequest() iOS callback, so it makes sense to have one for Android as well.

mchev2 · 2016-02-10T15:50:02Z

+1 for shouldOverrideUrlLoding on Android

kevinejohn · 2016-02-17T23:37:06Z

+1 for shouldOverrideUrlLoading on Android

chenxiaohu · 2016-03-08T13:54:32Z

+1 for shouldOverrideUrlLoading on Android

lu-ko · 2016-03-11T13:59:46Z

+1 for shouldOverrideUrlLoading on Android

jordaaash · 2016-03-12T06:31:23Z

+1 for shouldOverrideUrlLoading on Android. Without this API exposed, all sorts of links break the WebView (mailto:, target="_blank", links to external sites, etc).

pglotov · 2016-03-16T03:13:21Z

Implemented shouldOverrideUrlLoading in this PR.

saulshanabrook · 2016-06-04T21:14:20Z

I want to use the Web Cryptography API (window.crypto) in React Native, and I am thinking about doing that by calling window.crypto in a WebView and using https://github.com/alinz/react-native-webview-bridge to pass the information back. This seems rather laborious, however, and potentially rather slow.

I have limited experience with React Native, so I am unsure if there is a faster/simpler way of achieving this.

dangnelson · 2016-08-25T15:04:31Z

This issue should be reopened as https://github.com/alinz/react-native-webview-bridge no longer works with the latest version of react-native, and the author is no longer supporting it as he's pushing to get it implemented into RN core.

tulasi-ram · 2016-10-05T12:53:14Z

Hi,
I want to navigate from react native webview to Android Activity when tap on React Native webview.
I tried to use native-webview-bridge. Seems it was a wrapper class of Webview. It doing communication or bypass daata between webview to react native.

tslater · 2016-11-11T01:32:50Z

I would really like to see this issue opened. It should be a core feature.

svbatalov · 2016-11-11T03:12:23Z

Already in v0.37.0. See this issue.

lesnitsky · 2017-08-08T14:09:29Z

Hi,
Just want to share my wrapper react-native-webview-messaging with more convenient API than in core RN WebView. Check it out and don't hesitate to submit an issue if smth is not working on your end, I'd be just glad to make it useful not only for our team 😏

brentvatne changed the title ~~Message passing between WebView / Javascript~~ [WebView] Message passing between WebView / Javascript May 31, 2015

ide closed this as completed Sep 13, 2015

facebook locked as resolved and limited conversation to collaborators Jul 23, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WebView] Message passing between WebView / Javascript #586

[WebView] Message passing between WebView / Javascript #586

notduncansmith commented Apr 1, 2015

ghost commented Apr 2, 2015

nwjohn commented Apr 2, 2015

hedgerwang commented Apr 8, 2015

sahrens commented Apr 8, 2015

sophiebits commented Apr 8, 2015

brentvatne commented May 31, 2015

Intellicode commented Jun 10, 2015

brentvatne commented Jun 11, 2015

Intellicode commented Jun 12, 2015

kevlened commented Jun 22, 2015

Intellicode commented Jun 26, 2015

christopherdro commented Sep 13, 2015

gre commented Oct 20, 2015

sophiebits commented Oct 20, 2015

gs-akhan commented Nov 12, 2015

sophiebits commented Nov 12, 2015

gs-akhan commented Nov 13, 2015

pglotov commented Feb 5, 2016

gre commented Feb 5, 2016

pglotov commented Feb 5, 2016

mchev2 commented Feb 10, 2016

kevinejohn commented Feb 17, 2016

chenxiaohu commented Mar 8, 2016

lu-ko commented Mar 11, 2016

jordaaash commented Mar 12, 2016

pglotov commented Mar 16, 2016

saulshanabrook commented Jun 4, 2016

dangnelson commented Aug 25, 2016 •

edited

Loading

tulasi-ram commented Oct 5, 2016

tslater commented Nov 11, 2016

svbatalov commented Nov 11, 2016

lesnitsky commented Aug 8, 2017

[WebView] Message passing between WebView / Javascript #586

[WebView] Message passing between WebView / Javascript #586

Comments

notduncansmith commented Apr 1, 2015

ghost commented Apr 2, 2015

nwjohn commented Apr 2, 2015

hedgerwang commented Apr 8, 2015

sahrens commented Apr 8, 2015

sophiebits commented Apr 8, 2015

brentvatne commented May 31, 2015

Intellicode commented Jun 10, 2015

brentvatne commented Jun 11, 2015

Intellicode commented Jun 12, 2015

kevlened commented Jun 22, 2015

Intellicode commented Jun 26, 2015

christopherdro commented Sep 13, 2015

gre commented Oct 20, 2015

sophiebits commented Oct 20, 2015

gs-akhan commented Nov 12, 2015

sophiebits commented Nov 12, 2015

gs-akhan commented Nov 13, 2015

pglotov commented Feb 5, 2016

gre commented Feb 5, 2016

pglotov commented Feb 5, 2016

mchev2 commented Feb 10, 2016

kevinejohn commented Feb 17, 2016

chenxiaohu commented Mar 8, 2016

lu-ko commented Mar 11, 2016

jordaaash commented Mar 12, 2016

pglotov commented Mar 16, 2016

saulshanabrook commented Jun 4, 2016

dangnelson commented Aug 25, 2016 • edited Loading

tulasi-ram commented Oct 5, 2016

tslater commented Nov 11, 2016

svbatalov commented Nov 11, 2016

lesnitsky commented Aug 8, 2017

dangnelson commented Aug 25, 2016 •

edited

Loading