How to use React Native WebView to implement the communication between App and Web

Use React Native WebView to enable App-Web communication

In mobile application development, it is often necessary to embed web pages in the application and communicate between the App and the Web. React Native provides a powerful component—react-native-webview, can help us achieve this function. In this article, we will explain how to use itreact-native-webviewTo realize the interaction between the App and the Web.

Environmental preparation

First, make sure your React Native project is already installedreact-native-webview. If you have not installed it, you can use the following command:

npm install react-native-webview

Or use yarn:

yarn add react-native-webview

Basic usage

Introduced in your React Native componentWebView：

import React from 'react';
import { WebView } from 'react-native-webview';
const MyWebView = () => {
  return (
    <WebView
      source={{ uri: '' }}
      style={{ flex: 1 }}
    />
  );
};
export default MyWebView;

This way you can embed a web page in the application.

Implement App-Web communication

Send messages from the web to the app

To send messages from the web to the App, you can usemethod. Suppose we have a button in the web page and click it and send a message to the App:

<button onclick="sendMessage()">Send Message to App</button>
<script>
  function sendMessage() {
    ('Hello from Web!');
  }
</script>

In React Native, we need to set uponMessageAttributes to receive messages:

const MyWebView = () => {
  const onMessage = (event) => {
    alert();
  };
  return (
    <WebView
      source={{ uri: '' }}
      style={{ flex: 1 }}
      onMessage={onMessage}
    />
  );
};

In this way, when the button on the web page is clicked, the App will pop up a warning box to display the message from the web page.

Send messages from the App to the Web

To send messages from the App to the Web, you can useinjectJavaScriptmethod. We can inject JavaScript code into the webpage after the WebView is loaded:

const MyWebView = () => {
  const webViewRef = (null);
  const sendMessageToWeb = () => {
    const message = "Hello from App!";
    (`alert('${message}');`);
  };
  return (
    <>
      <WebView
        ref={webViewRef}
        source={{ uri: '' }}
        style={{ flex: 1 }}
      />
      <Button title="Send Message to Web" onPress={sendMessageToWeb} />
    </>
  );
};

In this example, when the button is clicked, a warning box will pop up in the web page to display the message from the App.

Summarize

passreact-native-webview, we can easily achieve two-way communication between App and Web. This technology is ideal for scenarios where complex web features are embedded in mobile applications. Hope this article helps you better understand and use itreact-native-webview。

This is the end of this article about how to use React Native WebView to implement communication between App and Web. For more information about React Native WebView App and Web, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!