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.

Sign up for GitHub

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

Jump to bottom

onMessage not triggering #272

Closed
linnett opened this issue Jan 24, 2019 · 5 comments
Closed

onMessage not triggering #272

linnett opened this issue Jan 24, 2019 · 5 comments

Comments

@linnett
Copy link

linnett commented Jan 24, 2019 •
edited
Loading

onMessage isn't triggering when I send a window.postMessage from the webview.

Code:

<WebView
  ref={(ref) => {
    this.child = ref;
  }}
  onLoad={() => {
    if (loaded) return;
    this.setState({ loaded: true });
    this.child.onMessage = this.onMessageHandler;
  }}
  startInLoadingState
  renderLoading={() => <Loader />}
  useWebKit={false}
  javaScriptEnabled
  source={source}
/>

I am attempting to use this method of setting a loaded state due to a well spoken about issue with postMessage where the error Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined. appears (as per facebook/react-native#10865).

I have also attempted the method of injecting JavaScript (as per facebook/react-native#10865 (comment)).

Finally, I attempted adding onMessage={loaded ? this.onMessageHandler : null}.

All are failing.

Any help would be greatly appreciated!

React Native: 0.56.0
react-native-webview: 3.2.1
@ralesiupgrade
Copy link

you may want to see #243

Im having similar problem with no solution as well. Looks like its only a dev mode problem though so you may want to check your app in release mode and see if it works

@Titozzz Titozzz closed this as completed Feb 1, 2019
@linnett
Copy link
Author

linnett commented Feb 1, 2019

Nice one :)

@Titozzz

This comment has been minimized.

Sign in to view
Titozzz added a commit that referenced this issue Feb 1, 2019
@Titozzz
feat(Android/iOS postMessage): refactoring the old postMessage implem…
f3bdab5 
…entation (#303)

fixes #29
fixes #272
fixes #221
fixes #105
fixes #66

BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
Titozzz pushed a commit that referenced this issue Feb 1, 2019
@semantic-release-bot
chore(release): 5.0.0 [skip ci]
2d80402 
# [5.0.0](v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](#303)) ([f3bdab5](f3bdab5)), closes [#29](#29) [#272](#272) [#221](#221) [#105](#105) [#66](#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
@Titozzz
Copy link
Collaborator

Titozzz commented Feb 1, 2019

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@dev-newton
Copy link

Try with this...... ReactNativeWebView.postMessage(JSON.stringify(resp))

phuongwd pushed a commit to phuongwd/react-native-webview that referenced this issue Apr 29, 2020
@Titozzz
feat(Android/iOS postMessage): refactoring the old postMessage implem…
be13c51 
…entation (react-native-webview#303)

fixes react-native-webview#29
fixes react-native-webview#272
fixes react-native-webview#221
fixes react-native-webview#105
fixes react-native-webview#66

BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
phuongwd pushed a commit to phuongwd/react-native-webview that referenced this issue Apr 29, 2020
@semantic-release-bot
chore(release): 5.0.0 [skip ci]
1b59143 
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([react-native-webview#303](react-native-webview#303)) ([f3bdab5](react-native-webview@f3bdab5)), closes [react-native-webview#29](react-native-webview#29) [react-native-webview#272](react-native-webview#272) [react-native-webview#221](react-native-webview#221) [react-native-webview#105](react-native-webview#105) [react-native-webview#66](react-native-webview#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
noproblem23 added a commit to noproblem23/react-native-webview that referenced this issue Apr 18, 2023
@noproblem23
chore(release): 5.0.0 [skip ci]
9308827 
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](react-native-webview/react-native-webview#303)) ([f3bdab5](react-native-webview/react-native-webview@f3bdab5)), closes [#29](react-native-webview/react-native-webview#29) [#272](react-native-webview/react-native-webview#272) [#221](react-native-webview/react-native-webview#221) [#105](react-native-webview/react-native-webview#105) [#66](react-native-webview/react-native-webview#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
jaynilson added a commit to jaynilson/reactNative_service_USA that referenced this issue Sep 11, 2024
@jaynilson
chore(release): 5.0.0 [skip ci]
e6ed4a0 
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](react-native-webview/react-native-webview#303)) ([f3bdab5](react-native-webview/react-native-webview@f3bdab5)), closes [#29](react-native-webview/react-native-webview#29) [#272](react-native-webview/react-native-webview#272) [#221](react-native-webview/react-native-webview#221) [#105](react-native-webview/react-native-webview#105) [#66](react-native-webview/react-native-webview#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@linnett @Titozzz @ralesiupgrade @dev-newton