Comunicar una Web en React con un WebView de React Native usando postMessage()

Hoy vamos a aprender cómo podemos comunicar un Web creada con React con un WebView en React Native y además utilizaremos la función postMessage() de JavaScript. Esto es muy útil para poder realizar interfaces con web y poderlas implementar dentro de una APP.

React Native

Utilizaremos la librería react-native-webview

npm i react-native-webview --save

La importamos:

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

Lo primero que tenemos que hacer es crear un WebView dónde cargaremos la URL que queremos manejar.

 <WebView 
                        onMessage={onMessage} mixedContentMode="compatibility"
                        source={{ uri: urlCargar }} />

En urlCargar pondremos nuestra web a cargar.

Y para obtener el onMessage crearemos esta función:

function onMessage(data) {
    if (data != null && data.nativeEvent != null && data.nativeEvent.data != null) {
        //Si no es JSON (recibimos un texto plano):
        //alert(datosDevueltos);

        //Si se recibe un objeto JSON:
        var datosDevueltos = JSON.parse(data.nativeEvent.data);
        alert(JSON.stringify(datosDevueltos));
    }
}

Ahora ya tenemos preparada la parte de React Native dónde vamos a recibir el dato.

React

En React vamos a crear una web por ejemplo test.tsx

Primero tenemos que definir un nuevo tipo para Window (que nos pide React Native WebView)

declare global {
  interface Window { 
    ReactNativeWebView: any; 
  }
}

Y ahora simplemente dónde queramos comunicar el evento podremos:

window.ReactNativeWebView.postMessage("Hola");

o Incluso podemos enviar objetos JSON:

window.ReactNativeWebView.postMessage(JSON.stringify(objEnviar));

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.