@onekeyfe/react-native-image 3.0.98

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@onekeyfe/react-native-image",
+  "version": "3.0.98",
+  "description": "High-performance native image view for OneKey",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "nitrogen",
+    "nitro.json",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/.*",
+    "!**/*.map"
+  ],
+  "scripts": {
+    "clean": "del-cli android/build lib",
+    "prepare": "rm -rf lib && bob build && cp -r nitrogen lib/nitrogen",
+    "nitrogen": "nitrogen",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "yarn nitrogen && yarn prepare && npm whoami && npm publish --access public"
+  },
+  "keywords": [
+    "react-native",
+    "image",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneKeyHQ/app-modules.git"
+  },
+  "author": "@onekeyfe <huanming@onekey.so>",
+  "license": "MIT",
+  "homepage": "https://github.com/OneKeyHQ/app-modules",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/eslint-config": "0.86.2",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "nitrogen": "0.37.0",
+    "prettier": "^2.8.8",
+    "react": "19.2.3",
+    "react-native": "patch:react-native@npm%3A0.86.2#~/.yarn/patches/react-native-npm-0.86.2-c9d546616f.patch",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-nitro-modules": "0.37.0",
+    "react-test-renderer": "19.2.3",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "@onekeyfe/react-native-skeleton": "3.0.98",
+    "react": "*",
+    "react-native": "*",
+    "react-native-nitro-modules": "0.37.0"
+  },
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "custom",
+        {
+          "script": "nitrogen",
+          "clean": "nitrogen/"
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  }
+}

package/src/OneKeyImage.nitro.ts

@@ -0,0 +1,86 @@
+import type {
+  HybridObject,
+  HybridView,
+  HybridViewMethods,
+  HybridViewProps,
+} from 'react-native-nitro-modules';
+
+export enum OneKeyImageVariant {
+  GENERIC = 'generic',
+  TOKEN = 'token',
+  NETWORK = 'network',
+  AVATAR = 'avatar',
+}
+
+export enum OneKeyImageContentFit {
+  COVER = 'cover',
+  CONTAIN = 'contain',
+  FILL = 'fill',
+  CENTER = 'center',
+}
+
+export enum OneKeyImageCachePolicy {
+  MEMORY_DISK = 'memory-disk',
+  MEMORY = 'memory',
+  DISK = 'disk',
+  NONE = 'none',
+}
+
+export type OneKeyImageCacheType = 'none' | 'memory' | 'disk';
+
+export enum OneKeyImageLoadingStrategy {
+  STATIC = 'static',
+  SKELETON = 'skeleton',
+  NONE = 'none',
+}
+
+export interface OneKeyImageNativeProps extends HybridViewProps {
+  sourceUri?: string;
+  sourceHeadersJson?: string;
+  variant?: OneKeyImageVariant;
+  contentFit?: OneKeyImageContentFit;
+  cachePolicy?: OneKeyImageCachePolicy;
+  autoplay?: boolean;
+  recyclingKey?: string;
+  optimizeTos?: boolean;
+  overscan?: number;
+  loadingStrategy?: OneKeyImageLoadingStrategy;
+  onLoadStart?: () => void;
+  onLoad?: (
+    width: number,
+    height: number,
+    cacheType: OneKeyImageCacheType
+  ) => void;
+  onDisplay?: () => void;
+  onError?: (message: string) => void;
+  onLoadEnd?: () => void;
+}
+
+export interface OneKeyImageMethods extends HybridViewMethods {
+  reload(): void;
+  cancel(): void;
+}
+
+export interface OneKeyImagePreloadSource {
+  uri: string;
+  headersJson?: string;
+  cachePolicy?: OneKeyImageCachePolicy;
+  resizeWidth?: number;
+  resizeHeight?: number;
+  pixelRatio?: number;
+  overscan?: number;
+  optimizeTos?: boolean;
+}
+
+export interface OneKeyImageCache
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  preload(sources: OneKeyImagePreloadSource[]): Promise<boolean>;
+  clearMemory(): Promise<void>;
+  clearDisk(): Promise<void>;
+  clearAll(): Promise<void>;
+}
+
+export type OneKeyImage = HybridView<
+  OneKeyImageNativeProps,
+  OneKeyImageMethods
+>;

package/src/index.tsx

@@ -0,0 +1,376 @@
+import {
+  createElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  Image,
+  Platform,
+  StyleSheet,
+  View,
+  type ImageSourcePropType,
+  type ImageURISource,
+  type ViewProps,
+} from 'react-native';
+import {
+  callback,
+  getHostComponent,
+  NitroModules,
+  type NitroViewWrappedCallback,
+} from 'react-native-nitro-modules';
+const OneKeyImageConfig = require('../nitrogen/generated/shared/json/OneKeyImageConfig.json');
+import type {
+  OneKeyImageCache as OneKeyImageCacheHybrid,
+  OneKeyImageCacheType as OneKeyImageNativeCacheType,
+  OneKeyImageMethods,
+  OneKeyImageNativeProps,
+} from './OneKeyImage.nitro';
+import {
+  OneKeyImageCachePolicy,
+  OneKeyImageContentFit,
+  OneKeyImageLoadingStrategy,
+  OneKeyImageVariant,
+} from './OneKeyImage.nitro';
+
+export {
+  OneKeyImageCachePolicy,
+  OneKeyImageContentFit,
+  OneKeyImageLoadingStrategy,
+  OneKeyImageVariant,
+};
+export type {
+  OneKeyImageMethods,
+  OneKeyImageNativeProps,
+  OneKeyImagePreloadSource,
+} from './OneKeyImage.nitro';
+
+export enum OneKeyImageCacheType {
+  NONE = 'none',
+  MEMORY = 'memory',
+  DISK = 'disk',
+}
+
+type MaybeWrappedCallback<T extends (...args: any[]) => void> =
+  | T
+  | NitroViewWrappedCallback<T>;
+
+export interface OneKeyImageSource extends ImageURISource {
+  cachePolicy?: OneKeyImageCachePolicy;
+}
+
+export interface OneKeyImagePreloadInput extends OneKeyImageSource {
+  resizeWidth?: number;
+  resizeHeight?: number;
+  pixelRatio?: number;
+  overscan?: number;
+  optimizeTos?: boolean;
+}
+
+export interface OneKeyImageLoadEvent {
+  source: {
+    url: string;
+    width: number;
+    height: number;
+  };
+  cacheType: OneKeyImageCacheType;
+}
+
+export interface OneKeyImageErrorEvent {
+  error: string;
+}
+
+export interface OneKeyImageProps
+  extends Omit<
+      OneKeyImageNativeProps,
+      | 'sourceUri'
+      | 'sourceHeadersJson'
+      | 'onLoadStart'
+      | 'onLoad'
+      | 'onDisplay'
+      | 'onError'
+      | 'onLoadEnd'
+    >,
+    ViewProps {
+  source?: OneKeyImageSource | number;
+  /** Content shown while a non-null source is loading. */
+  placeholder?: ReactNode;
+  /** Content shown when source is unavailable or fails to load. */
+  fallback?: ReactNode;
+  hybridRef?: MaybeWrappedCallback<(ref: OneKeyImageMethods) => void>;
+  onLoadStart?: MaybeWrappedCallback<() => void>;
+  onLoad?: MaybeWrappedCallback<(event: OneKeyImageLoadEvent) => void>;
+  onDisplay?: MaybeWrappedCallback<() => void>;
+  onError?: MaybeWrappedCallback<(event: OneKeyImageErrorEvent) => void>;
+  onLoadEnd?: MaybeWrappedCallback<() => void>;
+}
+
+const NativeOneKeyImage = getHostComponent<
+  OneKeyImageNativeProps,
+  OneKeyImageMethods
+>('OneKeyImage', () => OneKeyImageConfig);
+
+const nativeCache =
+  NitroModules.createHybridObject<OneKeyImageCacheHybrid>('OneKeyImageCache');
+
+function unwrap<T extends (...args: any[]) => void>(
+  value: MaybeWrappedCallback<T> | undefined
+): T | undefined {
+  return typeof value === 'function' ? value : value?.f;
+}
+
+function normalizeSource(
+  source: OneKeyImageProps['source']
+): OneKeyImageSource | undefined {
+  if (source == null) return undefined;
+  const resolved = Image.resolveAssetSource(source as ImageSourcePropType);
+  if (resolved?.uri) {
+    const original =
+      typeof source === 'object' && !Array.isArray(source)
+        ? (source as OneKeyImageSource)
+        : undefined;
+    return {
+      uri: resolved.uri,
+      width: resolved.width,
+      height: resolved.height,
+      scale: resolved.scale,
+      headers: original?.headers,
+      cachePolicy: original?.cachePolicy,
+    };
+  }
+  return undefined;
+}
+
+export function OneKeyImage({
+  source,
+  placeholder,
+  fallback,
+  variant = OneKeyImageVariant.GENERIC,
+  contentFit = OneKeyImageContentFit.COVER,
+  cachePolicy,
+  autoplay,
+  recyclingKey,
+  optimizeTos = true,
+  overscan = 1.1,
+  loadingStrategy = OneKeyImageLoadingStrategy.STATIC,
+  hybridRef,
+  onLoadStart,
+  onLoad,
+  onDisplay,
+  onError,
+  onLoadEnd,
+  style,
+  ...viewProps
+}: OneKeyImageProps) {
+  const normalized = useMemo(() => normalizeSource(source), [source]);
+  const resolvedCachePolicy =
+    cachePolicy ??
+    normalized?.cachePolicy ??
+    OneKeyImageCachePolicy.MEMORY_DISK;
+  const identity = `${normalized?.uri ?? ''}|${JSON.stringify(
+    normalized?.headers ?? {}
+  )}|${resolvedCachePolicy}|${recyclingKey ?? ''}|${contentFit}|${
+    optimizeTos ? '1' : '0'
+  }|${overscan}`;
+  const hasSource = normalized != null;
+  const hasOverlay = placeholder != null || fallback != null;
+  type LoadState = {
+    identity: string;
+    status: 'loading' | 'loaded' | 'fallback';
+  };
+  const [loadState, setLoadState] = useState<LoadState>({
+    identity,
+    status: hasSource ? 'loading' : 'fallback',
+  });
+  const effectiveState =
+    loadState.identity === identity
+      ? loadState.status
+      : hasSource
+      ? 'loading'
+      : 'fallback';
+
+  const refs = useRef({
+    hybridRef: unwrap(hybridRef),
+    onLoadStart: unwrap(onLoadStart),
+    onLoad: unwrap(onLoad),
+    onDisplay: unwrap(onDisplay),
+    onError: unwrap(onError),
+    onLoadEnd: unwrap(onLoadEnd),
+  });
+  refs.current = {
+    hybridRef: unwrap(hybridRef),
+    onLoadStart: unwrap(onLoadStart),
+    onLoad: unwrap(onLoad),
+    onDisplay: unwrap(onDisplay),
+    onError: unwrap(onError),
+    onLoadEnd: unwrap(onLoadEnd),
+  };
+  const nativeMethodsRef = useRef<OneKeyImageMethods | null>(null);
+  const pendingOverlayReloadRef = useRef<string | null>(null);
+  const previousRenderRef = useRef({ hasOverlay, identity });
+
+  useEffect(() => {
+    const previous = previousRenderRef.current;
+    const identityChanged = previous.identity !== identity;
+    if (hasOverlay && (!previous.hasOverlay || identityChanged)) {
+      const status = hasSource ? 'loading' : 'fallback';
+      setLoadState({ identity, status });
+    }
+
+    if (hasOverlay && !previous.hasOverlay && !identityChanged && hasSource) {
+      pendingOverlayReloadRef.current = identity;
+      const nativeMethods = nativeMethodsRef.current;
+      if (nativeMethods != null) {
+        pendingOverlayReloadRef.current = null;
+        nativeMethods.reload();
+      }
+    } else if (!hasOverlay || identityChanged) {
+      pendingOverlayReloadRef.current = null;
+    }
+    previousRenderRef.current = { hasOverlay, identity };
+  }, [hasOverlay, hasSource, identity]);
+
+  const needsHybridRef = hasOverlay || refs.current.hybridRef != null;
+  const needsLoadStart = hasOverlay || refs.current.onLoadStart != null;
+  const needsLoad = refs.current.onLoad != null;
+  const needsDisplay = placeholder != null || refs.current.onDisplay != null;
+  const needsError = hasOverlay || refs.current.onError != null;
+  const needsLoadEnd = refs.current.onLoadEnd != null;
+
+  const nativeCallbacks = useMemo(
+    () => ({
+      hybridRef: needsHybridRef
+        ? callback((ref: OneKeyImageMethods) => {
+            nativeMethodsRef.current = ref;
+            if (pendingOverlayReloadRef.current === identity) {
+              pendingOverlayReloadRef.current = null;
+              ref.reload();
+            }
+            refs.current.hybridRef?.(ref);
+          })
+        : undefined,
+      onLoadStart: needsLoadStart
+        ? callback(() => {
+            if (hasOverlay) {
+              setLoadState({ identity, status: 'loading' });
+            }
+            refs.current.onLoadStart?.();
+          })
+        : undefined,
+      onLoad: needsLoad
+        ? callback(
+            (
+              width: number,
+              height: number,
+              cacheType: OneKeyImageNativeCacheType
+            ) => {
+              refs.current.onLoad?.({
+                source: { url: normalized?.uri ?? '', width, height },
+                cacheType: cacheType as OneKeyImageCacheType,
+              });
+            }
+          )
+        : undefined,
+      onDisplay: needsDisplay
+        ? callback(() => {
+            if (placeholder != null) {
+              setLoadState({ identity, status: 'loaded' });
+            }
+            refs.current.onDisplay?.();
+          })
+        : undefined,
+      onError: needsError
+        ? callback((message: string) => {
+            if (hasOverlay) {
+              setLoadState({ identity, status: 'fallback' });
+            }
+            refs.current.onError?.({ error: message });
+          })
+        : undefined,
+      onLoadEnd: needsLoadEnd
+        ? callback(() => refs.current.onLoadEnd?.())
+        : undefined,
+    }),
+    [
+      hasOverlay,
+      identity,
+      needsDisplay,
+      needsError,
+      needsHybridRef,
+      needsLoad,
+      needsLoadEnd,
+      needsLoadStart,
+      normalized?.uri,
+      placeholder,
+    ]
+  );
+
+  const native = createElement(NativeOneKeyImage, {
+    ...viewProps,
+    ...nativeCallbacks,
+    style: hasOverlay ? StyleSheet.absoluteFill : style,
+    sourceUri: normalized?.uri,
+    sourceHeadersJson: normalized?.headers
+      ? JSON.stringify(normalized.headers)
+      : undefined,
+    variant,
+    contentFit,
+    cachePolicy: resolvedCachePolicy,
+    autoplay: autoplay ?? Platform.OS !== 'android',
+    recyclingKey,
+    optimizeTos,
+    overscan,
+    loadingStrategy:
+      placeholder == null ? loadingStrategy : OneKeyImageLoadingStrategy.NONE,
+  });
+
+  if (!hasOverlay) return native;
+
+  return (
+    <View style={[style, styles.overlayContainer]} collapsable={false}>
+      {native}
+      {effectiveState === 'loading' && placeholder != null ? (
+        <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+          {placeholder}
+        </View>
+      ) : null}
+      {effectiveState === 'fallback' && fallback != null ? (
+        <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+          {fallback}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const OneKeyImageCache = {
+  preload(sources: OneKeyImagePreloadInput[]) {
+    return nativeCache.preload(
+      sources
+        .filter((source) => Boolean(source.uri))
+        .map((source) => ({
+          uri: source.uri!,
+          headersJson: source.headers
+            ? JSON.stringify(source.headers)
+            : undefined,
+          cachePolicy: source.cachePolicy ?? OneKeyImageCachePolicy.MEMORY_DISK,
+          resizeWidth: source.resizeWidth,
+          resizeHeight: source.resizeHeight,
+          pixelRatio: source.pixelRatio,
+          overscan: source.overscan,
+          optimizeTos: source.optimizeTos,
+        }))
+    );
+  },
+  clearMemory: () => nativeCache.clearMemory(),
+  clearDisk: () => nativeCache.clearDisk(),
+  clearAll: () => nativeCache.clearAll(),
+};
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    overflow: 'hidden',
+  },
+});