307 feat forwardref (#308)

* feat: wip * chore: lock file
duguyihou · Aug 18, 2024 · 8084a0c · 8084a0c
1 parent 3669058
commit 8084a0c
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 89 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -892,7 +892,7 @@ PODS:
     - React-debug
   - react-native-safe-area-context (4.9.0):
     - React-Core
-  - react-native-turbo-image (1.11.1):
+  - react-native-turbo-image (1.12.1):
     - APNGKit
     - Gifu
     - glog
@@ -1279,7 +1279,7 @@ SPEC CHECKSUMS:
   React-logger: 3eb80a977f0d9669468ef641a5e1fabbc50a09ec
   React-Mapbuffer: 84ea43c6c6232049135b1550b8c60b2faac19fab
   react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
-  react-native-turbo-image: 531d6c9509dd9813925f73af92ff9f1f5f921726
+  react-native-turbo-image: 9c39bfdb0909c348f19fe8012c6cda5e20d1846e
   React-nativeconfig: b4d4e9901d4cabb57be63053fd2aa6086eb3c85f
   React-NativeModulesApple: cd26e56d56350e123da0c1e3e4c76cb58a05e1ee
   React-perflogger: 5f49905de275bac07ac7ea7f575a70611fa988f2

diff --git a/src/TurboImage.tsx b/src/TurboImage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import {
   requireNativeComponent,
   NativeModules,
@@ -28,101 +28,104 @@ interface Props
 }
 const NativeImage = requireNativeComponent<Props>(ComponentName);
 
-const TurboImage = (props: TurboImageProps) => {
-  const {
-    source,
-    style,
-    cachePolicy,
-    resizeMode,
-    indicator,
-    placeholder,
-    fadeDuration,
-    rounded,
-    blur,
-    monochrome,
-    resize,
-    tint,
-    enableLiveTextInteraction,
-    allowHardware,
-    format,
-    onStart,
-    onSuccess,
-    onFailure,
-    onCompletion,
-    ...restProps
-  } = props;
-  if (placeholder && Object.keys(placeholder).length > 1) {
-    throw new Error('Choose one hash string, either thumbhash or blurhash');
-  }
-
-  const resolvedSource = (() => {
-    if (typeof source === 'number') {
-      return Image.resolveAssetSource(source);
+const TurboImageView = forwardRef(
+  (props: TurboImageProps, ref: React.LegacyRef<View>) => {
+    const {
+      source,
+      style,
+      cachePolicy,
+      resizeMode,
+      indicator,
+      placeholder,
+      fadeDuration,
+      rounded,
+      blur,
+      monochrome,
+      resize,
+      tint,
+      enableLiveTextInteraction,
+      allowHardware,
+      format,
+      onStart,
+      onSuccess,
+      onFailure,
+      onCompletion,
+      ...restProps
+    } = props;
+    if (placeholder && Object.keys(placeholder).length > 1) {
+      throw new Error('Choose one hash string, either thumbhash or blurhash');
     }
-    return source;
-  })();
 
-  const processedIndicator =
-    indicator && Object.keys(indicator).length !== 0
-      ? {
-          style: indicator?.style,
-          color: processColor(indicator?.color),
-        }
-      : undefined;
+    const resolvedSource = (() => {
+      if (typeof source === 'number') {
+        return Image.resolveAssetSource(source);
+      }
+      return source;
+    })();
+
+    const processedIndicator =
+      indicator && Object.keys(indicator).length !== 0
+        ? {
+            style: indicator?.style,
+            color: processColor(indicator?.color),
+          }
+        : undefined;
 
-  return (
-    <View
-      style={[
-        styles.imageContainer,
-        style,
-        rounded && { borderRadius: 9999999 },
-      ]}
-    >
-      <NativeImage
-        {...restProps}
-        style={StyleSheet.absoluteFill}
-        source={resolvedSource}
-        cachePolicy={cachePolicy}
-        resizeMode={resizeMode}
-        indicator={processedIndicator}
-        placeholder={placeholder}
-        fadeDuration={fadeDuration}
-        rounded={rounded}
-        blur={blur}
-        monochrome={processColor(monochrome)}
-        resize={resize}
-        tint={processColor(tint)}
-        enableLiveTextInteraction={enableLiveTextInteraction}
-        allowHardware={allowHardware}
-        format={format}
-        onStart={onStart}
-        onSuccess={onSuccess}
-        onFailure={onFailure}
-        onCompletion={onCompletion}
-      />
-    </View>
-  );
-};
+    return (
+      <View
+        style={[
+          styles.imageContainer,
+          style,
+          rounded && { borderRadius: 9999999 },
+        ]}
+        ref={ref}
+      >
+        <NativeImage
+          {...restProps}
+          style={StyleSheet.absoluteFill}
+          source={resolvedSource}
+          cachePolicy={cachePolicy}
+          resizeMode={resizeMode}
+          indicator={processedIndicator}
+          placeholder={placeholder}
+          fadeDuration={fadeDuration}
+          rounded={rounded}
+          blur={blur}
+          monochrome={processColor(monochrome)}
+          resize={resize}
+          tint={processColor(tint)}
+          enableLiveTextInteraction={enableLiveTextInteraction}
+          allowHardware={allowHardware}
+          format={format}
+          onStart={onStart}
+          onSuccess={onSuccess}
+          onFailure={onFailure}
+          onCompletion={onCompletion}
+        />
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   imageContainer: {
     overflow: 'hidden',
   },
 });
 
-TurboImage.prefetch = async (sources: Source[]) => {
-  return await TurboImageViewManager.prefetch(sources);
-};
-
-TurboImage.dispose = async (sources: Source[]) => {
-  return await TurboImageViewManager.dispose(sources);
-};
-
-TurboImage.clearMemoryCache = async () => {
-  return await TurboImageViewManager.clearMemoryCache();
-};
-TurboImage.clearDiskCache = async () => {
-  return await TurboImageViewManager.clearDiskCache();
-};
+const TurboImage = Object.assign({}, TurboImageView, {
+  prefetch: async (sources: Source[]) => {
+    return await TurboImageViewManager.prefetch(sources);
+  },
+  dispose: async (sources: Source[]) => {
+    return await TurboImageViewManager.dispose(sources);
+  },
+  clearMemoryCache: async () => {
+    return await TurboImageViewManager.clearMemoryCache();
+  },
+  clearDiskCache: async () => {
+    return await TurboImageViewManager.clearDiskCache();
+  },
+});
 
 export default TurboImage as React.FC<TurboImageProps> & TurboImageApi;