# @dynamix/react-native-webview

> Dynamix for react-native-webview

Latest version **0.0.0** (published 2023-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dynamix/react-native-webview
pnpm add @dynamix/react-native-webview
yarn add @dynamix/react-native-webview
bun add @dynamix/react-native-webview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2023-12-28 |
| First published | 2023-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 72 |
| Author | Universe |
| Maintainers | softmarshmallow |
| Keywords | dynamix, dynamic, react-native, react-native-webview, react, webview, bridge |

## Links

- npm: https://www.npmjs.com/package/@dynamix/react-native-webview
- Repository: https://github.com/gridaco/dynamix.git#main
- Homepage: https://grida.co/dynamix
- Issues: https://github.com/gridaco/dynamix/issues
- npm.io page: https://npm.io/package/@dynamix/react-native-webview

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.0 (latest) — 2023-12-28

## README

<p align="center">
  <a href="https://grida.co/dynamix">
    <image src="https://github.com/gridaco/dynamix/blob/main/.readme/cover.png?raw=true" />
    <h3 align="center">Dynamix by Grida</h3>
  </a>
</p>

<p align="center">
  <code>@dynamix/react-native-webview</code>
</p>

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

## Installation

```sh
npm install @dynamix/react-native-webview
```

## Usage

```tsx
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](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md).

| 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.                                                                                           |

---
_Source: https://npm.io/package/@dynamix/react-native-webview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._