@javascriptcommon/react-native-webview 13.12.16

package/src/RNCWebViewNativeComponent.ts

@@ -0,0 +1,342 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import {
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+export type WebViewNativeEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+}>;
+export type WebViewCustomMenuSelectionEvent = Readonly<{
+  label: string;
+  key: string;
+  selectedText: string;
+}>;
+export type WebViewMessageEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+  data: string;
+}>;
+export type WebViewOpenWindowEvent = Readonly<{
+  targetUrl: string;
+}>;
+export type WebViewHttpErrorEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+  description: string;
+  statusCode: Int32;
+}>;
+
+export type WebViewErrorEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+  domain?: string;
+  code: Int32;
+  description: string;
+}>;
+
+export type WebViewNativeProgressEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+  progress: Double;
+}>;
+
+export type WebViewNavigationEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+  navigationType:
+    | 'click'
+    | 'formsubmit'
+    | 'backforward'
+    | 'reload'
+    | 'formresubmit'
+    | 'other';
+  mainDocumentURL?: string;
+}>;
+
+export type ShouldStartLoadRequestEvent = Readonly<{
+  url: string;
+  loading: boolean;
+  title: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  lockIdentifier: Double;
+  navigationType:
+    | 'click'
+    | 'formsubmit'
+    | 'backforward'
+    | 'reload'
+    | 'formresubmit'
+    | 'other';
+  mainDocumentURL?: string;
+  isTopFrame: boolean;
+}>;
+
+type ScrollEvent = Readonly<{
+  contentInset: {
+    bottom: Double;
+    left: Double;
+    right: Double;
+    top: Double;
+  };
+  contentOffset: {
+    y: Double;
+    x: Double;
+  };
+  contentSize: {
+    height: Double;
+    width: Double;
+  };
+  layoutMeasurement: {
+    height: Double;
+    width: Double;
+  };
+  targetContentOffset?: {
+    y: Double;
+    x: Double;
+  };
+  velocity?: {
+    y: Double;
+    x: Double;
+  };
+  zoomScale?: Double;
+  responderIgnoreScroll?: boolean;
+}>;
+
+type WebViewRenderProcessGoneEvent = Readonly<{
+  didCrash: boolean;
+}>;
+
+type WebViewDownloadEvent = Readonly<{
+  downloadUrl: string;
+}>;
+
+// type MenuItem = Readonly<{label: string, key: string}>;
+
+export interface NativeProps extends ViewProps {
+  // Android only
+  allowFileAccess?: boolean;
+  allowsProtectedMedia?: boolean;
+  allowsFullscreenVideo?: boolean;
+  androidLayerType?: WithDefault<'none' | 'software' | 'hardware', 'none'>;
+  cacheMode?: WithDefault<
+    | 'LOAD_DEFAULT'
+    | 'LOAD_CACHE_ELSE_NETWORK'
+    | 'LOAD_NO_CACHE'
+    | 'LOAD_CACHE_ONLY',
+    'LOAD_DEFAULT'
+  >;
+  domStorageEnabled?: boolean;
+  downloadingMessage?: string;
+  forceDarkOn?: boolean;
+  geolocationEnabled?: boolean;
+  lackPermissionToDownloadMessage?: string;
+  messagingModuleName: string;
+  minimumFontSize?: Int32;
+  mixedContentMode?: WithDefault<'never' | 'always' | 'compatibility', 'never'>;
+  nestedScrollEnabled?: boolean;
+  onContentSizeChange?: DirectEventHandler<WebViewNativeEvent>;
+  onRenderProcessGone?: DirectEventHandler<WebViewRenderProcessGoneEvent>;
+  overScrollMode?: string;
+  saveFormDataDisabled?: boolean;
+  scalesPageToFit?: boolean;
+  setBuiltInZoomControls?: boolean;
+  setDisplayZoomControls?: boolean;
+  setSupportMultipleWindows?: boolean;
+  textZoom?: Int32;
+  thirdPartyCookiesEnabled?: boolean;
+  // Workaround to watch if listener if defined
+  hasOnScroll?: boolean;
+  // !Android only
+
+  // iOS only
+  allowingReadAccessToURL?: string;
+  allowsBackForwardNavigationGestures?: boolean;
+  allowsInlineMediaPlayback?: boolean;
+  allowsPictureInPictureMediaPlayback?: boolean;
+  allowsAirPlayForMediaPlayback?: boolean;
+  allowsLinkPreview?: boolean;
+  automaticallyAdjustContentInsets?: boolean;
+  autoManageStatusBarEnabled?: boolean;
+  bounces?: boolean;
+  contentInset?: Readonly<{
+    top?: Double;
+    left?: Double;
+    bottom?: Double;
+    right?: Double;
+  }>;
+  contentInsetAdjustmentBehavior?: WithDefault<
+    'never' | 'automatic' | 'scrollableAxes' | 'always',
+    'never'
+  >;
+  contentMode?: WithDefault<
+    'recommended' | 'mobile' | 'desktop',
+    'recommended'
+  >;
+  dataDetectorTypes?: WithDefault<
+    ReadonlyArray<
+      | 'address'
+      | 'link'
+      | 'calendarEvent'
+      | 'trackingNumber'
+      | 'flightNumber'
+      | 'lookupSuggestion'
+      | 'phoneNumber'
+      | 'all'
+      | 'none'
+    >,
+    'phoneNumber'
+  >;
+  decelerationRate?: Double;
+  directionalLockEnabled?: boolean;
+  enableApplePay?: boolean;
+  hideKeyboardAccessoryView?: boolean;
+  keyboardDisplayRequiresUserAction?: boolean;
+  limitsNavigationsToAppBoundDomains?: boolean;
+  mediaCapturePermissionGrantType?: WithDefault<
+    | 'prompt'
+    | 'grant'
+    | 'deny'
+    | 'grantIfSameHostElsePrompt'
+    | 'grantIfSameHostElseDeny',
+    'prompt'
+  >;
+  pagingEnabled?: boolean;
+  pullToRefreshEnabled?: boolean;
+  refreshControlLightMode?: boolean;
+  scrollEnabled?: boolean;
+  sharedCookiesEnabled?: boolean;
+  textInteractionEnabled?: boolean;
+  useSharedProcessPool?: boolean;
+  onContentProcessDidTerminate?: DirectEventHandler<WebViewNativeEvent>;
+  onCustomMenuSelection?: DirectEventHandler<WebViewCustomMenuSelectionEvent>;
+  onFileDownload?: DirectEventHandler<WebViewDownloadEvent>;
+
+  menuItems?: ReadonlyArray<Readonly<{ label: string; key: string }>>;
+  suppressMenuItems?: Readonly<string>[];
+  // Workaround to watch if listener if defined
+  hasOnFileDownload?: boolean;
+  fraudulentWebsiteWarningEnabled?: boolean;
+  // !iOS only
+
+  allowFileAccessFromFileURLs?: boolean;
+  allowUniversalAccessFromFileURLs?: boolean;
+  applicationNameForUserAgent?: string;
+  basicAuthCredential?: Readonly<{
+    username: string;
+    password: string;
+  }>;
+  cacheEnabled?: boolean;
+  incognito?: boolean;
+  injectedJavaScript?: string;
+  injectedJavaScriptBeforeContentLoaded?: string;
+  injectedJavaScriptForMainFrameOnly?: boolean;
+  injectedJavaScriptBeforeContentLoadedForMainFrameOnly?: boolean;
+  javaScriptCanOpenWindowsAutomatically?: boolean;
+  javaScriptEnabled?: boolean;
+  webviewDebuggingEnabled?: boolean;
+  mediaPlaybackRequiresUserAction?: boolean;
+  messagingEnabled: boolean;
+  onLoadingError: DirectEventHandler<WebViewErrorEvent>;
+  onLoadingFinish: DirectEventHandler<WebViewNavigationEvent>;
+  onLoadingProgress: DirectEventHandler<WebViewNativeProgressEvent>;
+  onLoadingStart: DirectEventHandler<WebViewNavigationEvent>;
+  onHttpError: DirectEventHandler<WebViewHttpErrorEvent>;
+  onMessage: DirectEventHandler<WebViewMessageEvent>;
+  onOpenWindow?: DirectEventHandler<WebViewOpenWindowEvent>;
+  hasOnOpenWindowEvent?: boolean;
+  onScroll?: DirectEventHandler<ScrollEvent>;
+  onShouldStartLoadWithRequest: DirectEventHandler<ShouldStartLoadRequestEvent>;
+  showsHorizontalScrollIndicator?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+  newSource: Readonly<{
+    uri?: string;
+    method?: string;
+    body?: string;
+
+    headers?: ReadonlyArray<Readonly<{ name: string; value: string }>>;
+    html?: string;
+    baseUrl?: string;
+  }>;
+  userAgent?: string;
+  injectedJavaScriptObject?: string;
+}
+
+export interface NativeCommands {
+  goBack: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  goForward: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  reload: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  stopLoading: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  injectJavaScript: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    javascript: string
+  ) => void;
+  requestFocus: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  postMessage: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    data: string
+  ) => void;
+  // Android Only
+  loadUrl: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    url: string
+  ) => void;
+  clearFormData: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>
+  ) => void;
+  clearCache: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    includeDiskFiles: boolean
+  ) => void;
+  clearHistory: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  // !Android Only
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'goBack',
+    'goForward',
+    'reload',
+    'stopLoading',
+    'injectJavaScript',
+    'requestFocus',
+    'postMessage',
+    'loadUrl',
+    'clearFormData',
+    'clearCache',
+    'clearHistory',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'RNCWebView'
+) as HostComponent<NativeProps>;

package/src/WebView.android.tsx

@@ -0,0 +1,317 @@
+import React, {
+  forwardRef,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+import {
+  Image,
+  View,
+  ImageSourcePropType,
+  HostComponent,
+  NativeEventEmitter,
+} from 'react-native';
+
+import invariant from 'invariant';
+
+import RNCWebView, { Commands, NativeProps } from './RNCWebViewNativeComponent';
+import RNCWebViewModule from './NativeRNCWebViewModule';
+import {
+  defaultOriginWhitelist,
+  defaultRenderError,
+  defaultRenderLoading,
+  useWebViewLogic,
+} from './WebViewShared';
+import {
+  AndroidWebViewProps,
+  WebViewSourceUri,
+  type WebViewMessageEvent,
+  type ShouldStartLoadRequestEvent,
+} from './WebViewTypes';
+
+import styles from './WebView.styles';
+
+const { resolveAssetSource } = Image;
+
+const directEventEmitter = new NativeEventEmitter(RNCWebViewModule);
+
+/**
+ * A simple counter to uniquely identify WebView instances. Do not use this for anything else.
+ */
+let uniqueRef = 0;
+
+const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(
+  (
+    {
+      overScrollMode = 'always',
+      javaScriptEnabled = true,
+      thirdPartyCookiesEnabled = true,
+      scalesPageToFit = true,
+      allowsFullscreenVideo = false,
+      allowFileAccess = false,
+      saveFormDataDisabled = false,
+      cacheEnabled = true,
+      androidLayerType = 'none',
+      originWhitelist = defaultOriginWhitelist,
+      setSupportMultipleWindows = true,
+      setBuiltInZoomControls = true,
+      setDisplayZoomControls = false,
+      nestedScrollEnabled = false,
+      startInLoadingState,
+      onNavigationStateChange,
+      onLoadStart,
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadProgress,
+      onHttpError: onHttpErrorProp,
+      onRenderProcessGone: onRenderProcessGoneProp,
+      onMessage: onMessageProp,
+      onOpenWindow: onOpenWindowProp,
+      renderLoading,
+      renderError,
+      style,
+      containerStyle,
+      source,
+      nativeConfig,
+      onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+      injectedJavaScriptObject,
+      ...otherProps
+    },
+    ref
+  ) => {
+    const messagingModuleName = useRef<string>(
+      `WebViewMessageHandler${(uniqueRef += 1)}`
+    ).current;
+    const webViewRef = useRef<React.ComponentRef<
+      HostComponent<NativeProps>
+    > | null>(null);
+
+    const onShouldStartLoadWithRequestCallback = useCallback(
+      (shouldStart: boolean, url: string, lockIdentifier?: number) => {
+        if (lockIdentifier) {
+          RNCWebViewModule.shouldStartLoadWithLockIdentifier(
+            shouldStart,
+            lockIdentifier
+          );
+        } else if (shouldStart && webViewRef.current) {
+          Commands.loadUrl(webViewRef.current, url);
+        }
+      },
+      []
+    );
+
+    const {
+      onLoadingStart,
+      onShouldStartLoadWithRequest,
+      onMessage,
+      viewState,
+      setViewState,
+      lastErrorEvent,
+      onHttpError,
+      onLoadingError,
+      onLoadingFinish,
+      onLoadingProgress,
+      onOpenWindow,
+      onRenderProcessGone,
+    } = useWebViewLogic({
+      onNavigationStateChange,
+      onLoad,
+      onError,
+      onHttpErrorProp,
+      onLoadEnd,
+      onLoadProgress,
+      onLoadStart,
+      onRenderProcessGoneProp,
+      onMessageProp,
+      onOpenWindowProp,
+      startInLoadingState,
+      originWhitelist,
+      onShouldStartLoadWithRequestProp,
+      onShouldStartLoadWithRequestCallback,
+    });
+
+    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),
+        clearFormData: () =>
+          webViewRef.current && Commands.clearFormData(webViewRef.current),
+        clearCache: (includeDiskFiles: boolean) =>
+          webViewRef.current &&
+          Commands.clearCache(webViewRef.current, includeDiskFiles),
+        clearHistory: () =>
+          webViewRef.current && Commands.clearHistory(webViewRef.current),
+      }),
+      [setViewState, webViewRef]
+    );
+
+    useEffect(() => {
+      const onShouldStartLoadWithRequestSubscription =
+        directEventEmitter.addListener(
+          'onShouldStartLoadWithRequest',
+          (
+            event: ShouldStartLoadRequestEvent & {
+              messagingModuleName?: string;
+            }
+          ) => {
+            if (event.messagingModuleName === messagingModuleName) {
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              const { messagingModuleName: _, ...rest } = event;
+              onShouldStartLoadWithRequest(rest);
+            }
+          }
+        );
+
+      const onMessageSubscription = directEventEmitter.addListener(
+        'onMessage',
+        (event: WebViewMessageEvent & { messagingModuleName?: string }) => {
+          if (event.messagingModuleName === messagingModuleName) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { messagingModuleName: _, ...rest } = event;
+            onMessage(rest);
+          }
+        }
+      );
+
+      return () => {
+        onShouldStartLoadWithRequestSubscription.remove();
+        onMessageSubscription.remove();
+      };
+    }, [messagingModuleName, onMessage, onShouldStartLoadWithRequest]);
+
+    let otherView: ReactElement | undefined;
+    if (viewState === 'LOADING') {
+      otherView = (renderLoading || defaultRenderLoading)();
+    } else if (viewState === 'ERROR') {
+      invariant(
+        lastErrorEvent != null,
+        'lastErrorEvent expected to be non-null'
+      );
+      if (lastErrorEvent) {
+        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];
+
+    if (typeof source !== 'number' && source && 'method' in source) {
+      if (source.method === 'POST' && source.headers) {
+        console.warn(
+          'WebView: `source.headers` is not supported when using POST.'
+        );
+      } else if (source.method === 'GET' && source.body) {
+        console.warn('WebView: `source.body` is not supported when using GET.');
+      }
+    }
+
+    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}
+        messagingEnabled={typeof onMessageProp === 'function'}
+        messagingModuleName={messagingModuleName}
+        hasOnScroll={!!otherProps.onScroll}
+        onLoadingError={onLoadingError}
+        onLoadingFinish={onLoadingFinish}
+        onLoadingProgress={onLoadingProgress}
+        onLoadingStart={onLoadingStart}
+        onHttpError={onHttpError}
+        onRenderProcessGone={onRenderProcessGone}
+        onMessage={onMessage}
+        onOpenWindow={onOpenWindow}
+        hasOnOpenWindowEvent={onOpenWindowProp !== undefined}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        ref={webViewRef}
+        // TODO: find a better way to type this.
+        // @ts-expect-error source is old arch
+        source={sourceResolved}
+        newSource={newSource}
+        style={webViewStyles}
+        overScrollMode={overScrollMode}
+        javaScriptEnabled={javaScriptEnabled}
+        thirdPartyCookiesEnabled={thirdPartyCookiesEnabled}
+        scalesPageToFit={scalesPageToFit}
+        allowsFullscreenVideo={allowsFullscreenVideo}
+        allowFileAccess={allowFileAccess}
+        saveFormDataDisabled={saveFormDataDisabled}
+        cacheEnabled={cacheEnabled}
+        androidLayerType={androidLayerType}
+        setSupportMultipleWindows={setSupportMultipleWindows}
+        setBuiltInZoomControls={setBuiltInZoomControls}
+        setDisplayZoomControls={setDisplayZoomControls}
+        nestedScrollEnabled={nestedScrollEnabled}
+        injectedJavaScriptObject={JSON.stringify(injectedJavaScriptObject)}
+        {...nativeConfig?.props}
+      />
+    );
+
+    return (
+      <View style={webViewContainerStyle}>
+        {webView}
+        {otherView}
+      </View>
+    );
+  }
+);
+
+// native implementation should return "true" only for Android 5+
+const { isFileUploadSupported } = RNCWebViewModule;
+
+const WebView = Object.assign(WebViewComponent, { isFileUploadSupported });
+
+export default WebView;