@artsy/palette-mobile 17.31.0 → 17.32.0

package/dist/elements/Image/Image.js

@@ -1,29 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
-import { memo, useCallback } from "react";
-import { PixelRatio, View } from "react-native";
+import { memo, useRef } from "react";
+import { PixelRatio, View, Animated } from "react-native";
 import { Blurhash } from "react-native-blurhash";
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
 import { createGeminiUrl } from "../../utils/createGeminiUrl";
 import { useColor } from "../../utils/hooks";
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { Flex } from "../Flex";
 import { Skeleton, SkeletonBox } from "../Skeleton";
 export const Image = memo(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
-    const loading = useSharedValue(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
     const color = useColor();
-    const animatedStyles = useAnimatedStyle(() => {
-        return {
-            opacity: withTiming(loading.get() ? 0 : 1, { duration: 200, easing: Easing.sin }),
-        };
-    }, []);
-    const onAnimationEnd = useCallback(() => {
-        "worklet";
-        loading.set(() => false);
-        // No need to get the js thread involved here
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    const opacity = useRef(new Animated.Value(0)).current;
+    const onLoadEnd = () => {
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+        }).start();
+    };
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
@@ -36,16 +31,16 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
             resizeMode: geminiResizeMode,
         });
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
-                        dimensions,
-                        style,
-                        // If we have a blurhash, we don't want to show a background color
-                        // That might flash before the image loads
-                        { backgroundColor: blurhash ? "transparent" : color("mono30") },
-                    ], resizeMode: resizeMode, onLoadEnd: onAnimationEnd, source: {
-                        priority: FastImage.priority.normal,
-                        uri,
-                    } }) })] }));
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(FastImage, { style: [
+                    dimensions,
+                    style,
+                    // If we have a blurhash, we don't want to show a background color
+                    // That might flash before the image loads
+                    { backgroundColor: blurhash ? "transparent" : color("mono30") },
+                ], resizeMode: resizeMode, onLoadEnd: onLoadEnd, source: {
+                    priority: FastImage.priority.normal,
+                    uri,
+                } })] }));
 });
 const useImageDimensions = (props) => {
     const screenDimensions = useScreenDimensions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.31.0",
+  "version": "17.32.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",