Skip to content

Commit

Permalink
Implement WKWebView to replace WebView
Browse files Browse the repository at this point in the history
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
  • Loading branch information
RSNara authored and facebook-github-bot committed Aug 16, 2018
1 parent 877212e commit 1442c26
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 0 deletions.
22 changes: 22 additions & 0 deletions Libraries/Components/WKWebView/WKWebView.android.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
* @providesModule WKWebView
*/

const React = require('React');
const View = require('View');
const Text = require('Text');

module.exports = () => {
return (
<View>
<Text>Android version not implemented.</Text>
</View>
);
};
14 changes: 14 additions & 0 deletions Libraries/Components/WKWebView/WKWebView.ios.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
* @providesModule WKWebView
*/

const requireNativeComponent = require('requireNativeComponent');

module.exports = requireNativeComponent('RCTWKWebView');
22 changes: 22 additions & 0 deletions React/Views/RCTWKWebView.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/

#import <React/RCTView.h>

@class RCTWKWebView;

@protocol RCTWKWebViewDelegate <NSObject>
@end

@interface RCTWKWebView : RCTView

@property (nonatomic, weak) id<RCTWKWebViewDelegate> delegate;
@property (nonatomic, copy) NSDictionary *source;

@end
72 changes: 72 additions & 0 deletions React/Views/RCTWKWebView.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
#import "RCTWKWebView.h"

#import <WebKit/WebKit.h>

#import <React/RCTConvert.h>

#import "RCTAutoInsetsProtocol.h"

@interface RCTWKWebView () <WKUIDelegate>
@end

@implementation RCTWKWebView
{
WKWebView *_webView;
}

- (void)dealloc
{

}

- (instancetype)initWithFrame:(CGRect)frame
{
if ((self = [super initWithFrame:frame])) {
super.backgroundColor = [UIColor clearColor];
_webView = [[WKWebView alloc] initWithFrame:self.bounds];
_webView.UIDelegate = self;
[self addSubview:_webView];
}
return self;
}

- (void)setSource:(NSDictionary *)source
{
if (![_source isEqualToDictionary:source]) {
_source = [source copy];

// Check for a static html source first
NSString *html = [RCTConvert NSString:source[@"html"]];
if (html) {
NSURL *baseURL = [RCTConvert NSURL:source[@"baseUrl"]];
if (!baseURL) {
baseURL = [NSURL URLWithString:@"about:blank"];
}
[_webView loadHTMLString:html baseURL:baseURL];
return;
}

NSURLRequest *request = [RCTConvert NSURLRequest:source];
// Because of the way React works, as pages redirect, we actually end up
// passing the redirect urls back here, so we ignore them if trying to load
// the same url. We'll expose a call to 'reload' to allow a user to load
// the existing page.
if ([request.URL isEqual:_webView.URL]) {
return;
}
if (!request.URL) {
// Clear the webview
[_webView loadHTMLString:@"" baseURL:nil];
return;
}
[_webView loadRequest:request];
}
}

- (void)layoutSubviews
{
[super layoutSubviews];
_webView.frame = self.bounds;
}

@end
18 changes: 18 additions & 0 deletions React/Views/RCTWKWebViewManager.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
#import "RCTViewManager.h"
#import "RCTWKWebView.h"

@interface RCTWKWebViewManager : RCTViewManager
@end

@implementation RCTWKWebViewManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
return [RCTWKWebView new];
}

RCT_EXPORT_VIEW_PROPERTY(source, NSDictionary)

@end

0 comments on commit 1442c26

Please sign in to comment.