@artsy/palette-mobile 20.6.0 → 20.8.0

package/dist/constants.d.ts

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

package/dist/constants.js

@@ -12,8 +12,3 @@ export let DEFAULT_ACTIVE_OPACITY = 0.8;
 export const setGlobalActiveOpacity = (opacity) => {
     DEFAULT_ACTIVE_OPACITY = opacity;
 };
-// Check if the global `nativeFabric` object exists.
-// Its presence indicates that Fabric is running.
-// nativeFabricUIManager is only available in the new architecture and isn't typed yet
-export const isNewArchitectureEnabled = !!global?.nativeFabricUIManager;
-export const DEFAULT_ANIMATION_DURATION = 200;

package/dist/elements/Checkbox/Checkbox.js

@@ -70,11 +70,14 @@ const styles = (fontScale) => StyleSheet.create({
 });
 // This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
 // properties with styled-component.
-export const CheckMark = ({ size }) => (_jsx(Box, { style: {
-        transform: [{ rotate: "-45deg" }],
-        borderBottomWidth: 2,
-        borderLeftWidth: 2,
-    }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomColor: "mono0", borderLeftColor: "mono0" }));
+export const CheckMark = ({ size }) => {
+    const { color } = useTheme();
+    return (_jsx(Box, { style: {
+            transform: [{ rotate: "-45deg" }],
+            borderBottomWidth: 2,
+            borderLeftWidth: 2,
+        }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomColor: color("mono0"), borderLeftColor: color("mono0") }));
+};
 export const DisabledMark = styled(CheckMark) `
   border-bottom-color: ${themeGet("colors.mono30")};
   border-left-color: ${themeGet("colors.mono30")};

package/dist/elements/Image/Image.js

@@ -1,32 +1,24 @@
 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 { Animated, useAnimatedValue } from "react-native";
+import { View } from "react-native";
 import { Blurhash } from "react-native-blurhash";
 import { getImageURL } from "./helpers/getImageURL";
-import { DEFAULT_ANIMATION_DURATION, isNewArchitectureEnabled } 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(true);
+    const [isLoading, setIsLoading] = useState(false);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
-    const opacity = useAnimatedValue(1);
     const color = useColor();
     const onLoadEnd = () => {
-        Animated.timing(opacity, {
-            toValue: 0,
-            duration: DEFAULT_ANIMATION_DURATION,
-            useNativeDriver: true,
-        }).start(() => {
-            setIsLoading(false);
-        });
+        setIsLoading(false);
     };
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
+    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: [
                     dimensions,
                     style,
                     // If we have a blurhash, we don't want to show a background color
@@ -35,12 +27,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,
-                    // We are disabling the opacity animation in the new architecture because it is still slow
-                    // We will bring this back once we are on RN81+ aka a version with this fix
-                    { position: "absolute", opacity: isNewArchitectureEnabled ? 0 : opacity },
-                ], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] }));
+                } })] }));
 });
 const useImageDimensions = (props) => {
     const screenDimensions = useScreenDimensions();
@@ -64,7 +51,7 @@ const useImageDimensions = (props) => {
 };
 export const ImageSkeleton = ({ dimensions, blurhash, style }) => {
     if (!!blurhash) {
-        return (_jsx(Flex, { ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) }));
+        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) }));
     }
     return (_jsx(Flex, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.6.0",
+  "version": "20.8.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"