Skip to content

Android postMessage does not working #356

New issue
New issue
Closed
Closed
Android postMessage does not working#356
@peymancyb

Description

@peymancyb
peymancyb
opened on Feb 22, 2019

Hello, i am sending message from webview to react native , but from react native the message does not send to the webview

Activity

cristianomesquita

cristianomesquita commented on Feb 22, 2019

@cristianomesquita
cristianomesquita
on Feb 22, 2019

send like that: window.ReactNativeWebView.postMessage

peymancyb

peymancyb commented on Feb 23, 2019

@peymancyb
peymancyb
on Feb 23, 2019
Author

@cristianomesquita thank you for the response, I have use window.ReactNativeWebView.postMessage for sending messages from webview to react native, but from the react native part i can not send messages to the webview.

paulLee73051

paulLee73051 commented on Feb 23, 2019

@paulLee73051
paulLee73051
on Feb 23, 2019

The same problem

tbenr
mentioned this on Feb 25, 2019
sadvit

sadvit commented on Feb 25, 2019

@sadvit
sadvit
on Feb 25, 2019
Contributor

I have the same issue for iOS

Call webView.postMessage don't lead to fire 'message' event inside webView

Version:
react-native-webview@5.2.0
react-native@0.58.4

sadvit

sadvit commented on Feb 25, 2019

@sadvit
sadvit
on Feb 25, 2019
Contributor

I've got the solution

Inside webView we need to use:

this.window.addEventListener('message', ....) ----- It's worked for me right now
instead of
this.document.addEventListener('message', ....) ---- it's worked in older version for me

Good luck!

iddan

iddan commented on Feb 25, 2019

@iddan
iddan
on Feb 25, 2019

window works for me as well. This is a breaking change from past implementation!!!

SuGod

SuGod commented on Feb 26, 2019

@SuGod
SuGod
on Feb 26, 2019 · edited by SuGod

I have the same problem. onMessage cannot receive messages. Switch to the webview on react-native and it work.

"react-native-webview": "^5.2.1",
"react": "16.6.3",
"react-native": "0.58.4",

iddan

iddan commented on Feb 26, 2019

@iddan
iddan
on Feb 26, 2019

For people coming here: document for Android, window for iOS

fauno

fauno commented on Feb 26, 2019

@fauno
fauno
on Feb 26, 2019

Hi, I'm trying to send messages from the WebView to Android but onMessage isn't triggered. I can see the initial "Hi!" and the view is filled with "hi" every second to test js inside the WebView, but the console doesn't show anything. I'm using RN 0.57.7 with WV 5.2.1, also tried document as @iddan says but it doesn't work either...

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

export class Registro extends Component {
  render () {
    return (
      <WebView
        style={{ flex: 1 }}
        onMessage={data => console.log(data)}
        onError={error => console.log(error)}
        cacheEnabled={false}
        allowsLinkPreview={false}
        originWhitelist={['*']}
        javaScriptEnabled={true}
        source={{ html: '<html><body><h1>Hi!</h1><script type="text/javascript">setInterval(function() { document.write(" hi"); document.ReactNativeWebView.postMessage("hi");}, 1000);</script></body></html>' }}
        />
    );
  }
}
fauno

fauno commented on Feb 26, 2019

@fauno
fauno
on Feb 26, 2019

nevermind, got it to work with onMessage={event => console.log(event.nativeEvent.data)} :)

romreed

romreed commented on Feb 28, 2019

@romreed
romreed
on Feb 28, 2019 · edited by romreed

@fauno not work for me
can you show me please full example
"react-native-webview": "^5.2.1"
"react-native": "0.58.4",

<WebView
                                    mixedContentMode='always'
                                    source={{
                                        uri: this.state.chosenCityUrl,
                                        "Accept-Language": navigator.language,
                                        "User-Agent": Platform.OS,
                                    }}
                                    javaScriptEnabled={true}
                                    ref={(b) => this._bridge = b}
                                    style={styles.webView}
                                    onError={(error) =>{ console.log("error",error); return NetInfo.isConnected.fetch().done(isConnected => this.setState({isConnected}))}}
                                    onLoadEnd={() => this.onLoadEnd()}
                                    renderError={() => this.renderError()}
                                    onNavigationStateChange={this._onNavigationStateChange.bind(this)}
                                    // onMessage={event => console.log(event)}
                                    domStorageEnabled={true}
                                    originWhitelist={['*']}
                                    allowsLinkPreview={false}
                                     injectedJavaScript='
                                    setInterval(function() { document.postMessage("hi"); document.ReactNativeWebView.postMessage("hi", "*");
                                    window.postMessage("hi"); window.ReactNativeWebView.postMessage("hi", "*");
                                    }, 1000);
                                     alert("start");'
                                />`
punksta

punksta commented on Mar 4, 2019

@punksta
punksta
on Mar 4, 2019
Contributor

https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
you can find injectJavaScript useful. @peymancyb

peymancyb

peymancyb commented on Mar 5, 2019

@peymancyb
peymancyb
on Mar 5, 2019
Author

Thank you @punksta but what i need is postMessage feature and still this feature does not work on android devices

Titozzz

Titozzz commented on Mar 5, 2019

@Titozzz
Titozzz
on Mar 5, 2019
Collaborator

You can literally replicate the undocumented postMessage functionality by following the guide above. 🤔 If you want to receive a message on the window you can inject a function that does just that.

27 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @fauno@andreialecu@cristianomesquita@donaldking@inf3rnus

        Issue actions
          Android postMessage does not working · Issue #356 · react-native-webview/react-native-webview