Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WebView] Message passing between WebView / Javascript #586

Closed
notduncansmith opened this issue Apr 1, 2015 · 32 comments
Closed

[WebView] Message passing between WebView / Javascript #586

notduncansmith opened this issue Apr 1, 2015 · 32 comments

Comments

@notduncansmith
Copy link

@notduncansmith notduncansmith commented Apr 1, 2015

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.

@ghost
Copy link

@ghost ghost commented Apr 2, 2015

+1. That would be quite handy indeed.

@nwjohn
Copy link

@nwjohn nwjohn commented Apr 2, 2015

+1, also fits my use case.

@hedgerwang
Copy link
Contributor

@hedgerwang hedgerwang commented Apr 8, 2015

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
Copy link
Contributor

@sahrens sahrens commented Apr 8, 2015

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
Copy link
Contributor

@sophiebits sophiebits commented Apr 8, 2015

@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 brentvatne changed the title Message passing between WebView / Javascript [WebView] Message passing between WebView / Javascript May 31, 2015
@brentvatne
Copy link
Collaborator

@brentvatne brentvatne commented May 31, 2015

@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
Copy link
Contributor

@Intellicode Intellicode commented Jun 10, 2015

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
Copy link
Collaborator

@brentvatne brentvatne commented Jun 11, 2015

@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
Copy link
Contributor

@Intellicode Intellicode commented Jun 12, 2015

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

@kevlened
Copy link

@kevlened kevlened commented Jun 22, 2015

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
Copy link
Contributor

@Intellicode Intellicode commented Jun 26, 2015

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

@christopherdro
Copy link
Contributor

@christopherdro christopherdro commented Sep 13, 2015

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

@ide ide closed this Sep 13, 2015
@gre
Copy link
Contributor

@gre gre commented Oct 20, 2015

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
Copy link
Contributor

@sophiebits sophiebits commented Oct 20, 2015

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

@gs-akhan
Copy link

@gs-akhan gs-akhan commented Nov 12, 2015

@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
Copy link
Contributor

@sophiebits sophiebits commented Nov 12, 2015

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
Copy link

@gs-akhan gs-akhan commented Nov 13, 2015

@spicyj Thanks :)

@pglotov
Copy link
Contributor

@pglotov pglotov commented Feb 5, 2016

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
Copy link
Contributor

@gre gre commented Feb 5, 2016

@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
Copy link
Contributor

@pglotov pglotov commented Feb 5, 2016

@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
Copy link

@mchev2 mchev2 commented Feb 10, 2016

+1 for shouldOverrideUrlLoding on Android

@kevinejohn
Copy link
Contributor

@kevinejohn kevinejohn commented Feb 17, 2016

+1 for shouldOverrideUrlLoading on Android

2 similar comments
@chenxiaohu
Copy link

@chenxiaohu chenxiaohu commented Mar 8, 2016

+1 for shouldOverrideUrlLoading on Android

@lu-ko
Copy link

@lu-ko lu-ko commented Mar 11, 2016

+1 for shouldOverrideUrlLoading on Android

@jordansexton
Copy link

@jordansexton jordansexton commented Mar 12, 2016

+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
Copy link
Contributor

@pglotov pglotov commented Mar 16, 2016

Implemented shouldOverrideUrlLoading in this PR.

@saulshanabrook
Copy link

@saulshanabrook saulshanabrook commented Jun 4, 2016

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
Copy link

@dangnelson dangnelson commented Aug 25, 2016

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
Copy link

@tulasi-ram tulasi-ram commented Oct 5, 2016

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
Copy link

@tslater tslater commented Nov 11, 2016

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

@svbatalov
Copy link

@svbatalov svbatalov commented Nov 11, 2016

Already in v0.37.0. See this issue.

@lesnitsky
Copy link

@lesnitsky lesnitsky commented Aug 8, 2017

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 😏

@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.