How to use Android / iPhone postMessage in webview with react native

Spread the love

Using the postMessage method in a WebView to communicate between your React Native app and web content is a common requirement. Below are the steps for both Android and iOS using React Native.

Setup

Install the WebView component: First, make sure you have the react-native-webview library installed in your project:
```
npm install react-native-webview
```
Import the WebView component

import React from 'react'; 
import { WebView } from 'react-native-webview';

Sending Messages from WebView to React Native

You can send messages from your web content (loaded in the WebView) to your React Native app using window.ReactNativeWebView.postMessage.

In your React Native code:

import React from 'react';
import { WebView } from 'react-native-webview';
import { View, Alert } from 'react-native';

const MyWebComponent = () => {
  const onMessage = (event) => {
    const message = event.nativeEvent.data;
    Alert.alert('Message from WebView', message);
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: 'https://your-web-content-url.com' }}
        onMessage={onMessage}
      />
    </View>
  );
};

export default MyWebComponent;

In your web content: Use the window.ReactNativeWebView.postMessage method to send messages to the React Native app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView PostMessage</title>
  </head>
  <body>
    <h1>WebView PostMessage Example</h1>
    <button onclick="sendMessage()">Send Message</button>
    <script>
      function sendMessage() {
        window.ReactNativeWebView.postMessage('Hello from the WebView!');
        document.ReactNativeWebView.postMessage('Hello from the WebView!');  
      }
    </script>
  </body>
</html>

Sending Messages from React Native to WebView

You can send messages from your React Native app to the web content by injecting JavaScript.

In your React Native code:

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';
import { View, Button } from 'react-native';

const MyWebComponent = () => {
  const webViewRef = useRef(null);

  const sendMessageToWebView = () => {
    const message = 'Hello from React Native!';
    webViewRef.current.injectJavaScript(`
      (function() {
        document.dispatchEvent(new MessageEvent('message', { data: '${message}' }));
      })();
    `);
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{ uri: 'https://your-web-content-url.com' }}
      />
      <Button title="Send Message to WebView" onPress={sendMessageToWebView} />
    </View>
  );
};

export default MyWebComponent;

In your web content: Listen for the message event to receive the message from the React Native app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView PostMessage</title>
  </head>
  <body>
    <h1>WebView PostMessage Example</h1>
    <script>
      document.addEventListener('message', function(event) {
        alert('Message from React Native: ' + event.data);
      });
    </script>
  </body>
</html>

Notes

Ensure your WebView has the javaScriptEnabled prop set to true to allow JavaScript execution.
On iOS, if you’re using a local HTML file, you might need to add originWhitelist={['*']} to the WebView component to allow communication.
Remember to handle the security implications of enabling communication between the WebView and the React Native app.

By following these steps, you should be able to enable bi-directional communication between your React Native app and web content using postMessage.