[0.57][iOS] Setting prop useWebKit={true} on WebView breaks onMessage

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 49.69 MB / 32.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 9.11.2 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.2
        API Levels: 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react-native: ^3.4.10 => 3.4.10 
      react: ^16.5.2 => 16.5.2 
      react-native: ^0.57.0 => 0.57.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

The onMessage prop is not called anymore when enabling the new webkit implementation (obviously on iOS).

Reproducible Demo

Just toggle the value of the useWebKit prop to see the effect

import * as React from "react";
import { Text, View, StyleSheet, WebView, Button } from "react-native";

export default class App extends React.Component {
  state = { message: "" };

  sendMessage = () => {
    this._webview.injectJavaScript("window.postMessage('hello!');");
  };

  onMessage = event => {
    console.log("onMessage", event);
    const message = `${new Date()} event from onMessage : ${JSON.stringify(
      event.nativeEvent
    )}`;
    this.setState({ message });
  };

  render() {
    const { message = "" } = this.state;
    return (
      <View style={styles.container}>
        <Button title={"injectJavaScript"} onPress={this.sendMessage} />
        <Text>{message}</Text>
        <WebView
          useWebKit={false}
          ref={n => (this._webview = n)}
          onMessage={this.onMessage}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 52,
    backgroundColor: "#ecf0f1"
  }
});

[Titozzz]

Just to let you know, with react-native 0.57 started the slimmening, and the webview has been extracted to https://github.com/react-native-community/react-native-webview and is it unlikely it will be fixed here. Can you try with the new repo ? I’m using it personally with WKWebview and postMessage / onMessage without issues

[alexisbronchart]

@rsnara indeed. This can be closed.