Setting onMessage on a WebView overrides existing values of window.postMessage

[PaddyLock]

When I load the webview I get this error message

Setting onMessage on a WebView overrides existing values of window.postMessage

I'm not setting onMessage anywhere else.

The content of my render is

<View
                style={{
                    paddingVertical: 40,
                    backgroundColor: `#ffffff`,
                    flex: 1
                }}
            >
                <Text>Testing application for react-native-webview-braintree npm package</Text>

                <ActivityIndicator
                    animating={true}
                    style={[styles.centering, {height: 180}]}
                    size="large"
                />

                {renderIf(this.state.clientToken !== '')(
                    <WebViewBraintree
                        clientToken={this.state.clientToken}
                        nonceObtainedCallback={this.handlePaymentMethod}
                        navigationBackCallback={this.navigationBackCallback}
                        paymentAPIResponse={this.state.paymentAPIResponse}
                    />
                )}

            </View>

[reggie3]

Can you take a snapshot of your device's screen and post a picture of the error you are getting.

[PaddyLock]

Hi, thanks for taking a look at this.

First I see this briefly (the console warning is just my client token)

Then I get the error

I also get this error until I have removed react-native from react-native-webview-braintree/node_modules

[reggie3]

This problem seems to be related to this react-native issue here: https://github.com/facebook/react-native/issues/10865

It's platform specific to iOS. It looks like it is a problem associated with the react-native-webview-messaging npm package. There is an issue associated with it here: https://github.com/R1ZZU/react-native-webview-messaging/issues/16. I've contributed to that package before, and the writer is a good guy. I'm going to move the conversation over there.

[PaddyLock]

I have loaded up the same app in the Genymotion android simulator and get a different error for the same view.

[hobbesdaboba]

Referencing commit 7790af6

I modified the node_modules/react-native-webview-braintree/node_modules/react-native-webview-messaging/WebView.js render function as follows:

  render() {
    const patchPostMessageFunction = () => {
      var originalPostMessage = window.postMessage;
      var patchedPostMessage = function(message, targetOrigin, transfer) {
        originalPostMessage(message, targetOrigin, transfer);
      };

      patchedPostMessage.toString = () => {
        return String(Object.hasOwnProperty).replace(
          'hasOwnProperty',
          'postMessage'
        );
      };
      window.postMessage = patchedPostMessage;
    };

    const patchPostMessageJsCode =
      '(' + String(patchPostMessageFunction) + ')();';

    return (
      <NativeWebView
        {...this.props}
        injectedJavaScript={patchPostMessageJsCode}
        onMessage={this.onMessage}
        ref={this._refWebView}
      />
    );
  }

No more red screen... not sure how this affects the rest of the package, if at all...

[reggie3]

I had a couple of other projects that used the same messaging technique. I replaced it in those apps, and it seems to be working okay. I'll have to do the same here.

[PaddyLock]

Hi @reggie3 I've been away for a while, but just just picking up my project again and ready to try implementing this again. So will you be updating with the solution from @hobbesdaboba Also will you be removing react-native from react-native-webview-braintree/node_modules so there is no ambiguous resolution? Thanks

[reggie3]

I won't be a able to work on this project for a few days, but I plan on making this project more like my other react-native-webview projects so that it incorporates both the library and an example application. It'll take me a couple of weeks to get around to it though. Doing this will solve this particular issue.

[sumanlamsal]

override node_modules/react-native-webview-messaging/WebView.js whith the following code

`render() {
    const patchPostMessageFunction = function() {
  var originalPostMessage = window.postMessage;

  var patchedPostMessage = function(message, targetOrigin, transfer) {
    originalPostMessage(message, targetOrigin, transfer);
  };

  patchedPostMessage.toString = function() {
    return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
  };

  window.postMessage = patchedPostMessage;
};

const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();';

    return `(`
      <NativeWebView
        {...this.props}
        scalesPageToFit={false}
        injectedJavaScript={patchPostMessageJsCode}
        onMessage={this.onMessage}
        ref={this._refWebView}
      />
    );
  }`