@dynamix/react-native-webview

Dynamix by Grida

@dynamix/react-native-webview

Wrapper for React Native WebView component with easy custom event handlers.

Installation

npm install @dynamix/react-native-webview

Usage

import dynamix from "@dynamix/react-native";
import { WebView } from "@dynamix/react-native-webview";

function MyWebView() {
  return (
    <WebView
      source={{ uri: "https://grida.co" }}
      // disable redirecting on it's own
      preventDefaultAnchorClick
      // use dynamix
      dynamix={dynamix.configure({
        onRoute: ({ route }) => {
          // handle in-app routing.
          // don't forget to to add `preventDefaultAnchorClick` prop to prevent webview from redirecting on it's own
        },
        onMessage: ({ message }) => {
          // handle your custom message from web
        },
      })}
      scalesPageToFit
      allowsLinkPreview={false}
      onMessage={(event) => {
        console.log(event.nativeEvent.data);
      }}
    />
  );
}

Props

Below are the extra props that are available on top of the default WebView props.

name	type	default	description
dynamix	DynamixReactNative	null	dynamix instance
disableZoom	boolean	false	Disable zooming (which is a default webview behaviour) by injecting javascript
preventDefaultTouchstart	boolean	false	Prevent default touchstart event by injecting javascript
preventDefaultGestureStart	boolean	false	Prevent default gesturestart event by injecting javascript
disableUserSelect	boolean	false	Disable user select by injecting javascript
disableAnchorDrag	boolean	false	Disable <a> anchor drag on long press by injecting javascript
preventDefaultAnchorClick	boolean	false	Prevent default anchor click by injecting javascript
propagteAnchorClick	boolean	true	Propagate anchor click with window.ReactNativeWebView.postMessage(target.href) by injecting javascript, this won't be available via onMessage, use onAnchorClick instead.
onAnchorClick	(href: string, target?: string) => void	null	Callback for anchor (link) click
debug_injected_javascript	boolean	false	If set, it will log the final injected javascript combined with the one you provided.