Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
insraq committed Mar 13, 2017
1 parent 4611cf8 commit 1d784ae
Showing 1 changed file with 22 additions and 29 deletions.
51 changes: 22 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

[![npm version](https://badge.fury.io/js/react-native-wkwebview-reborn.svg)](https://badge.fury.io/js/react-native-wkwebview-reborn)

React Native comes with [WebView](http://facebook.github.io/react-native/docs/webview.html) component, which uses UIWebView on iOS. This component uses [WKWebView](http://nshipster.com/wkwebkit/) introduced in iOS 8 with all the performance boost. **Deployment Target >= iOS 8.0 is required**
React Native comes with [WebView](http://facebook.github.io/react-native/docs/webview.html) component, which uses UIWebView on iOS. This component uses [WKWebView](http://nshipster.com/wkwebkit/) introduced in iOS 8 with all the performance boost. **Deployment Target >= iOS 8.0 is required (which is React Native's current minimum deployment target anyway).**

### Install

Expand All @@ -18,11 +18,6 @@ React Native comes with [WebView](http://facebook.github.io/react-native/docs/we
1. Install from npm (note the postfix in the package name): `npm install react-native-wkwebview-reborn`
2. run `rnpm link`

**Notes to iOS 8:**

If you install from using Alterntive #2, you might encounter bugs in iOS 8.2 (We've only tested this version) where the app crashes with `dyld_fatal_error`.
This can be solved using Alternative #1. We were still unable to find the cause of the first bug so I recommend that you link the library using Alternative #1.


### Usage

Expand All @@ -32,22 +27,15 @@ import WKWebView from 'react-native-wkwebview-reborn';

Try replacing your existing `WebView` with `WKWebView` and it should work in most cases.

**Note on version**

React Native 0.40 breaks library compatibility, so we currently have two branches:

- 0.X.X: for RN < 0.40
- 1.X.X: for RN >= 0.40

Please choose accordingly. We will try to make sure both branches have the same set of features until most people have upraded to 0.40
If your React Native < 0.40, please user **0.x.x** versions.

### Compatibility with UIWebView

WKWebView aims to be a drop-in replacement for UIWebView. However, some legacy UIWebView properties are not supported.

**Additional props:**
#### Additional props:

- onProgress
- **onProgress**

A callback to get the loading progress of WKWebView. Derived from [`estimatedProgress`](https://developer.apple.com/library/ios/documentation/WebKit/Reference/WKWebView_Ref/#//apple_ref/occ/instp/WKWebView/estimatedProgress) property.

Expand All @@ -57,16 +45,15 @@ A callback to get the loading progress of WKWebView. Derived from [`estimatedPro

`progress` is a double between 0 and 1.

- openNewWindowInWebView (New in 0.4.0)
- **openNewWindowInWebView**

If set to true, links with `target="_blank"` or `window.open` will be opened in the current webview, not in Safari.
Default is false.
If set to true, links with `target="_blank"` or `window.open` will be opened in the current webview, not in Safari. Default is false.

- sendCookies
- **sendCookies**

Set `sendCookies` to true to copy cookies from `sharedHTTPCookieStorage` when calling loadRequest. This emulates the behavior of react-native's `WebView` component.
Set `sendCookies` to true to copy cookies from `sharedHTTPCookieStorage` when calling loadRequest. This emulates the behavior of react-native's `WebView` component. You can set cookies using `react-native-cookies` Default is false.

- source={{file: '', allowingReadAccessToURL: '' }}
- **source={{file: '', allowingReadAccessToURL: '' }}**

This allows WKWebView loads a local HTML file. Please note the underlying API is only introduced in iOS 9+. So in iOS 8, it will simple ignores these two properties.
It allows you to provide a fallback URL for iOS 8 users.
Expand All @@ -75,9 +62,13 @@ It allows you to provide a fallback URL for iOS 8 users.
<WKWebView source={{ file: RNFS.MainBundlePath + '/data/index.html', allowingReadAccessToURL: RNFS.MainBundlePath }} />
```

**From WKWebview -> React Native (New in 0.3.0)**
- **customUserAgent="MyUserAgent"**

- onMessage
Set a custom user agent for WKWebView. Note this only works on iOS 9+. Previous version will simply ignore this props.

#### Communication from WKWebview to React Native

- **onMessage**

This utilizes the message handlers in WKWebView and allows you to post message from webview to React Native. For example:

Expand All @@ -99,11 +90,13 @@ Then your React Native should have

The data serialization flow is as follows:

JS --- (via WKWebView) --> ObjC --- (via React Native Bridge) ---> JS
```
JS — (via WKWebView) --> ObjC --- (via React Native Bridge) ---> JS
```

So I recommend to keep your data simple and JSON-friendly.

**From React Native -> WkWebView (New in 0.3.0)**
#### Communication from React Native to WkWebView

There is a `evaluateJavaScript` method on WKWebView, which does exactly what its name suggests. To send message from React Native to WebView,
you can define a callback method on your WebView:
Expand All @@ -122,7 +115,7 @@ Then you can send message from React Native with this method call:
this.refs.webview.evaluateJavaScript('receivedMessageFromReactNative("Hello from the other side.")');
```

**Currently supported props are:**
#### Currently supported props are:

- automaticallyAdjustContentInsets
- contentInset
Expand All @@ -144,7 +137,7 @@ this.refs.webview.evaluateJavaScript('receivedMessageFromReactNative("Hello from
- pagingEnabled
- scrollEnabled

**Unsupported props are:**
#### Unsupported props are:

- mediaPlaybackRequiresUserAction
- scalesPageToFit
Expand All @@ -157,4 +150,4 @@ If you look at the source, the JavaScript side is mostly derived from React Nati

### Contribute

We battle test this component against our app. However, we haven't use all the props so if something does not work as expected, please open an issue or PR.
We battle test this component against our app. However, we haven't use all the props so if something does not work as expected, please open an issue or PR.

0 comments on commit 1d784ae

Please sign in to comment.