react-native-wkwebview-reborn
Version:
React Native WKWebView for iOS
82 lines (81 loc) • 7.83 kB
JSON
{
"_args": [
[
{
"raw": "react-native-wkwebview-reborn@file:../",
"scope": null,
"escapedName": "react-native-wkwebview-reborn",
"name": "react-native-wkwebview-reborn",
"rawSpec": "file:../",
"spec": "/Users/insraq/Projects/react-native-wkwebview",
"type": "directory"
},
"/Users/insraq/Projects/react-native-wkwebview/example"
]
],
"_from": "..",
"_id": "react-native-wkwebview-reborn@1.2.0",
"_inCache": true,
"_location": "/react-native-wkwebview-reborn",
"_phantomChildren": {},
"_requested": {
"raw": "react-native-wkwebview-reborn@file:../",
"scope": null,
"escapedName": "react-native-wkwebview-reborn",
"name": "react-native-wkwebview-reborn",
"rawSpec": "file:../",
"spec": "/Users/insraq/Projects/react-native-wkwebview",
"type": "directory"
},
"_requiredBy": [
"/"
],
"_resolved": "file:..",
"_shasum": "810755db27687d6f5178c2ed44e700e96a558f26",
"_shrinkwrap": null,
"_spec": "react-native-wkwebview-reborn@file:../",
"_where": "/Users/insraq/Projects/react-native-wkwebview/example",
"author": {
"name": "Ruoyu Sun",
"email": "ruoysun@gmail.com"
},
"bugs": {
"url": "https://github.com/CRAlpha/react-native-wkwebview/issues"
},
"dependencies": {
"fbjs": "^0.8.3"
},
"description": "React Native WKWebView for iOS",
"devDependencies": {},
"gitHead": "5c1809c67ca87e531727b51f751db0e71dfebf9b",
"homepage": "https://github.com/CRAlpha/react-native-wkwebview",
"keywords": [
"react",
"native",
"wkwebview",
"webview",
"ios"
],
"license": "MIT",
"main": "index.js",
"name": "react-native-wkwebview-reborn",
"optionalDependencies": {},
"peerDependencies": {
"prop-types": "^15.6.0"
},
"pre-push#master": [
"lint"
],
"readme": "## WKWebView Component for React Native\n\n[](https://badge.fury.io/js/react-native-wkwebview-reborn)\n\nReact 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**\n\n### Install\n\n**Alternative #1**\n\n1. Install from npm (note the postfix in the package name): `npm install react-native-wkwebview-reborn`\n2. In the XCode's \"Project navigator\", right click on your project's Libraries folder ➜ Add Files to <...>\n3. Go to node_modules ➜ react-native-wkwebview ➜ ios ➜ select RCTWKWebView folder and create a group\n4. Compile and profit (Remember to set Minimum Deployment Target = 8.0)\n\n**Alternative #2**\n\n1. Install from npm (note the postfix in the package name): `npm install react-native-wkwebview-reborn`\n2. run `rnpm link`\n\n**Notes to iOS 8:**\n\nIf 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`.\nThis 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.\n\n\n### Usage\n\n```\nimport WKWebView from 'react-native-wkwebview-reborn';\n```\n\nTry replacing your existing `WebView` with `WKWebView` and it should work in most cases.\n\n**Note on version**\n\nReact Native 0.40 breaks library compatibility, so we currently have two branches:\n\n- 0.X.X: for RN < 0.40\n- 1.X.X: for RN >= 0.40\n\nPlease choose accordingly. We will try to make sure both branches have the same set of features until most people have upraded to 0.40\n\n### Compatibility with UIWebView\n\nWKWebView aims to be a drop-in replacement for UIWebView. However, some legacy UIWebView properties are not supported.\n\n**Additional props:**\n\n- onProgress\n\nA 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.\n\n```\n<WKWebView onProgress={(progress) => console.log(progress)} />\n```\n\n`progress` is a double between 0 and 1.\n\n- openNewWindowInWebView (New in 0.4.0)\n\nIf set to true, links with `target=\"_blank\"` or `window.open` will be opened in the current webview, not in Safari.\nDefault is false.\n\n- sendCookies\n\nSet `sendCookies` to true to copy cookies from `sharedHTTPCookieStorage` when calling loadRequest. This emulates the behavior of react-native's `WebView` component.\n\n- source={{file: '', allowingReadAccessToURL: '' }}\n\nThis 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.\nIt allows you to provide a fallback URL for iOS 8 users.\n\n```\n<WKWebView source={{ file: RNFS.MainBundlePath + '/data/index.html', allowingReadAccessToURL: RNFS.MainBundlePath }} />\n```\n\n**From WKWebview -> React Native (New in 0.3.0)**\n\n- onMessage\n\nThis utilizes the message handlers in WKWebView and allows you to post message from webview to React Native. For example:\n\n```\n<WKWebView onMessage={(e) => console.log(e)} />\n```\n\nThen in your webview, you can post message to React Native using\n\n```\nwindow.webkit.messageHandlers.reactNative.postMessage({data: 'hello!'});\n```\n\nThen your React Native should have\n\n```\n{name: 'reactNative', body: {data: 'hello!'}}\n```\n\nThe data serialization flow is as follows:\n\nJS --- (via WKWebView) --> ObjC --- (via React Native Bridge) ---> JS\n\nSo I recommend to keep your data simple and JSON-friendly.\n\n**From React Native -> WkWebView (New in 0.3.0)**\n\nThere is a `evaluateJavaScript` method on WKWebView, which does exactly what its name suggests. To send message from React Native to WebView,\nyou can define a callback method on your WebView:\n\n```\nwindow.receivedMessageFromReactNative = function(data) {\n // Code here\n console.log(data);\n}\n```\n\nThen you can send message from React Native with this method call:\n\n```\n// <WKWebView ref=\"webview\" />\nthis.refs.webview.evaluateJavaScript('receivedMessageFromReactNative(\"Hello from the other side.\")');\n```\n\n**Currently supported props are:**\n\n- automaticallyAdjustContentInsets\n- contentInset\n- html (deprecated)\n- injectedJavaScript\n- onError\n- onLoad\n- onLoadEnd\n- onLoadStart\n- onNavigationStateChange\n- renderError\n- renderLoading\n- source\n- startInLoadingState\n- style\n- url (deprecated)\n- bounces\n- onShouldStartLoadWithRequest\n- pagingEnabled\n- scrollEnabled\n\n**Unsupported props are:**\n\n- mediaPlaybackRequiresUserAction\n- scalesPageToFit\n- domStorageEnabled\n- javaScriptEnabled\n- allowsInlineMediaPlayback\n- decelerationRate\n\nIf you look at the source, the JavaScript side is mostly derived from React Native's WebView. The Objective C side mostly deals with the API difference between UIWebView and WKWebView.\n\n### Contribute\n\nWe 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.\n",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/CRAlpha/react-native-wkwebview.git"
},
"scripts": {
"lint": "eslint --ext .js --ext .jsx .",
"sync-from-example": "cp ./example/node_modules/react-native-wkwebview-reborn/*.js ./;cp -r ./example/node_modules/react-native-wkwebview-reborn/ios ./",
"sync-to-example": "cp ./*.js ./example/node_modules/react-native-wkwebview-reborn/;cp -r ./ios ./example/node_modules/react-native-wkwebview-reborn/"
},
"version": "1.22.0"
}