@exodus/react-native-webview 13.16.0-exodus.3 → 13.16.0-exodus.5

package/src/WebView.ios.tsx

@@ -31,6 +31,7 @@ import {
   WebViewSourceUri,
 } from './WebViewTypes';
 
+import validateProps from './validation';
 import styles from './WebView.styles';
 
 const { resolveAssetSource } = Image;
@@ -72,276 +73,242 @@ const useWarnIfChanges = <T extends unknown>(value: T, name: string) => {
   }
 };
 
-const WebViewComponent = forwardRef<{}, IOSWebViewProps>(
-  (
-    {
-      fraudulentWebsiteWarningEnabled = true,
-      javaScriptEnabled = true,
-      cacheEnabled = true,
-      originWhitelist = defaultOriginWhitelist,
-      deeplinkWhitelist = defaultDeeplinkWhitelist,
-      textInteractionEnabled = true,
-      injectedJavaScript,
-      injectedJavaScriptBeforeContentLoaded,
-      injectedJavaScriptForMainFrameOnly = true,
-      injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true,
-      injectedJavaScriptObject,
-      startInLoadingState,
-      onNavigationStateChange,
-      onLoadStart,
-      onError,
-      onLoad,
-      onLoadEnd,
-      onLoadProgress,
-      onContentProcessDidTerminate: onContentProcessDidTerminateProp,
-      onFileDownload,
-      onHttpError: onHttpErrorProp,
-      onMessage: onMessageProp,
-      onOpenWindow: onOpenWindowProp,
-      renderLoading,
-      renderError,
-      style,
-      containerStyle,
-      source,
-      nativeConfig,
-      allowsPictureInPictureMediaPlayback = true,
-      allowsAirPlayForMediaPlayback,
-      incognito,
-      decelerationRate: decelerationRateProp,
-      onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
-      validateMeta,
-      validateData,
-      minimumIOSVersion,
-      unsupportedVersionComponent: UnsupportedVersionComponent,
-      ...otherProps
-    },
-    ref
-  ) => {
-    const webViewRef = useRef<React.ComponentRef<
-      HostComponent<NativeProps>
-    > | null>(null);
+const WebViewComponent = forwardRef<{}, IOSWebViewProps>((props, ref) => {
+  // Exodus: Validate props at runtime
+  validateProps(props);
 
-    const onShouldStartLoadWithRequestCallback = useCallback(
-      (shouldStart: boolean, _url: string, lockIdentifier = 0) => {
-        RNCWebViewModule.shouldStartLoadWithLockIdentifier(
-          shouldStart,
-          lockIdentifier
-        );
-      },
-      []
-    );
+  const {
+    fraudulentWebsiteWarningEnabled = true,
+    javaScriptEnabled = true,
+    cacheEnabled = true,
+    originWhitelist = defaultOriginWhitelist,
+    deeplinkWhitelist = defaultDeeplinkWhitelist,
+    textInteractionEnabled = true,
+    injectedJavaScript,
+    injectedJavaScriptBeforeContentLoaded,
+    injectedJavaScriptObject,
+    startInLoadingState,
+    onNavigationStateChange,
+    onLoadStart,
+    onError,
+    onLoad,
+    onLoadEnd,
+    onLoadProgress,
+    onContentProcessDidTerminate: onContentProcessDidTerminateProp,
+    onMessage: onMessageProp,
+    onOpenWindow: onOpenWindowProp,
+    renderLoading,
+    renderError,
+    style,
+    containerStyle,
+    source,
+    allowsPictureInPictureMediaPlayback = true,
+    incognito,
+    decelerationRate: decelerationRateProp,
+    onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+    validateMeta,
+    validateData,
+    minimumIOSVersion,
+    unsupportedVersionComponent: UnsupportedVersionComponent,
+    ...otherProps
+  } = props;
 
-    const {
-      onLoadingStart,
-      onShouldStartLoadWithRequest,
-      onMessage,
-      viewState,
-      setViewState,
-      lastErrorEvent,
-      onHttpError,
-      onLoadingError,
-      onLoadingFinish,
-      onLoadingProgress,
-      onOpenWindow,
-      onContentProcessDidTerminate,
-    } = useWebViewLogic({
-      onNavigationStateChange,
-      onLoad,
-      onError,
-      onHttpErrorProp,
-      onLoadEnd,
-      onLoadProgress,
-      onLoadStart,
-      onMessageProp,
-      onOpenWindowProp,
-      startInLoadingState,
-      originWhitelist,
-      deeplinkWhitelist,
-      onShouldStartLoadWithRequestProp,
-      onShouldStartLoadWithRequestCallback,
-      onContentProcessDidTerminateProp,
-      validateMeta,
-      validateData,
-    });
+  const webViewRef = useRef<React.ComponentRef<
+    HostComponent<NativeProps>
+  > | null>(null);
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        goForward: () =>
-          webViewRef.current && Commands.goForward(webViewRef.current),
-        goBack: () => webViewRef.current && Commands.goBack(webViewRef.current),
-        reload: () => {
-          setViewState('LOADING');
-          if (webViewRef.current) {
-            Commands.reload(webViewRef.current);
-          }
-        },
-        stopLoading: () =>
-          webViewRef.current && Commands.stopLoading(webViewRef.current),
-        postMessage: (data: string) =>
-          webViewRef.current && Commands.postMessage(webViewRef.current, data),
-        injectJavaScript: (data: string) =>
-          webViewRef.current &&
-          Commands.injectJavaScript(webViewRef.current, data),
-        requestFocus: () =>
-          webViewRef.current && Commands.requestFocus(webViewRef.current),
-        clearCache: (includeDiskFiles: boolean) =>
-          webViewRef.current &&
-          Commands.clearCache(webViewRef.current, includeDiskFiles),
-      }),
-      [setViewState, webViewRef]
-    );
+  const onShouldStartLoadWithRequestCallback = useCallback(
+    (shouldStart: boolean, _url: string, lockIdentifier = 0) => {
+      RNCWebViewModule.shouldStartLoadWithLockIdentifier(
+        shouldStart,
+        lockIdentifier
+      );
+    },
+    []
+  );
 
-    useWarnIfChanges(
-      securityAllowsInlineMediaPlayback,
-      'allowsInlineMediaPlayback'
-    );
-    useWarnIfChanges(
-      allowsPictureInPictureMediaPlayback,
-      'allowsPictureInPictureMediaPlayback'
-    );
-    useWarnIfChanges(
-      allowsAirPlayForMediaPlayback,
-      'allowsAirPlayForMediaPlayback'
-    );
-    useWarnIfChanges(incognito, 'incognito');
-    useWarnIfChanges(
-      securityMediaPlaybackRequiresUserAction,
-      'mediaPlaybackRequiresUserAction'
-    );
-    useWarnIfChanges(securityDataDetectorTypes, 'dataDetectorTypes');
+  const {
+    onLoadingStart,
+    onShouldStartLoadWithRequest,
+    onMessage,
+    viewState,
+    setViewState,
+    lastErrorEvent,
+    onLoadingError,
+    onLoadingFinish,
+    onLoadingProgress,
+    onOpenWindow,
+    onContentProcessDidTerminate,
+  } = useWebViewLogic({
+    onNavigationStateChange,
+    onLoad,
+    onError,
+    onLoadEnd,
+    onLoadProgress,
+    onLoadStart,
+    onMessageProp,
+    onOpenWindowProp,
+    startInLoadingState,
+    originWhitelist,
+    deeplinkWhitelist,
+    onShouldStartLoadWithRequestProp,
+    onShouldStartLoadWithRequestCallback,
+    onContentProcessDidTerminateProp,
+    validateMeta,
+    validateData,
+  });
 
-    // Exodus: Check iOS version against minimum requirements
-    const iosVersion = String(Platform.Version);
-    const passesMinimum = minimumIOSVersion
-      ? versionPasses(iosVersion, minimumIOSVersion)
-      : true;
-    const passesHardMinimum = versionPasses(iosVersion, hardMinimumIOSVersion);
+  useImperativeHandle(
+    ref,
+    () => ({
+      goForward: () =>
+        webViewRef.current && Commands.goForward(webViewRef.current),
+      goBack: () => webViewRef.current && Commands.goBack(webViewRef.current),
+      reload: () => {
+        setViewState('LOADING');
+        if (webViewRef.current) {
+          Commands.reload(webViewRef.current);
+        }
+      },
+      stopLoading: () =>
+        webViewRef.current && Commands.stopLoading(webViewRef.current),
+      postMessage: (data: string) =>
+        webViewRef.current && Commands.postMessage(webViewRef.current, data),
+      requestFocus: () =>
+        webViewRef.current && Commands.requestFocus(webViewRef.current),
+      clearCache: (includeDiskFiles: boolean) =>
+        webViewRef.current &&
+        Commands.clearCache(webViewRef.current, includeDiskFiles),
+    }),
+    [setViewState, webViewRef]
+  );
 
-    if (!passesMinimum || !passesHardMinimum) {
-      if (UnsupportedVersionComponent) {
-        return <UnsupportedVersionComponent />;
-      }
-      return (
-        <View style={{ alignSelf: 'flex-start' }}>
-          <Text style={{ color: 'red' }}>
-            iOS version is outdated and insecure. Update it to continue.
-          </Text>
-        </View>
-      );
-    }
+  useWarnIfChanges(
+    securityAllowsInlineMediaPlayback,
+    'allowsInlineMediaPlayback'
+  );
+  useWarnIfChanges(
+    allowsPictureInPictureMediaPlayback,
+    'allowsPictureInPictureMediaPlayback'
+  );
+  useWarnIfChanges(incognito, 'incognito');
+  useWarnIfChanges(
+    securityMediaPlaybackRequiresUserAction,
+    'mediaPlaybackRequiresUserAction'
+  );
+  useWarnIfChanges(securityDataDetectorTypes, 'dataDetectorTypes');
 
-    let otherView = null;
-    if (viewState === 'LOADING') {
-      otherView = (renderLoading || defaultRenderLoading)();
-    } else if (viewState === 'ERROR') {
-      invariant(
-        lastErrorEvent != null,
-        'lastErrorEvent expected to be non-null'
-      );
-      otherView = (renderError || defaultRenderError)(
-        lastErrorEvent?.domain,
-        lastErrorEvent?.code ?? 0,
-        lastErrorEvent?.description ?? ''
-      );
-    } else if (viewState !== 'IDLE') {
-      console.error(`RNCWebView invalid state encountered: ${viewState}`);
+  // Exodus: Check iOS version against minimum requirements
+  const iosVersion = String(Platform.Version);
+  const passesMinimum = minimumIOSVersion
+    ? versionPasses(iosVersion, minimumIOSVersion)
+    : true;
+  const passesHardMinimum = versionPasses(iosVersion, hardMinimumIOSVersion);
+
+  if (!passesMinimum || !passesHardMinimum) {
+    if (UnsupportedVersionComponent) {
+      return <UnsupportedVersionComponent />;
     }
+    return (
+      <View style={{ alignSelf: 'flex-start' }}>
+        <Text style={{ color: 'red' }}>
+          iOS version is outdated and insecure. Update it to continue.
+        </Text>
+      </View>
+    );
+  }
 
-    const webViewStyles = [styles.container, styles.webView, style];
-    const webViewContainerStyle = [styles.container, containerStyle];
+  let otherView = null;
+  if (viewState === 'LOADING') {
+    otherView = (renderLoading || defaultRenderLoading)();
+  } else if (viewState === 'ERROR') {
+    invariant(lastErrorEvent != null, 'lastErrorEvent expected to be non-null');
+    otherView = (renderError || defaultRenderError)(
+      lastErrorEvent?.domain,
+      lastErrorEvent?.code ?? 0,
+      lastErrorEvent?.description ?? ''
+    );
+  } else if (viewState !== 'IDLE') {
+    console.error(`RNCWebView invalid state encountered: ${viewState}`);
+  }
 
-    const decelerationRate = processDecelerationRate(decelerationRateProp);
+  const webViewStyles = [styles.container, styles.webView, style];
+  const webViewContainerStyle = [styles.container, containerStyle];
 
-    const NativeWebView =
-      (nativeConfig?.component as typeof RNCWebView | undefined) || RNCWebView;
+  const decelerationRate = processDecelerationRate(decelerationRateProp);
 
-    const sourceResolved = resolveAssetSource(source as ImageSourcePropType);
-    const newSource =
-      typeof sourceResolved === 'object'
-        ? Object.entries(sourceResolved as WebViewSourceUri).reduce(
-            (prev, [currKey, currValue]) => {
-              return {
-                ...prev,
-                [currKey]:
-                  currKey === 'headers' &&
-                  currValue &&
-                  typeof currValue === 'object'
-                    ? Object.entries(currValue).map(([key, value]) => {
-                        return {
-                          name: key,
-                          value,
-                        };
-                      })
-                    : currValue,
-              };
-            },
-            {}
-          )
-        : sourceResolved;
+  const sourceResolved = resolveAssetSource(source as ImageSourcePropType);
+  const newSource =
+    typeof sourceResolved === 'object'
+      ? Object.entries(sourceResolved as WebViewSourceUri).reduce(
+          (prev, [currKey, currValue]) => {
+            return {
+              ...prev,
+              [currKey]:
+                currKey === 'headers' &&
+                currValue &&
+                typeof currValue === 'object'
+                  ? Object.entries(currValue).map(([key, value]) => {
+                      return {
+                        name: key,
+                        value,
+                      };
+                    })
+                  : currValue,
+            };
+          },
+          {}
+        )
+      : sourceResolved;
 
-    const webView = (
-      <NativeWebView
-        key="webViewKey"
-        {...otherProps}
-        fraudulentWebsiteWarningEnabled={fraudulentWebsiteWarningEnabled}
-        javaScriptEnabled={javaScriptEnabled}
-        cacheEnabled={cacheEnabled}
-        useSharedProcessPool={securityUseSharedProcessPool}
-        sharedCookiesEnabled={securitySharedCookiesEnabled}
-        enableApplePay={securityEnableApplePay}
-        textInteractionEnabled={textInteractionEnabled}
-        decelerationRate={decelerationRate}
-        messagingEnabled={typeof onMessageProp === 'function'}
-        messagingModuleName="" // android ONLY
-        onLoadingError={onLoadingError}
-        onLoadingFinish={onLoadingFinish}
-        onLoadingProgress={onLoadingProgress}
-        onFileDownload={onFileDownload}
-        onLoadingStart={onLoadingStart}
-        onHttpError={onHttpError}
-        onMessage={onMessage}
-        onOpenWindow={onOpenWindowProp && onOpenWindow}
-        hasOnOpenWindowEvent={onOpenWindowProp !== undefined}
-        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-        onContentProcessDidTerminate={onContentProcessDidTerminate}
-        injectedJavaScript={injectedJavaScript}
-        injectedJavaScriptBeforeContentLoaded={
-          injectedJavaScriptBeforeContentLoaded
-        }
-        injectedJavaScriptForMainFrameOnly={injectedJavaScriptForMainFrameOnly}
-        injectedJavaScriptBeforeContentLoadedForMainFrameOnly={
-          injectedJavaScriptBeforeContentLoadedForMainFrameOnly
-        }
-        injectedJavaScriptObject={JSON.stringify(injectedJavaScriptObject)}
-        dataDetectorTypes={securityDataDetectorTypes}
-        allowsAirPlayForMediaPlayback={allowsAirPlayForMediaPlayback}
-        allowsInlineMediaPlayback={securityAllowsInlineMediaPlayback}
-        allowsPictureInPictureMediaPlayback={
-          allowsPictureInPictureMediaPlayback
-        }
-        incognito={incognito}
-        mediaPlaybackRequiresUserAction={
-          securityMediaPlaybackRequiresUserAction
-        }
-        newSource={newSource}
-        style={webViewStyles}
-        hasOnFileDownload={!!onFileDownload}
-        ref={webViewRef}
-        // @ts-expect-error source prop for old arch compatibility
-        source={sourceResolved}
-        {...nativeConfig?.props}
-      />
-    );
+  const webView = (
+    <RNCWebView
+      key="webViewKey"
+      {...otherProps}
+      fraudulentWebsiteWarningEnabled={fraudulentWebsiteWarningEnabled}
+      javaScriptEnabled={javaScriptEnabled}
+      cacheEnabled={cacheEnabled}
+      useSharedProcessPool={securityUseSharedProcessPool}
+      sharedCookiesEnabled={securitySharedCookiesEnabled}
+      enableApplePay={securityEnableApplePay}
+      textInteractionEnabled={textInteractionEnabled}
+      decelerationRate={decelerationRate}
+      messagingEnabled={typeof onMessageProp === 'function'}
+      messagingModuleName="" // android ONLY
+      onLoadingError={onLoadingError}
+      onLoadingFinish={onLoadingFinish}
+      onLoadingProgress={onLoadingProgress}
+      onLoadingStart={onLoadingStart}
+      onMessage={onMessage}
+      onOpenWindow={onOpenWindowProp && onOpenWindow}
+      hasOnOpenWindowEvent={onOpenWindowProp !== undefined}
+      onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+      onContentProcessDidTerminate={onContentProcessDidTerminate}
+      injectedJavaScript={injectedJavaScript}
+      injectedJavaScriptBeforeContentLoaded={
+        injectedJavaScriptBeforeContentLoaded
+      }
+      injectedJavaScriptObject={JSON.stringify(injectedJavaScriptObject)}
+      dataDetectorTypes={securityDataDetectorTypes}
+      allowsInlineMediaPlayback={securityAllowsInlineMediaPlayback}
+      allowsPictureInPictureMediaPlayback={allowsPictureInPictureMediaPlayback}
+      incognito={incognito}
+      mediaPlaybackRequiresUserAction={securityMediaPlaybackRequiresUserAction}
+      newSource={newSource}
+      style={webViewStyles}
+      ref={webViewRef}
+      // @ts-expect-error source prop for old arch compatibility
+      source={sourceResolved}
+    />
+  );
 
-    return (
-      <View style={webViewContainerStyle}>
-        {webView}
-        {otherView}
-      </View>
-    );
-  }
-);
+  return (
+    <View style={webViewContainerStyle}>
+      {webView}
+      {otherView}
+    </View>
+  );
+});
 
 // no native implementation for iOS, depends only on permissions
 const isFileUploadSupported: () => Promise<boolean> = async () => true;

package/src/WebView.tsx

@@ -1,15 +1,9 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import {
-  IOSWebViewProps,
-  AndroidWebViewProps,
-  WindowsWebViewProps,
-} from './WebViewTypes';
+import { IOSWebViewProps, AndroidWebViewProps } from './WebViewTypes';
 import styles from './WebView.styles';
 
-export type WebViewProps = IOSWebViewProps &
-  AndroidWebViewProps &
-  WindowsWebViewProps;
+export type WebViewProps = IOSWebViewProps & AndroidWebViewProps;
 
 // This "dummy" WebView is to render something for unsupported platforms,
 // like for example Expo SDK "web" platform.

package/src/WebViewShared.tsx

@@ -6,7 +6,6 @@ import {
   ShouldStartLoadRequestEvent,
   WebViewError,
   WebViewErrorEvent,
-  WebViewHttpErrorEvent,
   WebViewMessage,
   WebViewMessageEvent,
   WebViewNavigation,
@@ -181,6 +180,8 @@ export {
   createOnShouldStartLoadWithRequest,
   defaultRenderLoading,
   defaultRenderError,
+  passesWhitelist,
+  compileWhitelist,
 };
 
 export const useWebViewLogic = ({
@@ -192,7 +193,6 @@ export const useWebViewLogic = ({
   onLoadEnd,
   onError,
   onLoadSubResourceError,
-  onHttpErrorProp,
   onMessageProp,
   onOpenWindowProp,
   onRenderProcessGoneProp,
@@ -212,7 +212,6 @@ export const useWebViewLogic = ({
   onLoadEnd?: (event: WebViewNavigationEvent | WebViewErrorEvent) => void;
   onError?: (event: WebViewErrorEvent) => void;
   onLoadSubResourceError?: (event: WebViewErrorEvent) => void;
-  onHttpErrorProp?: (event: WebViewHttpErrorEvent) => void;
   onMessageProp?: (event: WebViewMessage) => void;
   onOpenWindowProp?: (event: WebViewOpenWindowEvent) => void;
   onRenderProcessGoneProp?: (event: WebViewRenderProcessGoneEvent) => void;
@@ -301,13 +300,6 @@ export const useWebViewLogic = ({
     [onLoadSubResourceError]
   );
 
-  const onHttpError = useCallback(
-    (event: WebViewHttpErrorEvent) => {
-      onHttpErrorProp?.(event);
-    },
-    [onHttpErrorProp]
-  );
-
   // Android Only
   const onRenderProcessGone = useCallback(
     (event: WebViewRenderProcessGoneEvent) => {
@@ -409,7 +401,6 @@ export const useWebViewLogic = ({
     onLoadingError,
     onLoadingSubResourceError,
     onLoadingFinish,
-    onHttpError,
     onRenderProcessGone,
     onContentProcessDidTerminate,
     onMessage,