FRO-1728 Enable wk cookie store

README.md

@@ -29,7 +29,7 @@ import WKWebView from 'react-native-wkwebview-reborn';
 
 Try replacing your existing `WebView` with `WKWebView` and it should work in most cases.
 
-If your React Native < 0.40, please use **0.x.x** versions.
+For React Native >= 0.57, use version 2.x; for React Native < 0.40, use version 0.x.
 
 ### Compatibility with UIWebView
 
@@ -43,16 +43,16 @@ WKWebView aims to be a drop-in replacement for UIWebView. However, some legacy U
 
 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.
 
-- **onNavigationResponse**
-
-A callback to get response headers, http status code and http localized status code.
-
 ```js
 <WKWebView onProgress={(progress) => console.log(progress)} />
 ```
 
 `progress` is a double between 0 and 1.
 
+- **onNavigationResponse**
+
+A callback to get response headers, http status code and http localized status code.
+
 - **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.
@@ -61,6 +61,10 @@ If set to true, links with `target="_blank"` or `window.open` will be opened in
 
 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.
 
+- **useWKCookieStore**
+
+Set `useWKCookieStore` to true to use the webView's `WKHTTPCookieStorage`. All Cookies from `sharedHTTPCookieStorage` will be copied to it.
+
 - **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.
@@ -96,6 +100,10 @@ This property specifies how the safe area insets are used to modify the content
 
 Enables focusing an input inside a webview and showing the keyboard *programatically*. **New in 1.20.0**
 
+- **keyboardDismissMode**
+
+Sets the manner in which the keyboard is dismissed when a drag begins in the scroll view. Possible values are "none", "on-drag" and "interactive". Default to "none".
+
 - **injectJavaScript, injectJavaScriptForMainFrameOnly**
 
 Add JavaScript at document start, see [WKUserScriptInjectionTimeAtDocumentStart](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentstart?language=objc). **New in 1.20.0**
@@ -104,6 +112,10 @@ Add JavaScript at document start, see [WKUserScriptInjectionTimeAtDocumentStart]
 
 Add JavaScript at document end. Since 1.20.0, the implementation has been changed to use WKUserScript.
 
+- **allowsBackForwardNavigationGestures**
+
+Enable horizontal swipe gestures will trigger back-forward navigations. Derived from [`allowsBackForwardNavigationGestures`](https://developer.apple.com/documentation/webkit/wkwebview/1414995-allowsbackforwardnavigationgestu) property.
+
 #### Currently supported props are:
 
 - automaticallyAdjustContentInsets

WKWebView.ios.js

@@ -18,7 +18,7 @@ import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'
 import deprecatedPropType from 'react-native/Libraries/Utilities/deprecatedPropType';
 import invariant from 'fbjs/lib/invariant';
 import keyMirror from 'fbjs/lib/keyMirror';
-const WKWebViewManager = NativeModules.WKWebViewManager;
+const WKWebViewManager = NativeModules.CRAWKWebViewManager;
 
 var BGWASH = 'rgba(255,255,255,0.8)';
 
@@ -173,6 +173,8 @@ class WKWebView extends React.Component {
      * Report the progress
      */
     onProgress: PropTypes.func,
+    onCanGoBackChange: PropTypes.func,
+    onCanGoForwardChange: PropTypes.func,
     /**
      * A function that is invoked when the webview calls `window.postMessage`.
      * Setting this property will inject a `postMessage` global into your
@@ -216,7 +218,7 @@ class WKWebView extends React.Component {
     /**
      * Function that accepts a string that will be passed to the WebView and executed immediately as JavaScript.
      */
-    injectJavaScript: PropTypes.string,
+    injectJavaScriptCode: PropTypes.string,
     /**
      * Sets the JS to be injected when the webpage loads.
      */
@@ -232,6 +234,10 @@ class WKWebView extends React.Component {
      * Set this to true to emulate behavior of WebView component.
      */
     sendCookies: PropTypes.bool,
+    /**
+     * Initializes the webView's WKHTTPCookieStorage and copies all cookies from sharedHTTPCookieStorage
+     */
+    useWKCookieStore: PropTypes.bool,
     /**
      * If set to true, target="_blank" or window.open will be opened in WebView, instead
      * of new window. Default is false to be backward compatible.
@@ -263,6 +269,15 @@ class WKWebView extends React.Component {
      * A Boolean value that sets whether diagonal scrolling is allowed.
     */
     directionalLockEnabled: PropTypes.bool,
+    /*
+     * The manner in which the keyboard is dismissed when a drag begins in the
+     * scroll view.
+     */
+    keyboardDismissMode: PropTypes.oneOf([
+      'none', // Default
+      'on-drag',
+      'interactive', // iOS only
+    ]),
   };
 
   state = {
@@ -295,7 +310,7 @@ class WKWebView extends React.Component {
       );
     } else if (this.state.viewState !== WebViewState.IDLE) {
       console.error(
-        'RCTWKWebView invalid state encountered: ' + this.state.loading
+        'CRAWKWebView invalid state encountered: ' + this.state.loading
       );
     }
 
@@ -312,32 +327,30 @@ class WKWebView extends React.Component {
       WKWebViewManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier);
     });
 
-    let source = this.props.source;
-    if (this.props.source && typeof this.props.source === 'object') {
-      source = Object.assign({}, this.props.source, {
-        sendCookies: this.props.sendCookies,
-        customUserAgent: this.props.customUserAgent || this.props.userAgent
-      });
-
-      if (this.props.html) {
-        source.html = this.props.html;
-      } else if (this.props.url) {
-        source.uri = this.props.url;
-      }
+    let source = Object.assign({}, this.props.source || {}, {
+      sendCookies: this.props.sendCookies,
+      customUserAgent: this.props.customUserAgent || this.props.userAgent,
+      useWKCookieStore: this.props.useWKCookieStore,
+    });
+
+    if (this.props.html) {
+      source.html = this.props.html;
+    } else if (this.props.url) {
+      source.uri = this.props.url;
     }
 
     const messagingEnabled = typeof this.props.onMessage === 'function';
 
     const webView =
-      <RCTWKWebView
+      <CRAWKWebView
         ref={ref => { this.webview = ref; }}
         key="webViewKey"
         style={webViewStyles}
         contentInsetAdjustmentBehavior={this.props.contentInsetAdjustmentBehavior}
         source={resolveAssetSource(source)}
         injectJavaScriptForMainFrameOnly={this.props.injectJavaScriptForMainFrameOnly}
         injectedJavaScriptForMainFrameOnly={this.props.injectedJavaScriptForMainFrameOnly}
-        injectJavaScript={this.props.injectJavaScript}
+        injectJavaScript={this.props.injectJavaScriptCode}
         injectedJavaScript={this.props.injectedJavaScript}
         bounces={this.props.bounces}
         scrollEnabled={this.props.scrollEnabled}
@@ -353,12 +366,15 @@ class WKWebView extends React.Component {
         onLoadingError={this._onLoadingError}
         messagingEnabled={messagingEnabled}
         onProgress={this._onProgress}
+        onCanGoBackChange={this._onCanGoBackChange}
+        onCanGoForwardChange={this._onCanGoForwardChange}
         onMessage={this._onMessage}
         onScroll={this._onScroll}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
         pagingEnabled={this.props.pagingEnabled}
         directionalLockEnabled={this.props.directionalLockEnabled}
         onNavigationResponse={this._onNavigationResponse}
+        keyboardDismissMode={this.props.keyboardDismissMode}
       />;
 
     return (
@@ -375,7 +391,7 @@ class WKWebView extends React.Component {
   goForward = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWKWebView.Commands.goForward,
+      UIManager.CRAWKWebView.Commands.goForward,
       null
     );
   };
@@ -386,7 +402,7 @@ class WKWebView extends React.Component {
   goBack = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWKWebView.Commands.goBack,
+      UIManager.CRAWKWebView.Commands.goBack,
       null
     );
   };
@@ -412,7 +428,7 @@ class WKWebView extends React.Component {
     this.setState({ viewState: WebViewState.LOADING });
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWKWebView.Commands.reload,
+      UIManager.CRAWKWebView.Commands.reload,
       null
     );
   };
@@ -423,7 +439,7 @@ class WKWebView extends React.Component {
   stopLoading = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWKWebView.Commands.stopLoading,
+      UIManager.CRAWKWebView.Commands.stopLoading,
       null
     )
   };
@@ -441,12 +457,12 @@ class WKWebView extends React.Component {
   postMessage = (data) => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
-      UIManager.RCTWKWebView.Commands.postMessage,
+      UIManager.CRAWKWebView.Commands.postMessage,
       [String(data)]
     );
   };
 
-  evaluateJavaScript = (js) => {
+  injectJavaScript = (js) => {
     return WKWebViewManager.evaluateJavaScript(this.getWebViewHandle(), js);
   };
 
@@ -501,6 +517,16 @@ class WKWebView extends React.Component {
     onProgress && onProgress(event.nativeEvent.progress);
   };
 
+  _onCanGoBackChange = (event: Event) => {
+    const onCanGoBackChange = this.props.onCanGoBackChange;
+    onCanGoBackChange && onCanGoBackChange(event.nativeEvent.canGoBack);
+  }
+
+  _onCanGoForwardChange = (event: Event) => {
+    const onCanGoForwardChange = this.props.onCanGoForwardChange;
+    onCanGoForwardChange && onCanGoForwardChange(event.nativeEvent.canGoForward);
+  }
+
   _onMessage = (event: Event) => {
     var { onMessage } = this.props;
     onMessage && onMessage(event);
@@ -517,7 +543,7 @@ class WKWebView extends React.Component {
   }
 }
 
-const RCTWKWebView = requireNativeComponent('RCTWKWebView', WKWebView, {
+const CRAWKWebView = requireNativeComponent('CRAWKWebView', WKWebView, {
   nativeOnly: {
     onLoadingStart: true,
     onLoadingError: true,

example/.babelrc

@@ -1,3 +1,5 @@
 {
-"presets": ["react-native"]
+  "presets": [
+    "module:metro-react-native-babel-preset"
+  ]
 }

example/package.json

@@ -7,9 +7,10 @@
 		"test": "jest"
 	},
 	"dependencies": {
-		"react": "16.2.0",
-		"react-native": "0.53.2",
+		"metro-react-native-babel-preset": "^0.48.0",
 		"prop-types": "15.6.0",
+		"react": "16.5.0",
+		"react-native": "0.57",
 		"react-native-wkwebview-reborn": "file:../"
 	},
 	"devDependencies": {
@@ -19,4 +20,4 @@
 	"jest": {
 		"preset": "react-native"
 	}
-}
+}