React Native Cross-Platform WebView https://github.com/react-native-community/discussions-and-proposals/pull/3

Go to file

semantic-release-bot 5e31885653 chore(release): 5.2.4 [skip ci] ## [5.2.4](https://github.com/react-native-community/react-native-webview/compare/v5.2.3...v5.2.4) (2019-03-01) ### Bug Fixes * WKWebView Scrolling: fixed broken scroll ([#372](https://github.com/react-native-community/react-native-webview/issues/372)) ([`2cef5cb`](https://github.com/react-native-community/react-native-webview/commit/2cef5cb)), closes [#371](https://github.com/react-native-community/react-native-webview/issues/371)		2019-03-01 09:48:47 +00:00
.circleci	chore(ci and npm): Setup CircleCI and semantic-release	2018-10-17 14:54:44 +02:00
android	fix(Android <input />): Support file extensions in file input accept attributes (#357 )	2019-02-28 22:12:27 +01:00
bin	Added starter setup script	2018-08-15 21:09:05 -07:00
docs	chore(docs): Add API Examples in reference documentation (#329 )	2019-03-01 01:36:56 +01:00
ios	fix(WKWebView Scrolling): fixed broken scroll (#372 )	2019-03-01 10:46:53 +01:00
js	feat(toggle scroll bar): added new props showsVerticalScrollIndicator / showsHorizontalScrollIndicator (#250 )	2019-02-12 14:47:24 +01:00
typings	fix(types): Add new cacheEnabled prop to typescript prop type declarations (#335 )	2019-02-11 22:51:44 +01:00
.all-contributorsrc	chore(docs): add jeluard as a contributor (#348 )	2019-02-15 11:57:41 +01:00
.flowconfig	Add WebView Flow types	2018-09-10 18:46:07 -06:00
.flowconfig.android	Add WebView Flow types	2018-09-10 18:46:07 -06:00
.gitignore	refactor(Android): New project setup + kotlin events (#121 )	2018-11-19 11:25:28 +01:00
.releaserc	fix(semantic-release): Use git plugin to auto commit	2018-10-18 11:37:43 +02:00
LICENSE	WIP: iOS WKWebView	2018-09-08 10:42:02 -07:00
README.md	chore(readme): Add getting started doc link (#370 )	2019-03-01 08:53:37 +01:00
babel.config.js	fix(webviewShared.js): Support all valid URI schemes and add testing (#293 )	2019-02-03 19:45:58 +01:00
index.js	Added RNCWebViewManager to xcode proj	2018-08-02 23:52:31 -07:00
jest.config.js	fix(webviewShared.js): Support all valid URI schemes and add testing (#293 )	2019-02-03 19:45:58 +01:00
package.json	chore(release): 5.2.4 [skip ci]	2019-03-01 09:48:47 +00:00
react-native-webview.podspec	fix(package.json): Add license to podspec and update package.json version dynamically. (#98 )	2018-10-18 11:08:49 +02:00
yarn.lock	fix(webviewShared.js): Support all valid URI schemes and add testing (#293 )	2019-02-03 19:45:58 +01:00

README.md

React Native WebView - a Modern, Cross-Platform WebView for React Native

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

Core Maintainers - Sponsoring companies

This project is maintained for free by these people using both their free time and their company work time.

Thibault Malbranche (Twitter @titozzz) from Brigad
Jamon Holmgren (Twitter @jamonholmgren) from Infinite Red

Platforms Supported

iOS (both UIWebView and WKWebView)
Android

Note: React Native WebView is not currently supported by Expo unless you "eject".

Getting Started

Read our Getting Started Guide. If any step seems unclear, please create a detailed issue.

Versioning

This project follows semantic versioning. We do not hesitate to release breaking changes but they will be in a major version.

Breaking History:

2.0.0 - First release this is a replica of the core webview component
3.0.0 - WKWebview: Add shared process pool so cookies and localStorage are shared across webviews in iOS (enabled by default).
4.0.0 - Added cache (enabled by default).
5.0.1 - Refactored the old postMessage implementation for communication from webview to native.

Upcoming:

UIWebView removal
this.webView.postMessage() removal (never documented and less flexible than injectJavascript)
Typescript rewrite
Kotlin rewrite
Maybe Swift rewrite

Usage

Import the WebView component from react-native-webview and use it like so:

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";

// ...
class MyWebComponent extends Component {
  render() {
    return (
      <WebView
        source={{ uri: "https://facebook.github.io/react-native/" }}
      />
    );
  }
}

For more, read the API Reference and Guide. If you're interested in contributing, check out the Contributing Guide.

Common issues

If you're getting Invariant Violation: Native component for "RNCWKWebView does not exist" it likely means you forgot to run react-native link or there was some error with the linking process
There's a problem on some Android devices where the webview could overlap previous siblings from same parent. To fix this, wrap the WebView in a View with style overflow: hidden.