diff --git a/Libraries/Components/WKWebView/WKWebView.ios.js b/Libraries/Components/WKWebView/WKWebView.ios.js index d097ea48ef..c13d463a32 100644 --- a/Libraries/Components/WKWebView/WKWebView.ios.js +++ b/Libraries/Components/WKWebView/WKWebView.ios.js @@ -17,12 +17,18 @@ const RCTWKWebView = requireNativeComponent('RCTWKWebView'); type RCTWKWebViewProps = { allowsInlineMediaPlayback?: boolean, + mediaPlaybackRequiresUserAction?: boolean, }; class WKWebView extends React.Component { componentWillReceiveProps(nextProps: RCTWKWebViewProps) { - if (this.props.allowsInlineMediaPlayback !== nextProps.allowsInlineMediaPlayback) { - console.error('Changes to property allowsInlineMediaPlayback do nothing after the initial render.'); + this.showRedboxOnPropChanges(nextProps, 'allowsInlineMediaPlayback'); + this.showRedboxOnPropChanges(nextProps, 'mediaPlaybackRequiresUserAction'); + } + + showRedboxOnPropChanges(nextProps: RCTWKWebViewProps, propName: string) { + if (this.props[propName] !== nextProps[propName]) { + console.error(`Changes to property ${propName} do nothing after the initial render.`); } } diff --git a/React/Views/RCTWKWebView.h b/React/Views/RCTWKWebView.h index b19b9d10f2..9b12d793d0 100644 --- a/React/Views/RCTWKWebView.h +++ b/React/Views/RCTWKWebView.h @@ -29,6 +29,7 @@ shouldStartLoadForRequest:(NSMutableDictionary *)request @property (nonatomic, assign) CGFloat decelerationRate; @property (nonatomic, assign) BOOL allowsInlineMediaPlayback; @property (nonatomic, assign) BOOL bounces; +@property (nonatomic, assign) BOOL mediaPlaybackRequiresUserAction; - (void)postMessage:(NSString *)message; - (void)injectJavaScript:(NSString *)script; diff --git a/React/Views/RCTWKWebView.m b/React/Views/RCTWKWebView.m index 31ba395201..e6c2251b70 100644 --- a/React/Views/RCTWKWebView.m +++ b/React/Views/RCTWKWebView.m @@ -40,6 +40,9 @@ static NSString *const MessageHanderName = @"ReactNative"; wkWebViewConfig.userContentController = [WKUserContentController new]; [wkWebViewConfig.userContentController addScriptMessageHandler: self name: MessageHanderName]; wkWebViewConfig.allowsInlineMediaPlayback = _allowsInlineMediaPlayback; + wkWebViewConfig.mediaTypesRequiringUserActionForPlayback = _mediaPlaybackRequiresUserAction + ? WKAudiovisualMediaTypeAll + : WKAudiovisualMediaTypeNone; _webView = [[WKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig]; _webView.scrollView.delegate = self; diff --git a/React/Views/RCTWKWebViewManager.m b/React/Views/RCTWKWebViewManager.m index eef5b4f061..5f6be7e9ae 100644 --- a/React/Views/RCTWKWebViewManager.m +++ b/React/Views/RCTWKWebViewManager.m @@ -28,7 +28,7 @@ RCT_EXPORT_VIEW_PROPERTY(onLoadingError, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString) RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL) - +RCT_EXPORT_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, BOOL) /** * Expose methods to enable messaging the webview. */