Communication between React Native and WebView's content

[pfeiffer]

Turbo iOS and Turbo Android supports communication between native app and JavaScript (the visited page). This is very useful for eg. programatically doing something natively, triggered from the website or for programatically doing something on the website, triggered natively.

Examples of this could be prompting for Push Permissions and upon acceptance returning the push token back to the visited website, or reloading the web page when a native push notification is received.

It would be very useful to be able to register a handler for messages being passed from the website to native, eg:

// In React Native
<VisitableView onMessage={alert} />

// In website:
website.messageHandlers["someName"].postMessage("Hi from website!")

And vice-versa being able to send messages back to the web page:

// In React Native
visitableViewRef.injectJavaScript("alert('Hello from native!');")

Simply having these low-level methods of passing data back and forth and could be extended with eg. JSON serialization, async callbacks etc. with a bit of JS code on React Native side and website.

Prior art:

react-native-webview: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
turbo-ios: https://github.com/hotwired/turbo-ios/blob/main/Docs/Advanced.md#native---javascript-integration
turbo-android: https://github.com/hotwired/turbo-android/blob/main/docs/ADVANCED-OPTIONS.md#native---javascript-integration