@exodus/react-native-webview 11.26.1-exodus.7 → 11.26.1-exodus.9

package/src/WebView.ios.tsx

@@ -1,221 +0,0 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import {
-  Text,
-  View,
-  NativeModules,
-  Platform,
-} from 'react-native';
-import invariant from 'invariant';
-
-// @ts-expect-error react-native doesn't have this type
-import codegenNativeCommandsUntyped from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import RNCWebView from "./WebViewNativeComponent.ios";
-import {
-  defaultOriginWhitelist,
-  defaultRenderError,
-  defaultRenderLoading,
-  useWebWiewLogic,
-  versionPasses,
-} from './WebViewShared';
-import {
-  IOSWebViewProps,
-  DecelerationRateConstant,
-  NativeWebViewIOS,
-  ViewManager,
-} from './WebViewTypes';
-
-import styles from './WebView.styles';
-
-const codegenNativeCommands = codegenNativeCommandsUntyped as <T extends {}>(options: { supportedCommands: (keyof T)[] }) => T;
-
-const Commands = codegenNativeCommands({
-  supportedCommands: ['goBack', 'goForward', 'reload', 'stopLoading', /* 'injectJavaScript', */ 'requestFocus', 'postMessage', 'loadUrl'],
-});
-
-const processDecelerationRate = (
-  decelerationRate: DecelerationRateConstant | number | undefined,
-) => {
-  let newDecelerationRate = decelerationRate;
-  if (newDecelerationRate === 'normal') {
-    newDecelerationRate = 0.998;
-  } else if (newDecelerationRate === 'fast') {
-    newDecelerationRate = 0.99;
-  }
-  return newDecelerationRate;
-};
-
-const RNCWebViewManager = NativeModules.RNCWebViewManager as ViewManager;
-
-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;
-  }
-}
-
-/**
- * Harcoded defaults for security.
- */
-const mediaPlaybackRequiresUserAction = true;
-// iOS only configs
-const allowsInlineMediaPlayback = true;
-const useSharedProcessPool = false;
-const sharedCookiesEnabled = false;
-const enableApplePay = false;
-const dataDetectorTypes = 'none';
-const hardMinimumIOSVersion = '12.5.6 <13, 13.6.1 <14, 14.8.1 <15, 15.7.1'
-
-const WebViewComponent = forwardRef<{}, IOSWebViewProps>(({
-  javaScriptEnabled = true,
-  cacheEnabled = true,
-  originWhitelist = defaultOriginWhitelist,
-  textInteractionEnabled= true,
-  injectedJavaScript,
-  injectedJavaScriptBeforeContentLoaded,
-  startInLoadingState,
-  onLoadStart,
-  onError,
-  onLoad,
-  onLoadEnd,
-  onMessage: onMessageProp,
-  renderLoading,
-  renderError,
-  style,
-  containerStyle,
-  source,
-  incognito,
-  validateMeta,
-  validateData,
-  decelerationRate: decelerationRateProp,
-  onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
-  minimumIOSVersion,
-  unsupportedVersionComponent: UnsupportedVersionComponent,
-  ...otherProps
-}, ref) => {
-  const webViewRef = useRef<NativeWebViewIOS | null>(null);
-
-  const onShouldStartLoadWithRequestCallback = useCallback((
-    shouldStart: boolean,
-    _url: string,
-    lockIdentifier = 0,
-  ) => {
-    const viewManager = RNCWebViewManager;
-
-    viewManager.startLoadWithResult(!!shouldStart, lockIdentifier);
-  }, []);
-
-  const { onLoadingStart, onShouldStartLoadWithRequest, onMessage, viewState, setViewState, lastErrorEvent, onLoadingError, onLoadingFinish, onLoadingProgress } = useWebWiewLogic({
-    onLoad,
-    onError,
-    onLoadEnd,
-    onLoadStart,
-    onMessageProp,
-    startInLoadingState,
-    originWhitelist,
-    onShouldStartLoadWithRequestProp,
-    onShouldStartLoadWithRequestCallback,
-    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),
-  }), [setViewState, webViewRef]);
-
-
-  useWarnIfChanges(allowsInlineMediaPlayback, 'allowsInlineMediaPlayback');
-  useWarnIfChanges(incognito, 'incognito');
-  useWarnIfChanges(mediaPlaybackRequiresUserAction, 'mediaPlaybackRequiresUserAction');
-  useWarnIfChanges(dataDetectorTypes, 'dataDetectorTypes');
-
-  const version = String(Platform.Version)
-  if (!(versionPasses(version, minimumIOSVersion) && versionPasses(version, hardMinimumIOSVersion))) {
-    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>
-    );
-  }
-
-  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 decelerationRate = processDecelerationRate(decelerationRateProp);
-
-  const NativeWebView = RNCWebView;
-
-  const webView = (
-    <NativeWebView
-      key="webViewKey"
-      {...otherProps}
-      enableApplePay={enableApplePay}
-      javaScriptEnabled={javaScriptEnabled}
-      cacheEnabled={cacheEnabled}
-      dataDetectorTypes={dataDetectorTypes}
-      useSharedProcessPool={useSharedProcessPool}
-      textInteractionEnabled={textInteractionEnabled}
-      decelerationRate={decelerationRate}
-      messagingEnabled={typeof onMessageProp === 'function'}
-      onLoadingError={onLoadingError}
-      onLoadingFinish={onLoadingFinish}
-      onLoadingProgress={onLoadingProgress}
-      onLoadingStart={onLoadingStart}
-      onMessage={onMessage}
-      onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-      injectedJavaScript={injectedJavaScript}
-      injectedJavaScriptBeforeContentLoaded={injectedJavaScriptBeforeContentLoaded}
-      allowsInlineMediaPlayback={allowsInlineMediaPlayback}
-      incognito={incognito}
-      mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
-      ref={webViewRef}
-      sharedCookiesEnabled={sharedCookiesEnabled}
-      // TODO: find a better way to type this.
-      source={source}
-      style={webViewStyles}
-    />
-  );
-
-  return (
-    <View style={webViewContainerStyle}>
-      {webView}
-      {otherView}
-    </View>
-  );})
-
-// no native implementation for iOS, depends only on permissions
-const isFileUploadSupported: () => Promise<boolean>
-  = async () => true;
-
-const WebView = Object.assign(WebViewComponent, {isFileUploadSupported});
-
-export default WebView;

package/src/WebView.styles.ts

@@ -1,44 +0,0 @@
-import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
-
-interface Styles {
-  container: ViewStyle;
-  errorText: TextStyle;
-  errorTextTitle: TextStyle;
-  loadingOrErrorView: ViewStyle;
-  webView: ViewStyle;
-  loadingProgressBar: ViewStyle;
-}
-
-const styles = StyleSheet.create<Styles>({
-  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',
-  },
-});
-
-export default styles;

package/src/WebView.tsx

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

package/src/WebViewNativeComponent.android.ts

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

package/src/WebViewNativeComponent.ios.ts

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

package/src/WebViewShared.tsx

@@ -1,257 +0,0 @@
-import escapeStringRegexp from 'escape-string-regexp';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Linking, View, ActivityIndicator, Text, Platform } from 'react-native';
-import {
-  OnShouldStartLoadWithRequest,
-  ShouldStartLoadRequestEvent,
-  WebViewError,
-  WebViewErrorEvent,
-  WebViewMessageEvent,
-  WebViewMessage,
-  WebViewNavigationEvent,
-  WebViewProgressEvent,
-  WebViewNativeEvent,
-} from './WebViewTypes';
-import styles from './WebView.styles';
-
-const defaultOriginWhitelist = ['https://*'] as const;
-
-const extractOrigin = (url: string): string => {
-  const result = /^[A-Za-z][A-Za-z0-9+\-.]+:(\/\/)?[^/]*/.exec(url);
-  return result === null ? '' : result[0];
-};
-
-const originWhitelistToRegex = (originWhitelist: string): string =>
-  `^${escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*')}$`;
-
-const _passesWhitelist = (
-  compiledWhitelist: readonly string[],
-  url: string,
-) => {
-  const origin = extractOrigin(url);
-  if (!origin) return false;
-  if (origin !== new URL(url).origin) return null;
-  return compiledWhitelist.some(x => new RegExp(x).test(origin));
-};
-
-const compileWhitelist = (
-  originWhitelist: readonly string[],
-): readonly string[] =>
-  ['about:blank', ...(originWhitelist || [])].map(originWhitelistToRegex);
-
-const createOnShouldStartLoadWithRequest = (
-  loadRequest: (
-    shouldStart: boolean,
-    url: string,
-    lockIdentifier: number,
-  ) => void,
-  originWhitelist: readonly string[],
-  onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
-) => {
-  return ({ nativeEvent }: ShouldStartLoadRequestEvent) => {
-    let shouldStart = true;
-    const { url, lockIdentifier } = nativeEvent;
-
-    if (!_passesWhitelist(compileWhitelist(originWhitelist), url)) {
-      Linking.canOpenURL(url).then((supported) => {
-        if (supported && /^https:\/\//.test(url)) {
-          return Linking.openURL(url);
-        }
-        console.warn(`Can't open url: ${url}`);
-        return undefined;
-      }).catch(e => {
-        console.warn('Error opening URL: ', e);
-      });
-      shouldStart = false;
-    } else if (onShouldStartLoadWithRequest) {
-      shouldStart = onShouldStartLoadWithRequest(nativeEvent);
-    }
-
-    loadRequest(shouldStart, url, lockIdentifier);
-  };
-};
-
-const defaultRenderLoading = () => (
-  <View style={styles.loadingOrErrorView}>
-    <ActivityIndicator />
-  </View>
-);
-const defaultRenderError = (
-  errorDomain: string | undefined,
-  errorCode: number,
-  errorDesc: string,
-) => (
-  <View style={styles.loadingOrErrorView}>
-    <Text style={styles.errorTextTitle}>Error loading page</Text>
-    <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
-    <Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
-    <Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
-  </View>
-);
-
-export {
-  defaultOriginWhitelist,
-  createOnShouldStartLoadWithRequest,
-  defaultRenderLoading,
-  defaultRenderError,
-};
-
-
-export const useWebWiewLogic = ({
-  startInLoadingState,
-  onLoadStart,
-  onLoad,
-  onLoadEnd,
-  onError,
-  onMessageProp,
-  originWhitelist,
-  onShouldStartLoadWithRequestProp,
-  onShouldStartLoadWithRequestCallback,
-  validateMeta,
-  validateData,
-}: {
-  startInLoadingState?: boolean
-  onLoadStart?: (event: WebViewNavigationEvent) => void;
-  onLoad?: (event: WebViewNavigationEvent) => void;
-  onLoadEnd?: (event: WebViewNavigationEvent | WebViewErrorEvent) => void;
-  onError?: (event: WebViewErrorEvent) => void;
-  onMessageProp?: (event: WebViewMessage) => void;
-  originWhitelist: readonly string[];
-  onShouldStartLoadWithRequestProp?: OnShouldStartLoadWithRequest;
-  onShouldStartLoadWithRequestCallback: (shouldStart: boolean, url: string, lockIdentifier?: number | undefined) => void;
-  validateMeta: (event: WebViewNativeEvent) => WebViewNativeEvent;
-  validateData: (data: object) => object;
-}) => {
-
-  const [viewState, setViewState] = useState<'IDLE' | 'LOADING' | 'ERROR'>(startInLoadingState ? "LOADING" : "IDLE");
-  const [lastErrorEvent, setLastErrorEvent] = useState<WebViewError | null>(null);
-  const startUrl = useRef<string | null>(null)
-
-  const passesWhitelist = (url: string) => {
-    if (!url || typeof url !== 'string') return false;
-    return _passesWhitelist(compileWhitelist(originWhitelist), url);
-  }
-
-  const passesWhitelistUse = useCallback(passesWhitelist, [originWhitelist])
-
-  const extractMeta = (nativeEvent: WebViewNativeEvent): WebViewNativeEvent => ({
-    url: String(nativeEvent.url),
-    loading: Boolean(nativeEvent.loading),
-    title: String(nativeEvent.title),
-    canGoBack: Boolean(nativeEvent.canGoBack),
-    canGoForward: Boolean(nativeEvent.canGoForward),
-    lockIdentifier: Number(nativeEvent.lockIdentifier),
-  });
-
-  const onLoadingStart = useCallback((event: WebViewNavigationEvent) => {
-    // Needed for android
-    startUrl.current = event.nativeEvent.url;
-    // !Needed for android
-
-    onLoadStart?.(event);
-  }, [onLoadStart]);
-
-  const onLoadingError = useCallback((event: WebViewErrorEvent) => {
-    event.persist();
-    if (onError) {
-      onError(event);
-    } else {
-      console.warn('Encountered an error loading page', event.nativeEvent);
-    }
-    onLoadEnd?.(event);
-    if (event.isDefaultPrevented()) { return };
-    setViewState('ERROR');
-    setLastErrorEvent(event.nativeEvent);
-  }, [onError, onLoadEnd]);
-
-  const onLoadingFinish = useCallback((event: WebViewNavigationEvent) => {
-    onLoad?.(event);
-    onLoadEnd?.(event);
-    const { nativeEvent: { url } } = event;
-    if (!passesWhitelistUse(url)) return;
-
-    // on Android, only if url === startUrl
-    if (Platform.OS !== "android" || url === startUrl.current) {
-      setViewState('IDLE');
-    }
-    // !on Android, only if url === startUrl
-    // REMOVED: updateNavigationState(event);
-  }, [onLoad, onLoadEnd, passesWhitelistUse]);
-
-  const onMessage = useCallback((event: WebViewMessageEvent) => {
-    const { nativeEvent } = event;
-    if (!passesWhitelistUse(nativeEvent.url)) return;
-
-    // TODO: can/should we perform any other validation?
-
-    const data = JSON.stringify(validateData(JSON.parse(nativeEvent.data)));
-    const meta = validateMeta(extractMeta(nativeEvent));
-
-    onMessageProp?.({ ...meta, data });
-  }, [onMessageProp, passesWhitelistUse, validateData, validateMeta]);
-
-  const onLoadingProgress = useCallback((event: WebViewProgressEvent) => {
-    const { nativeEvent: { progress } } = event;
-    if (!passesWhitelistUse(event.nativeEvent.url)) return;
-
-    // patch for Android only
-    if (Platform.OS === "android" && progress === 1) {
-      setViewState(prevViewState => prevViewState === 'LOADING' ? 'IDLE' : prevViewState);
-    }
-    // !patch for Android only
-    // REMOVED: onLoadProgress?.(event);
-  }, [passesWhitelistUse]);
-
-  const onShouldStartLoadWithRequest = useMemo(() =>  createOnShouldStartLoadWithRequest(
-      onShouldStartLoadWithRequestCallback,
-      originWhitelist,
-      onShouldStartLoadWithRequestProp,
-    )
-  , [originWhitelist, onShouldStartLoadWithRequestProp, onShouldStartLoadWithRequestCallback])
-
-  return {
-    onShouldStartLoadWithRequest,
-    onLoadingStart,
-    onLoadingProgress,
-    onLoadingError,
-    onLoadingFinish,
-    onMessage,
-    passesWhitelist,
-    viewState,
-    setViewState,
-    lastErrorEvent,
-  }
-};
-
-export const versionPasses = (version: string | undefined, minimum: string | undefined): boolean => {
-  if (!version || !minimum) return false
-  if (typeof version !== 'string' || typeof minimum !== 'string') return false
-
-  if (minimum.includes(', ')) {
-    // We have a set of possible versions
-    const variants = minimum.split(', ')
-    // Every entry but the last one should be with an upper bound
-    if (!variants.slice(0, -1).every(x => x.includes(' <'))) return false
-    return variants.some(x => versionPasses(version, x)) // Any match passes
-  }
-
-  if (minimum.includes(' <')) {
-    const [min, max, ...rest] = minimum.split(' <')
-    if (rest.length > 0) return false
-    // Last check is required for correctness/formatting validation
-    return versionPasses(version, min) && !versionPasses(version, max) && versionPasses(max, version)
-  }
-
-  const versionRegex = /^[0-9]+(\.[0-9]+)*$/
-  if (!versionRegex.test(version) || !versionRegex.test(minimum)) return false
-  const versionParts = version.split('.').map(Number)
-  const minimumParts = minimum.split('.').map(Number)
-  const len = Math.max(versionParts.length, minimumParts.length)
-  for (let i = 0; i < len; i += 1) {
-    const ver = versionParts[i] || 0
-    const min = minimumParts[i] || 0
-    if (ver > min) return true
-    if (ver < min) return false
-  }
-  return true // equals
-}