# react-native-webview-modal

> ⚛️ A WebView component for React Native, where the source content is pre-loaded for speed 🏁. (iOS/Android/Web/Expo)

Latest version **0.0.1-alpha.7** (published 2020-09-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-webview-modal
pnpm add react-native-webview-modal
yarn add react-native-webview-modal
bun add react-native-webview-modal
```

## 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.1-alpha.7 |
| Published | 2020-09-19 |
| First published | 2020-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 30.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Alex Thomas |
| Maintainers | cawfree |

## Links

- npm: https://www.npmjs.com/package/react-native-webview-modal
- Repository: https://github.com/cawfree/react-native-webview-modal
- npm.io page: https://npm.io/package/react-native-webview-modal

## Dependencies (3)

- [react-native-portal](https://npm.io/package/react-native-portal.md) ^1.3.0
- [react-native-web-webview](https://npm.io/package/react-native-web-webview.md) 1.0.1
- [react-native-use-dimensions](https://npm.io/package/react-native-use-dimensions.md) ^1.3.4

## Recent versions

- 0.0.1-alpha.7 (latest) — 2020-09-19
- 0.0.1-alpha.6 — 2020-09-18
- 0.0.1-alpha.4 — 2020-09-18
- 0.0.1-alpha.3 — 2020-09-18

## README

# react-native-webview-modal



⚛️ A `<WebViewModal />` component for [**React Native**](https://reactnative.dev), where the source content is pre-loaded for speed 🏁.  Supports iOS/Android/Web/Expo.  

Using [react-native-webview-modal](https://github.com/cawfree/react-native-webview-modal), you can embed content which can be presented _without_ waiting for the page actually load. This is achieved by effectively pre-caching the render result and not making this visible until the modal is ready.

This helps provide a more native feeling experience when handing over to web-defined parts of the user journey, such as authentication with a web provider.

## 🚀 Getting Started

```
yarn add react-native-webview react-native-webview-modal 
```

## ✍️ Example

You're required to declare a [`<WebViewModalProvider />`](https://github.com/cawfree/react-native-webview-modal/blob/main/src/components/WebViewModal.js) at the root of your application. This is because the `react-native-webview-modal` _does not_ use React Native's built in [`<Modal />`](https://reactnative.dev/docs/modal) component.

```javascript
import React, { useState } from "react";
import { SafeAreaView, StyleSheet, View, Button } from "react-native";

import WebViewModalProvider, { WebViewModal } from "react-native-webview-modal";

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <WebViewModalProvider>
      <View style={StyleSheet.absoluteFill}>
        <SafeAreaView />
        <Button
          title="Open"
          onPress={() => setVisible(true)}
        />
        <WebViewModal
          visible={visible}
          source={{ uri: "https://google.com" }}
        />
      </View>
    </WebViewModalProvider>
  );
}
```

## ✌️ License
[**MIT**](./LICENSE)

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