React Native: How to use WebView?

React Native Webview

How to close Webview when tapping a button inside Webview?

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

const Form: React.FC = () => {
  const [isClose, setIsClose] = React.useState(false);
  const html = `
    <html>
    <head></head>
    <body>
      <script>
        function closeWebview() {
          window.ReactNativeWebView.postMessage("CLOSE")
        }
      </script>
      <button onclick="closeWebview()">Close</button>
    </body>
    </html>
  `;

  const onMessage = (event) => {
    if (event.nativeEvent.data === 'CLOSE') {
      setIsClose(true);
    }
  };

  if (isClose) {
    return null;
  }

  return <WebView source={{ html }} onMessage={onMessage} />;
};

export default Form;

How to pass data from React Native to webview

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

export default class App extends Component {
  render() {
    const html = `
      <html>
      <head></head>
      <body>
        <script>
          setTimeout(function () {
            window.ReactNativeWebView.postMessage("Hello!")
          }, 2000)
        </script>
      </body>
      </html>
    `;

    return (
      <View style={{ flex: 1 }}>
        <WebView
          source={{ html }}
          onMessage={event => {
            alert(event.nativeEvent.data);
          }}
        />
      </View>
    );
  }
}

Issues

How to fix Android crash when use Webview inside a Scrollview?

react-native-screens/issues/214

<WebView
    style={{ opacity: 0.99}}
    androidHardwareAccelerationDisabled
    ...
>

How to render HTML&css without using heavy react-native-webview?

Use react-native-render-html

Find a way to communicate between React Native code and web code running in the Webview

injectedJavaScript

  • Inject JavaScript code to be executed within the context of the WebView
  • This only run once the WebView is loaded so unless you want to reload your web content each time you want to pass something into the WebView this is not the way to go
  • In iOS you can get the returned value from the injected JavaScript (as long as it’s a string), but in Android, well… you get nothing

injectJavaScript

  • Inject JavaScript code that is executed immediately on the WebView, with no return value
  • This API is perfect for setting globals and dispatching events on the window

onMessage/postMessage

  • This is probably the only API that gives a real two way bridge for communication
  • postMessage does in its implementation something similar to injectJavaScript, only with the extra boilerplate code of firing a message event in the WebView
  • Sending messages between React Native and the WebView is a matter of calling postMessage and implementing onMessage on the receiving side to get the message:
    [js]
    console.log(event.nativeEvent.data)}
    />
    [/js]

Be the first to comment

Leave a Reply

Your email address will not be published.


*