Implement 'dataDetectorTypes' prop

Summary:
When text is rendered in `WKWebView` WebKit component, the component itself can detect things like phone numbers, flight numbers, links, etc. and render them with additional functionality.

For example, when the text `apple.com` is detected, if the `link` data detector type is enabled, the web view will actually render a link that takes the user to the Apple home page.

In this diff, I implement the `dataDetectorTypes` prop. The data detector types supported are:
1. phoneNumber
1. link
1. address
1. calendarEvent
1. trackingNumber
1. flightNumber
1. lookupSuggestion

These enums are documented in the [[ https://developer.apple.com/documentation/webkit/wkdatadetectortypes | WKDataDetectorTypes docs ]].

Reviewed By: shergin

Differential Revision: D6392546

fbshipit-source-id: 4dd373f0ac52f898163cd959eeef6672e55b42a6

Libraries/Components/WKWebView/WKWebView.ios.js

@@ -18,12 +18,14 @@ const RCTWKWebView = requireNativeComponent('RCTWKWebView');
 type RCTWKWebViewProps = {
   allowsInlineMediaPlayback?: boolean,
   mediaPlaybackRequiresUserAction?: boolean,
+  dataDetectorTypes?: boolean,
 };
 
 class WKWebView extends React.Component<RCTWKWebViewProps> {
   componentWillReceiveProps(nextProps: RCTWKWebViewProps) {
     this.showRedboxOnPropChanges(nextProps, 'allowsInlineMediaPlayback');
     this.showRedboxOnPropChanges(nextProps, 'mediaPlaybackRequiresUserAction');
+    this.showRedboxOnPropChanges(nextProps, 'dataDetectorTypes');
   }
 
   showRedboxOnPropChanges(nextProps: RCTWKWebViewProps, propName: string) {

React/Base/RCTConvert.h

@@ -15,6 +15,7 @@
 #import <React/RCTPointerEvents.h>
 #import <React/RCTTextDecorationLineType.h>
 #import <yoga/Yoga.h>
+#import <WebKit/WebKit.h>
 
 /**
  * This class provides a collection of conversion functions for mapping
@@ -68,6 +69,7 @@ typedef NSURL RCTFileURL;
 + (UIReturnKeyType)UIReturnKeyType:(id)json;
 #if !TARGET_OS_TV
 + (UIDataDetectorTypes)UIDataDetectorTypes:(id)json;
++ (WKDataDetectorTypes)WKDataDetectorTypes:(id)json;
 #endif
 
 + (UIViewContentMode)UIViewContentMode:(id)json;

React/Base/RCTConvert.m

@@ -361,6 +361,18 @@ + (NSLocale *)NSLocale:(id)json
   @"none": @(UIDataDetectorTypeNone),
   @"all": @(UIDataDetectorTypeAll),
 }), UIDataDetectorTypePhoneNumber, unsignedLongLongValue)
+
+RCT_MULTI_ENUM_CONVERTER(WKDataDetectorTypes, (@{
+ @"phoneNumber": @(WKDataDetectorTypePhoneNumber),
+ @"link": @(WKDataDetectorTypeLink),
+ @"address": @(WKDataDetectorTypeAddress),
+ @"calendarEvent": @(WKDataDetectorTypeCalendarEvent),
+ @"trackingNumber": @(WKDataDetectorTypeTrackingNumber),
+ @"flightNumber": @(WKDataDetectorTypeFlightNumber),
+ @"lookupSuggestion": @(WKDataDetectorTypeLookupSuggestion),
+ @"none": @(WKDataDetectorTypeNone),
+ @"all": @(WKDataDetectorTypeAll),
+ }), WKDataDetectorTypePhoneNumber, unsignedLongLongValue)
 #endif
 
 RCT_ENUM_CONVERTER(UIKeyboardAppearance, (@{

React/Views/RCTWKWebView.h

@@ -8,6 +8,7 @@
  */
 
 #import <React/RCTView.h>
+#import <WebKit/WebKit.h>
 
 @class RCTWKWebView;
 
@@ -30,6 +31,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) BOOL allowsInlineMediaPlayback;
 @property (nonatomic, assign) BOOL bounces;
 @property (nonatomic, assign) BOOL mediaPlaybackRequiresUserAction;
+@property (nonatomic, assign) WKDataDetectorTypes dataDetectorTypes;
 
 - (void)postMessage:(NSString *)message;
 - (void)injectJavaScript:(NSString *)script;

React/Views/RCTWKWebView.m

@@ -1,5 +1,4 @@
 #import "RCTWKWebView.h"
-#import <WebKit/WebKit.h>
 #import <React/RCTConvert.h>
 #import "RCTAutoInsetsProtocol.h"
 
@@ -43,6 +42,7 @@ - (void)didMoveToWindow
     wkWebViewConfig.mediaTypesRequiringUserActionForPlayback = _mediaPlaybackRequiresUserAction
       ? WKAudiovisualMediaTypeAll
       : WKAudiovisualMediaTypeNone;
+    wkWebViewConfig.dataDetectorTypes = _dataDetectorTypes;
 
     _webView = [[WKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig];
     _webView.scrollView.delegate = self;

React/Views/RCTWKWebViewManager.m

@@ -29,6 +29,8 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
 RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(dataDetectorTypes, WKDataDetectorTypes)
+
 /**
  * Expose methods to enable messaging the webview.
  */

React/Views/RCTWebViewManager.m

@@ -63,8 +63,8 @@ - (UIView *)view
 
 RCT_EXPORT_METHOD(goForward:(nonnull NSNumber *)reactTag)
 {
-  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-    id view = viewRegistry[reactTag];
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTWebView *> *viewRegistry) {
+    RCTWebView *view = viewRegistry[reactTag];
     if (![view isKindOfClass:[RCTWebView class]]) {
       RCTLogError(@"Invalid view returned from registry, expecting RCTWebView, got: %@", view);
     } else {