@artsy/palette-mobile 17.32.0--canary.373.4107.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/dist/elements/Tabs/TabMasonry.d.ts

@@ -1,5 +1,5 @@
-import { FlashListProps, FlashListRef } from "@shopify/flash-list";
+import { MasonryFlashListProps, MasonryFlashListRef } from "@shopify/flash-list";
 import { RefObject } from "react";
-export declare function TabMasonry<T>(props: FlashListProps<T> & {
-    innerRef?: RefObject<FlashListRef<T>> | null;
+export declare function TabMasonry<T>(props: MasonryFlashListProps<T> & {
+    innerRef?: RefObject<MasonryFlashListRef<T>> | null;
 }): JSX.Element;

package/dist/elements/Tabs/TabMasonry.js

@@ -6,7 +6,7 @@ export function TabMasonry(props) {
     useListenForTabContentScroll();
     const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.FlashList, { masonry: true, contentContainerStyle: {
+    return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
             paddingHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props, ref: props.innerRef }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.32.0--canary.373.4107.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",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@artsy/palette-tokens": "^7.0.0",
     "@d11/react-native-fast-image": "^8.10.0",
-    "@shopify/flash-list": "^2.0.3",
+    "@shopify/flash-list": "^1.8.3",
     "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",