@exodus/react-native-webview 11.26.1-exodus.9 → 13.16.0-exodus.0

package/src/WebView.macos.tsx

@@ -0,0 +1,252 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { Image, View, ImageSourcePropType, HostComponent } from 'react-native';
+import invariant from 'invariant';
+import RNCWebView, { Commands, NativeProps } from './RNCWebViewNativeComponent';
+import RNCWebViewModule from './NativeRNCWebViewModule';
+import {
+  defaultOriginWhitelist,
+  defaultDeeplinkWhitelist,
+  defaultRenderError,
+  defaultRenderLoading,
+  useWebViewLogic,
+} from './WebViewShared';
+import { MacOSWebViewProps, WebViewSourceUri } from './WebViewTypes';
+
+import styles from './WebView.styles';
+
+const { resolveAssetSource } = Image;
+
+const useWarnIfChanges = <T extends unknown>(value: T, name: string) => {
+  const ref = useRef(value);
+  if (ref.current !== value) {
+    console.warn(
+      `Changes to property ${name} do nothing after the initial render.`
+    );
+    ref.current = value;
+  }
+};
+
+const WebViewComponent = forwardRef<{}, MacOSWebViewProps>(
+  (
+    {
+      javaScriptEnabled = true,
+      cacheEnabled = true,
+      originWhitelist = defaultOriginWhitelist,
+      deeplinkWhitelist = defaultDeeplinkWhitelist,
+      useSharedProcessPool = true,
+      injectedJavaScript,
+      injectedJavaScriptBeforeContentLoaded,
+      startInLoadingState,
+      onNavigationStateChange,
+      onLoadStart,
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadProgress,
+      onHttpError: onHttpErrorProp,
+      onMessage: onMessageProp,
+      renderLoading,
+      renderError,
+      style,
+      containerStyle,
+      source,
+      nativeConfig,
+      allowsInlineMediaPlayback,
+      allowsPictureInPictureMediaPlayback = true,
+      allowsAirPlayForMediaPlayback,
+      mediaPlaybackRequiresUserAction,
+      incognito,
+      onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+      validateMeta,
+      validateData,
+      ...otherProps
+    },
+    ref
+  ) => {
+    const webViewRef = useRef<React.ComponentRef<
+      HostComponent<NativeProps>
+    > | null>(null);
+
+    const onShouldStartLoadWithRequestCallback = useCallback(
+      (shouldStart: boolean, _url: string, lockIdentifier = 0) => {
+        RNCWebViewModule.shouldStartLoadWithLockIdentifier(
+          !!shouldStart,
+          lockIdentifier
+        );
+      },
+      []
+    );
+
+    const {
+      onLoadingStart,
+      onShouldStartLoadWithRequest,
+      onMessage,
+      viewState,
+      setViewState,
+      lastErrorEvent,
+      onHttpError,
+      onLoadingError,
+      onLoadingFinish,
+      onLoadingProgress,
+      onContentProcessDidTerminate,
+    } = useWebViewLogic({
+      onNavigationStateChange,
+      onLoad,
+      onError,
+      onHttpErrorProp,
+      onLoadEnd,
+      onLoadProgress,
+      onLoadStart,
+      onMessageProp,
+      startInLoadingState,
+      originWhitelist,
+      deeplinkWhitelist,
+      onShouldStartLoadWithRequestProp,
+      onShouldStartLoadWithRequestCallback,
+      validateMeta,
+      validateData,
+    });
+
+    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),
+      }),
+      [setViewState, webViewRef]
+    );
+
+    useWarnIfChanges(allowsInlineMediaPlayback, 'allowsInlineMediaPlayback');
+    useWarnIfChanges(
+      allowsPictureInPictureMediaPlayback,
+      'allowsPictureInPictureMediaPlayback'
+    );
+    useWarnIfChanges(
+      allowsAirPlayForMediaPlayback,
+      'allowsAirPlayForMediaPlayback'
+    );
+    useWarnIfChanges(incognito, 'incognito');
+    useWarnIfChanges(
+      mediaPlaybackRequiresUserAction,
+      'mediaPlaybackRequiresUserAction'
+    );
+
+    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 webViewStyles = [styles.container, styles.webView, style];
+    const webViewContainerStyle = [styles.container, containerStyle];
+
+    const NativeWebView =
+      (nativeConfig?.component as typeof RNCWebView | undefined) || RNCWebView;
+
+    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}
+        javaScriptEnabled={javaScriptEnabled}
+        cacheEnabled={cacheEnabled}
+        useSharedProcessPool={useSharedProcessPool}
+        messagingEnabled={typeof onMessageProp === 'function'}
+        newSource={newSource}
+        onLoadingError={onLoadingError}
+        onLoadingFinish={onLoadingFinish}
+        onLoadingProgress={onLoadingProgress}
+        onLoadingStart={onLoadingStart}
+        onHttpError={onHttpError}
+        onMessage={onMessage}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        onContentProcessDidTerminate={onContentProcessDidTerminate}
+        injectedJavaScript={injectedJavaScript}
+        injectedJavaScriptBeforeContentLoaded={
+          injectedJavaScriptBeforeContentLoaded
+        }
+        allowsAirPlayForMediaPlayback={allowsAirPlayForMediaPlayback}
+        allowsInlineMediaPlayback={allowsInlineMediaPlayback}
+        allowsPictureInPictureMediaPlayback={
+          allowsPictureInPictureMediaPlayback
+        }
+        incognito={incognito}
+        mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
+        ref={webViewRef}
+        // @ts-expect-error old arch only
+        source={sourceResolved}
+        style={webViewStyles}
+        {...nativeConfig?.props}
+      />
+    );
+
+    return (
+      <View style={webViewContainerStyle}>
+        {webView}
+        {otherView}
+      </View>
+    );
+  }
+);
+
+// no native implementation for macOS, depends only on permissions
+const isFileUploadSupported: () => Promise<boolean> = async () => true;
+
+const WebView = Object.assign(WebViewComponent, { isFileUploadSupported });
+
+export default WebView;

package/src/WebView.styles.ts

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  loadingOrErrorView: {
+    position: 'absolute',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+    width: '100%',
+    backgroundColor: 'white',
+  },
+  loadingProgressBar: {
+    height: 20,
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 2,
+  },
+  errorTextTitle: {
+    fontSize: 15,
+    fontWeight: '500',
+    marginBottom: 10,
+  },
+  webView: {
+    backgroundColor: '#ffffff',
+  },
+  flexStart: {
+    alignSelf: 'flex-start',
+  },
+  colorRed: {
+    color: 'red',
+  },
+});
+
+export default styles;

package/src/WebView.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import {
+  IOSWebViewProps,
+  AndroidWebViewProps,
+  WindowsWebViewProps,
+} from './WebViewTypes';
+import styles from './WebView.styles';
+
+export type WebViewProps = IOSWebViewProps &
+  AndroidWebViewProps &
+  WindowsWebViewProps;
+
+// This "dummy" WebView is to render something for unsupported platforms,
+// like for example Expo SDK "web" platform.
+const WebView: React.FunctionComponent<WebViewProps> = () => (
+  <View style={styles.flexStart}>
+    <Text style={styles.colorRed}>
+      React Native WebView does not support this platform.
+    </Text>
+  </View>
+);
+
+export { WebView };
+export default WebView;

package/src/WebView.windows.tsx

@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Portions copyright for react-native-windows:
+ *
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { View, Image, ImageSourcePropType, NativeModules } from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import invariant from 'invariant';
+import { RCTWebView, RCTWebView2 } from './WebViewNativeComponent.windows';
+import {
+  useWebViewLogic,
+  defaultOriginWhitelist,
+  defaultDeeplinkWhitelist,
+  defaultRenderError,
+  defaultRenderLoading,
+} from './WebViewShared';
+import { NativeWebViewWindows, WindowsWebViewProps } from './WebViewTypes';
+
+import styles from './WebView.styles';
+
+const Commands = codegenNativeCommands({
+  supportedCommands: [
+    'goBack',
+    'goForward',
+    'reload',
+    'stopLoading',
+    'injectJavaScript',
+    'requestFocus',
+    'clearCache',
+    'postMessage',
+    'loadUrl',
+  ],
+});
+const { resolveAssetSource } = Image;
+
+const WebViewComponent = forwardRef<{}, WindowsWebViewProps>(
+  (
+    {
+      cacheEnabled = true,
+      originWhitelist = defaultOriginWhitelist,
+      deeplinkWhitelist = defaultDeeplinkWhitelist,
+      startInLoadingState,
+      onNavigationStateChange,
+      onLoadStart,
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadProgress,
+      onOpenWindow: onOpenWindowProp,
+      onSourceChanged,
+      onHttpError: onHttpErrorProp,
+      onMessage: onMessageProp,
+      renderLoading,
+      renderError,
+      style,
+      containerStyle,
+      source,
+      nativeConfig,
+      onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+      useWebView2,
+      validateMeta,
+      validateData,
+      ...otherProps
+    },
+    ref
+  ) => {
+    const webViewRef = useRef<NativeWebViewWindows | null>(null);
+
+    const RCTWebViewString = useWebView2 ? 'RCTWebView2' : 'RCTWebView';
+
+    const onShouldStartLoadWithRequestCallback = useCallback(
+      (shouldStart: boolean, url: string, lockIdentifier?: number) => {
+        if (lockIdentifier) {
+          if (RCTWebViewString === 'RCTWebView') {
+            NativeModules.RCTWebView.onShouldStartLoadWithRequestCallback(
+              shouldStart,
+              lockIdentifier
+            );
+          } else {
+            NativeModules.RCTWebView2.onShouldStartLoadWithRequestCallback(
+              shouldStart,
+              lockIdentifier
+            );
+          }
+        } else if (shouldStart) {
+          Commands.loadUrl(webViewRef, url);
+        }
+      },
+      [RCTWebViewString]
+    );
+
+    const {
+      onLoadingStart,
+      onShouldStartLoadWithRequest,
+      onMessage,
+      viewState,
+      setViewState,
+      lastErrorEvent,
+      onHttpError,
+      onLoadingError,
+      onLoadingFinish,
+      onLoadingProgress,
+      onOpenWindow,
+    } = useWebViewLogic({
+      onNavigationStateChange,
+      onLoad,
+      onError,
+      onHttpErrorProp,
+      onLoadEnd,
+      onLoadProgress,
+      onLoadStart,
+      onMessageProp,
+      startInLoadingState,
+      originWhitelist,
+      deeplinkWhitelist,
+      onShouldStartLoadWithRequestProp,
+      onShouldStartLoadWithRequestCallback,
+      onOpenWindowProp,
+      validateMeta,
+      validateData,
+    });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        goForward: () => Commands.goForward(webViewRef.current),
+        goBack: () => Commands.goBack(webViewRef.current),
+        reload: () => {
+          setViewState('LOADING');
+          Commands.reload(webViewRef.current);
+        },
+        stopLoading: () => Commands.stopLoading(webViewRef.current),
+        postMessage: (data: string) =>
+          Commands.postMessage(webViewRef.current, data),
+        injectJavaScript: (data: string) =>
+          Commands.injectJavaScript(webViewRef.current, data),
+        requestFocus: () => Commands.requestFocus(webViewRef.current),
+        clearCache: () => Commands.clearCache(webViewRef.current),
+        loadUrl: (url: string) => Commands.loadUrl(webViewRef.current, url),
+      }),
+      [setViewState, webViewRef]
+    );
+
+    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,
+        lastErrorEvent.description
+      );
+    } else if (viewState !== 'IDLE') {
+      console.error(`RNCWebView invalid state encountered: ${viewState}`);
+    }
+
+    const webViewStyles = [styles.container, styles.webView, style];
+    const webViewContainerStyle = [styles.container, containerStyle];
+
+    const NativeWebView = useWebView2 ? RCTWebView2 : RCTWebView;
+
+    const webView = (
+      <NativeWebView
+        key="webViewKey"
+        {...otherProps}
+        messagingEnabled={typeof onMessageProp === 'function'}
+        linkHandlingEnabled={typeof onOpenWindowProp === 'function'}
+        onLoadingError={onLoadingError}
+        onLoadingFinish={onLoadingFinish}
+        onLoadingProgress={onLoadingProgress}
+        onLoadingStart={onLoadingStart}
+        onHttpError={onHttpError}
+        onMessage={onMessage}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        onOpenWindow={onOpenWindow}
+        onSourceChanged={onSourceChanged}
+        ref={webViewRef}
+        // TODO: find a better way to type this.
+        source={resolveAssetSource(source as ImageSourcePropType)}
+        style={webViewStyles}
+        cacheEnabled={cacheEnabled}
+        {...nativeConfig?.props}
+      />
+    );
+
+    return (
+      <View style={webViewContainerStyle}>
+        {webView}
+        {otherView}
+      </View>
+    );
+  }
+);
+
+// native implementation should return "true" only for Android 5+
+const isFileUploadSupported: () => Promise<boolean> = async () => false;
+
+const WebView = Object.assign(WebViewComponent, { isFileUploadSupported });
+
+export default WebView;

package/src/WebViewNativeComponent.macos.ts

@@ -0,0 +1,7 @@
+import { requireNativeComponent } from 'react-native';
+import type { NativeWebViewMacOS } from './WebViewTypes';
+
+const RNCWebView: typeof NativeWebViewMacOS =
+  requireNativeComponent('RNCWebView');
+
+export default RNCWebView;

package/src/WebViewNativeComponent.windows.ts

@@ -0,0 +1,8 @@
+import { requireNativeComponent } from 'react-native';
+import type { NativeWebViewWindows } from './WebViewTypes';
+
+export const RCTWebView: typeof NativeWebViewWindows =
+  requireNativeComponent('RCTWebView');
+
+export const RCTWebView2: typeof NativeWebViewWindows =
+  requireNativeComponent('RCTWebView2');