Window.postmessage Not Working In Componentdidmount Without Settimeout In React

I'm working on passing data between a react webpage and a react-native webview. I want to send a signal to the react-native webview on the mobile once the webpage has been loaded.

Solution 1:

You probably need to wait for the webview to load before posting messages to it, so it makes sense to do it from within the webview onLoad callback. Try the following:

...
onWebViewLoaded() {
  if (this.webview) {
    this.webview.postMessage('');
  }
}

render() {
  return (
    <WebViewref={webview => { this.webview = webview }}
      source={{uri: 'https://facebook.github.io/react/'}}
      onLoad={this.onWebViewLoaded}
    />
  )
}
...

If you want to post message from webview to the app, try handling it in componentDidUpdate. By the time it gets fired the DOM is loaded and there will be no need for setTimeout