diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index e55664d..5f62b48 100644 --- 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 index 409a3ed..2bcc24f 100644 --- 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,81 +28,84 @@ interface Props } const NativeImage = requireNativeComponent(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) => { + 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 ( - - - - ); -}; + return ( + + + + ); + } +); const styles = StyleSheet.create({ imageContainer: { @@ -110,19 +113,19 @@ const styles = StyleSheet.create({ }, }); -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 & TurboImageApi;