Skip to content

Latest commit

 

History

History

dynamix-react-native-webview

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

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.