Commit Graph

7 Commits

Author SHA1 Message Date
Ramanpreet Nara 03b57d9db6 Implement 'goForward' and 'goBack' methods
Summary:
@public

This diff implements the `goForward` and `goBack` methods on `WKWebView`.
1. `goForward` moves the web view one screen forward in the browser history.
1. `goBack` moves the web view one screen back in the browser history.

Reviewed By: shergin

Differential Revision: D6367495

fbshipit-source-id: e100ca00e92a6eaa30d2af1af642ba79a9c9feae
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 0022354525 Implement 'injectJavaScript' method
Summary:
@public

This diff introduces a method called `injectJavaScript(script)` on the React Native `<WKWebView/>` component. When called with a string, it evaluates that string as JavaScript within the web view.

Reviewed By: shergin

Differential Revision: D6367445

fbshipit-source-id: f68afeff42535dc991747f96a63f3c956faf13d3
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 90e85a4adc Implement 'decelerationRate' prop
Summary:
@public

The content that renders within the `WKWebView` instance actually renders inside a `UIScrollView`. On that scroll view, we can adjust the `decelerationRate`, which controls how fast the view stops scrolling after the user lets go while scrolling.

In this diff, I implemented the `decelerationRate` prop for `WKWebView`, which gets forwarded to the `UIScrollView` instance underlying the web view.

**Note:** Even though we accept a floating point value for the deceleration rate, the native `UIScrollView` component only allows two inputs:
1. `UIScrollViewDecelerationRateNormal`: 0.998
2. `UIScrollViewDecelerationRateFast`: 0.99

As far as I know, it seems to just round up to the nearest valid `CGFloat` (or down if number > 0.998), for any invalid numbers.

Reviewed By: mmmulani

Differential Revision: D6307262

fbshipit-source-id: 98c4395702415aa36519f9e9bd84f043be3a5881
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 1741fe9571 Implement 'scrollEnabled' prop
Summary:
@public

The content of `WKWebView` renders within a scrollview. In this diff, I'm introducing the prop `scrollEnabled` to allow developers to control whether scrolling is enabled within the scroll view, or not.

Reviewed By: mmmulani

Differential Revision: D6307001

fbshipit-source-id: 5a199c6c3b8535e45a5a3cb6041e822bb7af2362
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 7a6dd9807c Implement message passing!
Summary:
@public

This diff implements message passing between the `WKWebView` and React Native. As with `<WebView/>`, we can only send/receive strings.

**Usage:**
1. Set `messagingEnabled` to `true`.
1. To send data from the web view to React Native, call `postMessage(data)` within the web view. This forces React Native to execute the `onMessage` prop on the `WKWebView` component. `onMessage` will be called with an event `e`, where `e.nativeEvent.data` will be the data you passed into `postMessage`.
1. To send data from React Native to the web view, call `UIManager.dispatchViewManagerCommand` to dispatch the `UIManager.RCTWKWebView.Commands.postMessage` command. Look at [[ https://fburl.com/u1wusf2f | this part of the existing `<WebView/>` ]] component for more details. After you make the call, React Native will dispatch a `'message'` event to the `document` object within the webview. You can listen to the event by doing `document.addEventListener('message', callback)`. Let the event dispatched be `e`. Then, `e.data` is the data you sent over from React Native.

[[ P58627181 | This Playground.js ]] illustrates the usage.

Reviewed By: shergin

Differential Revision: D6304850

fbshipit-source-id: 29075ef753296e9fb5a9cddeb1ad0f4ff7e28650
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 3703927e7e Implement onLoading(Start|Finish|Error) and injectedJavaScript props
Summary:
@public

This diff includes four very straightforward changes:
1. Whenever the WebView starts loading, the `onLoadingStart` hook should be executed. The event passed into this hook should be decorated with the `navigationType`.
1. Whenever the WebView errors out while loading, the `onLoadingError` hook should be executed.
1. Whenever the WebView finishes loading (without any errors), the `onLoadingFinish` hook should be executed.
1. The serialized JavaScript passed into the `injectedJavaScript` prop should be executed when the WebView finishes loading. After execution finishes, the `onLoadingFinish` prop should be called with the serialized completion value of this JavaScript.

Reviewed By: shergin

Differential Revision: D6293532

fbshipit-source-id: 21407c766f73413046823ae605afc21e85cf9db6
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 1442c265da Implement WKWebView to replace WebView
Summary:
@public

`UIWebView` has been deprecated and replaced by `WKWebView`. This diff introduces a new component `WKWebView` that simply renders a `WKWebView` on iOS.

This is the first in the stack of many diffs that'll be required to fully replace `UIWebView` with `WKWebView` in the `<WebView/>` React Native component. Eventually, I hope to introduce a prop called `useWebKitImplementation`, which, when true, will force RN to use `WKWebView` instead of `UIWebView` for the `<WebView/>` component.

The only thing that's been implemented so far is the `source` property.

Reviewed By: mmmulani

Differential Revision: D6266100

fbshipit-source-id: 65862e34bd98db7fff0349cf26888afee43a56e4
2018-08-16 16:52:43 -07:00