|
| 1 | +# React Native WebView - a Modern, Cross-Platform WebView for React Native |
| 2 | + |
| 3 | +**React Native WebView** is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be [removed from core](https://github.com/react-native-community/discussions-and-proposals/pull/3)). |
| 4 | + |
| 5 | +## Platforms Supported |
| 6 | + |
| 7 | +- [x] iOS (both UIWebView and WKWebView) |
| 8 | +- [x] Android |
| 9 | +- [ ] Windows 10 (coming soon) |
| 10 | + |
| 11 | +## Versioning |
| 12 | + |
| 13 | +If you need the exact same WebView as the one from react-native, please use version **2.0.0**. Future versions will follow [semantic versioning](https://semver.org/). |
| 14 | + |
| 15 | +## Getting Started |
| 16 | + |
| 17 | +``` |
| 18 | +$ yarn add react-native-webview |
| 19 | +$ react-native link react-native-webview |
| 20 | +``` |
| 21 | + |
| 22 | +Read our [Getting Started Guide](./docs/Getting-Started.md) for more. |
| 23 | + |
| 24 | +## Usage |
| 25 | + |
| 26 | +Import the `WebView` component from `react-native-webview` and use it like so: |
| 27 | + |
| 28 | +```jsx |
| 29 | +import React, { Component } from 'react'; |
| 30 | +import { StyleSheet, Text, View } from 'react-native'; |
| 31 | +import { WebView } from 'react-native-webview'; |
| 32 | + |
| 33 | +// ... |
| 34 | +class MyWebComponent extends Component { |
| 35 | + render() { |
| 36 | + return ( |
| 37 | + <WebView |
| 38 | + source={{ uri: 'https://infinite.red/react-native' }} |
| 39 | + style={{ marginTop: 20 }} |
| 40 | + onLoadProgress={e=>console.log(e.nativeEvent.progress)} |
| 41 | + /> |
| 42 | + ); |
| 43 | + } |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +For more, read the [API Reference](./docs/Reference.md) and [Guide](./docs/Guide.md). |
| 48 | + |
| 49 | +## Migrate from React Native core WebView to React Native WebView |
| 50 | + |
| 51 | +Simply install React Native WebView and then use it in place of the core WebView. Their APIs are currently identical, except that this package defaults `useWebKit={true}` unlike the built-in WebView. |
| 52 | + |
| 53 | +### Contributor Notes |
| 54 | + |
| 55 | +- I've removed all PropTypes for now. Instead, we'll be using Flow types. TypeScript types will be added at a later date. |
| 56 | +- UIWebView is not tested fully and you will encounter some yellow warning boxes. Since it is deprecated, we don't intend to put a lot of time into supporting it, but feel free to submit PRs if you have a special use case. Note that you will need to specify `useWebKit={false}` to use UIWebView |
| 57 | +- After pulling this repo and installing all dependencies, you can run flow on iOS and Android-specific files using the commands: |
| 58 | + - `yarn test:ios:flow` for iOS |
| 59 | + - `yarn test:android:flow` for Android |
| 60 | +- If you want to add another React Native platform to this repository, you will need to create another `.flowconfig` for it. If your platform is `example`, copy the main flowconfig and rename it to `.flowconfig.example`. Then edit the config to ignore other platforms, and add `.*/*[.]example.js` to the ignore lists of the other platforms. Then add an entry to `package.json` like this: |
| 61 | + - `"test:example:flow": "flow check --flowconfig-name .flowconfig.example"` |
| 62 | +- Currently you need to install React Native 0.57 to be able to test these types - `flow check` will not pass against 0.56. |
| 63 | + |
| 64 | +## Maintainers |
| 65 | + |
| 66 | +- [Jamon Holmgren](https://github.com/jamonholmgren) ([Twitter @jamonholmgren](https://twitter.com/jamonholmgren)) from [Infinite Red](https://infinite.red/react-native) |
| 67 | +- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://brigad.co/about) |
| 68 | + |
| 69 | +## License |
| 70 | + |
| 71 | +MIT |
0 commit comments