@artsy/palette-mobile 17.16.0 → 17.18.0

package/dist/elements/Image/Image.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
 import { FastImageProps } from "react-native-fast-image";
 import { GeminiResizeMode } from "../../utils/createGeminiUrl";
 type CustomFastImageProps = Omit<FastImageProps, "onLoadStart" | "onLoadEnd" | "source">;
@@ -21,4 +22,13 @@ export interface ImageProps extends CustomFastImageProps {
     src: string;
 }
 export declare const Image: React.FC<ImageProps>;
+type ImageSkeletonProps = {
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    blurhash?: string | null | undefined;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const ImageSkeleton: React.FC<ImageSkeletonProps>;
 export {};

package/dist/elements/Image/Image.js

@@ -25,7 +25,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (showLoadingState) {
-        return _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash });
+        return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
     let uri = src;
     if (performResize) {
@@ -36,7 +36,7 @@ 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 }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
+    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
@@ -67,9 +67,9 @@ const useImageDimensions = (props) => {
     };
     return dimensions;
 };
-const ImageSkeleton = ({ dimensions, blurhash }) => {
+export const ImageSkeleton = ({ dimensions, blurhash, style }) => {
     if (!!blurhash) {
-        return (_jsx(Flex, { position: "absolute", backgroundColor: "mono10", ...dimensions, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
+        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
     }
-    return (_jsx(Flex, { position: "absolute", children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
+    return (_jsx(Flex, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/dist/setupJest.d.ts

@@ -1 +1 @@
-import "@testing-library/react-native/extend-expect";
+export {};

package/dist/setupJest.js

@@ -1,4 +1,9 @@
-import "@testing-library/react-native/extend-expect";
 import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
 jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);
+jest.mock("react-native-blurhash", () => {
+    const ReactNative = require("react-native");
+    return {
+        Blurhash: ReactNative.View,
+    };
+});
 require("react-native-reanimated").setUpTests();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.16.0",
+  "version": "17.18.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -41,7 +41,7 @@
     "lodash": "^4.17.21",
     "moti": "^0.25.3",
     "react-nanny": "^2.15.0",
-    "react-native-blurhash": "^1.1.11",
+    "react-native-blurhash": "^2.1.1",
     "react-native-collapsible-tab-view": "^8.0.0",
     "react-native-fast-image": "^8.6.3",
     "react-native-pager-view": "6.5.0",
@@ -83,7 +83,7 @@
     "@react-native/metro-config": "0.76.9",
     "@react-native/typescript-config": "0.76.9",
     "@storybook/react-native": "6.0.1-beta.11",
-    "@testing-library/react-native": "12.8.1",
+    "@testing-library/react-native": "13.2.0",
     "@types/events": "^3.0.0",
     "@types/jest": "29.4.0",
     "@types/lodash": "4.14.191",