In iOS 14 Updated devices injectedJavascript callBack not receiving Webview onMessage Method

Bug description: Hi We are doing a payment integration app using react-native-webview. After the payment has been processed there will be a call back received on message Webview. But In iOS 14 Updated devices this injectedJavascript callBack has not triggered.

In iOS 14 Updated devices InjectedJavascript callback not receiving Webview onMessage Method. The other iOS lower version (< 14 )of devices it working as expected and the android device also it working five.

Expected behavior: Need to work on all latest iOS version updated devices.

My Code:

const INJECTEDJAVASCRIPT = const meta = document.createElement('meta'); window.checkoutError = function(){ window.ReactNativeWebView.postMessage('checkout-error') }; window.checkoutSuccess = function(){ window.ReactNativeWebView.postMessage('checkout-success') }; const script = document.createElement("script"); script.setAttribute("data-error", "checkoutError"); script.setAttribute("data-success", "checkoutSuccess"); script.onload = function() { checkOut() }; document.getElementsByTagName('head')[0].appendChild(script); ;

<WebView
      source={{ html }}
      originWhitelist={['*']}
      javaScriptEnabled={true}
      onNavigationStateChange={this._onNavigationStateChange}
      onMessage={this.handleMessage}
      injectedJavaScript={INJECTEDJAVASCRIPT}
      mixedContentMode={'always'}
    />

handleMessage = (d) => { const { navigation } = this.props; const msg = d.nativeEvent.data; switch (msg) { case ‘checkout-success’: return his.paymentSuccess(); case ‘checkout-error’: return navigation.goBack(); default: return console.log(ONMESSAGE: , msg); } }

Environment:

• OS: iOS
• OS version: iOS 14
• react-native version: 0.63.3
• react-native-webview version: 11.0.2

[danielfx90]

Hi, I tried it out on iOS 14 and it works fine.

const INJECTED_JAVASCRIPT = `(function() {
  window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();`;

<WebView
  source={{ uri: 'https://google.com' }}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={(msg) => console.log(msg)}
/>

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.3",
    "react-native-webview": "11.0.2"
  },

[github-actions[bot]]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically