@artsy/palette-mobile 21.0.1 → 22.0.0

package/dist/constants.d.ts

@@ -13,3 +13,4 @@ export declare const DEFAULT_ICON_SIZE: number;
  */
 export declare let DEFAULT_ACTIVE_OPACITY: number;
 export declare const setGlobalActiveOpacity: (opacity: number) => void;
+export declare const DEFAULT_ANIMATION_DURATION = 200;

package/dist/constants.js

@@ -12,3 +12,4 @@ export let DEFAULT_ACTIVE_OPACITY = 0.8;
 export const setGlobalActiveOpacity = (opacity) => {
     DEFAULT_ACTIVE_OPACITY = opacity;
 };
+export const DEFAULT_ANIMATION_DURATION = 200;

package/dist/elements/Image/Image.js

@@ -1,24 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
 import { memo, useState } from "react";
-import { View } from "react-native";
+// @ts-expect-error
 import { Blurhash } from "react-native-blurhash";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
 import { getImageURL } from "./helpers/getImageURL";
+import { DEFAULT_ANIMATION_DURATION } from "../../constants";
 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 [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
+    const opacity = useSharedValue(1);
     const color = useColor();
     const onLoadEnd = () => {
-        setIsLoading(false);
+        opacity.value = withSpring(0, { duration: DEFAULT_ANIMATION_DURATION }, () => {
+            runOnJS(setIsLoading)(false);
+        });
     };
+    const skeletonStyle = useAnimatedStyle(() => {
+        return {
+            opacity: opacity.value,
+        };
+    });
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [isLoading && (_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) })), _jsx(FastImage, { style: [
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
                     dimensions,
                     style,
                     // If we have a blurhash, we don't want to show a background color
@@ -27,7 +37,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
                 ], resizeMode: resizeMode, onLoadEnd: onLoadEnd, source: {
                     priority: FastImage.priority.normal,
                     uri: getImageURL({ src, dimensions, geminiResizeMode, performResize }),
-                } })] }));
+                } }), isLoading && (_jsx(Animated.View, { style: [dimensions, { position: "absolute" }, skeletonStyle], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] }));
 });
 const useImageDimensions = (props) => {
     const screenDimensions = useScreenDimensions();

package/dist/elements/Input/Input.js

@@ -3,8 +3,7 @@ import { EventEmitter } from "events";
 import { CloseFillIcon, HideIcon, ShowIcon, TriangleDownIcon } from "@artsy/icons/native";
 import { THEME } from "@artsy/palette-tokens";
 import themeGet from "@styled-system/theme-get";
-import isArray from "lodash/isArray";
-import isString from "lodash/isString";
+import { isArray, isString } from "lodash";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { LayoutAnimation, Platform, TextInput, TouchableOpacity, } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";

package/dist/elements/Screen/Header.d.ts

@@ -1,13 +1,13 @@
-import React, { JSX } from "react";
+import { JSX, ReactNode } from "react";
 import { FlexProps } from "../Flex";
 export interface HeaderProps {
     animated?: boolean;
     hideLeftElements?: boolean;
     hideRightElements?: boolean;
     hideTitle?: boolean;
-    leftElements?: React.ReactNode;
+    leftElements?: ReactNode;
     onBack?: () => void;
-    rightElements?: React.ReactNode;
+    rightElements?: ReactNode;
     scrollY?: number;
     scrollYOffset?: number;
     title?: string | JSX.Element;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "21.0.1",
+  "version": "22.0.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"
   ],
   "scripts": {
     "android": "yarn workspace palette-mobile-example android",
+    "android:clean": "yarn workspace palette-mobile-example android:prebuild --clean",
     "android:prebuild": "yarn workspace palette-mobile-example android:prebuild",
     "beta:ios": "bundle e fastlane ios beta",
     "bundle-install": "bundle install",
@@ -14,6 +15,7 @@
     "compile": "tsc",
     "install:all": "yarn install && yarn postinstall && yarn bundle-install",
     "ios": "yarn workspace palette-mobile-example ios",
+    "ios:clean": "yarn workspace palette-mobile-example ios:prebuild --clean",
     "ios:prebuild": "yarn workspace palette-mobile-example ios:prebuild",
     "lint:all": "yarn lint .",
     "lint": "eslint --cache --cache-location '.cache/eslint/' --ext .ts,.tsx --fix",
@@ -49,7 +51,7 @@
     "lodash": "^4.17.21",
     "moti": "^0.25.3",
     "react-nanny": "^2.15.0",
-    "react-native-blurhash": "2.1.1",
+    "react-native-blurhash": "2.1.2",
     "react-native-collapsible-tab-view": "^8.0.1",
     "react-native-pager-view": "6.7.1",
     "react-native-popover-view": "^6.1.0",
@@ -81,13 +83,14 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "^7.25.0",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native/eslint-config": "0.76.9",
     "@testing-library/react-native": "13.2.0",
     "@types/events": "^3.0.0",
     "@types/jest": "29.4.0",
     "@types/lodash": "4.14.191",
-    "@types/react": "~19.0.10",
-    "@types/react-test-renderer": "19.0.0",
+    "@types/react": "~19.1.10",
+    "@types/react-test-renderer": "19.1.0",
     "@types/styled-system": "^5.1.16",
     "@types/styled-system__theme-get": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "5.51.0",
@@ -117,20 +120,28 @@
     "postinstall-prepare": "^2.0.0",
     "prettier": "^2.8.8",
     "pull-lock": "1.0.0",
-    "react": "19.0.0",
-    "react-native": "0.79.6",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "3.17.5",
-    "react-native-safe-area-context": "5.4.1",
-    "react-native-svg": "15.12.0",
-    "react-test-renderer": "19.0.0",
+    "react-native-reanimated": "3.19.4",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-test-renderer": "19.1.0",
     "rimraf": "4.1.2",
     "styled-components": "6.1.19",
     "typescript": "5.8.3"
   },
+  "resolutions": {
+    "@types/react": "~19.1.10",
+    "react": "19.1.0",
+    "react-test-renderer": "19.1.0",
+    "react-native-svg": "15.12.1",
+    "react-native-safe-area-context": "5.6.0"
+  },
   "engines": {
-    "yarn": "4.x"
+    "yarn": "4.x",
+    "node": "24.x"
   },
   "files": [
     "dist"