feat(iframe-config): new config option webViewProps

Author: jsamr

packages/iframe-plugin/src/HTMLIframe.tsx

@@ -23,9 +23,19 @@ export interface HTMLIframeConfig {
    * When the iframe attribute width is wider than the contentWidth, scales
    * down the viewport so that it doesn't overflows horizontally.
    *
+   * @remarks Although it looks like the eponymous `WebView` prop, it works
+   * both on iOS and Android.
+   *
    * @defaultvalue false
    */
-  scalesPageToFit: boolean;
+  scalesPageToFit?: boolean;
+  /**
+   * Any props you'd like to pass to the `WebView` component.
+   *
+   * @remarks
+   * `source` and `javascriptEnabled` will be ignored and overriden.
+   */
+  webViewProps?: any;
 }
 
 /**
@@ -90,8 +100,7 @@ export default function HTMLIframe({
       onDOMLinkPress,
       style,
       source,
-      testID: 'iframe',
-      allowsFullscreenVideo: true
+      testID: 'iframe'
     }
   });
   return React.createElement(WebView, webViewProps);

packages/iframe-plugin/src/extractHtmlIframeProps.ts

@@ -11,6 +11,12 @@ function normalizeUri(uri: string): string {
   return uri.startsWith('//') ? `https:${uri}` : uri;
 }
 
+const defaultIframeConfig: HTMLIframeConfig = {
+  webViewProps: {
+    allowsFullscreenVideo: true
+  }
+};
+
 /**
  * Extract props for the HTMLIframe component from renderer function arguments.
  * This function is especially usefull for custom iframe renderers.
@@ -38,8 +44,15 @@ export default function extractHtmlIframeProps(
     renderersProps: { iframe: globalIframeConfig }
   } = passProps;
   const resolvedConfig = {
+    ...defaultIframeConfig,
     ...globalIframeConfig,
-    ...iframeConfig
+    ...iframeConfig,
+    webViewProps: {
+      ...defaultWebViewProps,
+      ...defaultIframeConfig.webViewProps,
+      ...globalIframeConfig?.webViewProps,
+      ...iframeConfig?.webViewProps
+    }
   };
   const resolvedContentWidth =
     typeof contentWidth === 'number'
@@ -92,10 +105,6 @@ export default function extractHtmlIframeProps(
     htmlAttribs,
     scaleFactor,
     style: [restStyle, { width: printWidth, height: printHeight }],
-    webViewProps: {
-      ...defaultWebViewProps,
-      ...resolvedConfig.webViewProps
-    },
     WebView
   };
 }