RN postMessage To H5 in iOS not work

Bug description:

I want to test RN postMessage to H5. In Android ,It work all right.But in iOS, it do not work.

To Reproduce:

RN side code : UI_Home.js

import React , {forwardRef}from 'react'
import {View,Button} from 'react-native'
import {WebView} from 'react-native-webview'
export default forwardRef((props,ref) =>{
    const {sendMessage,onMessage} = props
    return (
        <View style={{flex:1}} >
            <WebView
                ref={ref}
                style={{flex:1}}
                originWhitelist={['*']}
                useWebKit={true}
                onMessage={onMessage}
                // source={{uri: 'http://192.168.8.178:8080/'}}/>
                source={{uri: 'http://192.168.8.178:3000/'}}/>
            <Button style={{height:30}} title='RN Send Message to H5' onPress={sendMessage}/>
        </View>
    )
})

home.js

import React,{Component} from 'react'
import UI_Home from './UI_Home'
export default class Home extends Component{
    constructor(props){
        super(props)
    }


    sendMessage = () =>{
        this.webView.postMessage(JSON.stringify({test:'hello'}))
    }

    onMessage = (event) =>{
        alert(event.nativeEvent.data)
    }

    render(){
        return (
            <UI_Home
                ref={(webView)=>{this.webView = webView}}
                onMessage = {this.onMessage}
                sendMessage={this.sendMessage}/>
        )
    }
}

Web side code: App.js

import React, {Component} from 'react';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        document.removeEventListener('message', this.onMessage, false)
        document.addEventListener('message',this.onMessage,false)
    }

    onMessage = (event) => {
        alert(event.data)
    }

    sendMessageToRN = () =>{
        if(window.ReactNativeWebView){
            window.ReactNativeWebView.postMessage('Hello RN ,I`m from H5')
        }
    }

    render() {
        return (
            <div className="App">
                <button onClick={this.sendMessageToRN}>H5 Send Message To RN</button>
            </div>
        )
    }

}

export default App;

When I click RN side Button with postMessage, Web side addEventListener in iOS not work.The same fn in Android work all right.

Expected behavior:

Please check and give me some help

Screenshots/Videos:

Environment:

• OS: macOS Mojave
• OS version: 10.14.6
• react-native version: 0.60.5
• react-native-webview version: 7.4.2

[woongbaera89]

I had the same problem too. and I fixed it.

If you use “document.addEventListener” in Webview,

// This will be not working in iOS 
document.addEventListener("message", () => { ... your function ... } );

add “window.addEventListener”.

// This works well in both iOS and Android 
document.addEventListener("message", () => { ... your function ... } );
window.addEventListener("message", () => { ... your function ... } );

because, in “react-native-webview/ios/RNCWebView.m” . postMessage function implemented by “window.dispatchEvent” ( look below code )

-(void)postMessage:(NSString *)message
{
  NSDictionary *eventInitDict = @{@"data": message};
  NSString *source = [NSString
    stringWithFormat:@"window.dispatchEvent(new MessageEvent('message', %@));",
    RCTJSONStringify(eventInitDict, NULL)
  ];
  [self injectJavaScript: source];
}

[haozes]

I have the same problem