@artsy/palette-mobile 11.2.11 → 11.2.13

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v11.2.13 (Tue Aug 01 2023)
+
+#### 🐛 Bug Fix
+
+- feat(Image): enable more styling on the Image element and more [#120](https://github.com/artsy/palette-mobile/pull/120) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
+# v11.2.12 (Fri Jul 28 2023)
+
+#### 🐛 Bug Fix
+
+- build(REVERT): bumps palette to reanimated 3 [#131](https://github.com/artsy/palette-mobile/pull/131) ([@gkartalis](https://github.com/gkartalis))
+
+#### Authors: 1
+
+- George ([@gkartalis](https://github.com/gkartalis))
+
+---
+
 # v11.2.11 (Fri Jul 28 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/ButtonNew/Button.js

@@ -80,6 +80,7 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
     };
     const colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
     const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         const colors = colorsForVariantAndState[variant];
         if (disabled) {
             return {
@@ -93,6 +94,7 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
         };
     });
     const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         const colors = colorsForVariantAndState[variant];
         if (loading) {
             return { color: "rgba(0, 0, 0, 0)" };
@@ -123,6 +125,7 @@ const useStateWithProp = (prop) => {
         setState(!!prop);
     }, [prop]);
     const stateV = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        "worklet";
         if (!!state) {
             return 1;
         }

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { FlexProps } from "../Flex";
-export interface ImageProps extends FlexProps {
+import { FastImageProps } from "react-native-fast-image";
+type CustomFastImageProps = Omit<FastImageProps, "onLoadStart" | "onLoadEnd" | "source">;
+export interface ImageProps extends CustomFastImageProps {
     /** Supplied aspect ratio of image. If none provided, defaults to 1 */
     aspectRatio?: number;
     /** Supplied width of image. If none provided, defaults to screen width */
@@ -13,3 +14,4 @@ export interface ImageProps extends FlexProps {
     src: string;
 }
 export declare const Image: React.FC<ImageProps>;
+export {};

package/dist/elements/Image/Image.js

@@ -11,12 +11,14 @@ const react_native_1 = require("react-native");
 const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
 const react_native_reanimated_1 = require("react-native-reanimated");
 const createGeminiUrl_1 = require("../../utils/createGeminiUrl");
+const hooks_1 = require("../../utils/hooks");
 const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
 const Flex_1 = require("../Flex");
 const Skeleton_1 = require("../Skeleton");
-const Image = ({ aspectRatio, width, height, performResize = true, src, ...flexProps }) => {
+const Image = ({ aspectRatio, width, height, performResize = true, src, style, resizeMode, ...flexProps }) => {
     const [loading, setLoading] = (0, react_1.useState)(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
+    const color = (0, hooks_1.useColor)();
     let uri = src;
     if (performResize) {
         uri = (0, createGeminiUrl_1.createGeminiUrl)({
@@ -25,7 +27,7 @@ const Image = ({ aspectRatio, width, height, performResize = true, src, ...flexP
             height: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
         });
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "relative", ...flexProps, children: [!!loading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", zIndex: 1, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { ...dimensions }) }) })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: { opacity: loading ? 0 : 1 }, transition: { type: "timing", duration: 400, easing: react_native_reanimated_1.Easing.sin }, children: (0, jsx_runtime_1.jsx)(react_native_fast_image_1.default, { style: dimensions, onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), source: {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "relative", ...flexProps, children: [!!loading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", zIndex: 1, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { ...dimensions }) }) })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: { opacity: loading ? 0 : 1 }, transition: { type: "timing", duration: 400, easing: react_native_reanimated_1.Easing.sin }, children: (0, jsx_runtime_1.jsx)(react_native_fast_image_1.default, { style: [dimensions, style, { backgroundColor: color("black30") }], resizeMode: resizeMode, onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), source: {
                         priority: react_native_fast_image_1.default.priority.normal,
                         uri,
                     } }) })] }));
@@ -40,7 +42,7 @@ const useImageDimensions = (props) => {
     }
     else {
         if (!props.aspectRatio) {
-            console.error("[CachedImage] Error: `aspectRatio` is required if `height` is not provided.");
+            console.error("[Image] Error: `aspectRatio` is required if `height` is not provided.");
         }
         const aspectRatio = props.aspectRatio ?? 1;
         imageHeight = imageWidth / aspectRatio;

package/dist/elements/Image/Image.stories.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("@storybook/react-native");
 const Image_1 = require("./Image");
+const Flex_1 = require("../Flex");
 (0, react_native_1.storiesOf)("Image", module)
     .add("With default fallback screen width", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
     .add("With width and height", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
     .add("With aspect ratio", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("Without automatic resizing", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })));
+    .add("Without automatic resizing", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With percentage width and height", () => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 0.69 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg", height: 260, width: 180, style: { width: "100%", height: "100%" } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 1 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { src: "https://i.imgur.com/b9IZinu.gif", width: 200, height: 200, style: { width: "100%", height: "100%" } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 1.2 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { width: 200, height: 240, src: "https://i.imgur.com/non-existing-image.gif", style: { width: "100%", height: "100%" } }) })] }));
+});

package/dist/elements/Pill/Pill.js

@@ -41,6 +41,7 @@ const Pill = ({ variant = "default", src, selected, disabled, Icon, children, on
     const stateString = selected ? "selected" : disabled ? "disabled" : "default";
     const color = TEXT_COLOR[variant][stateString];
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(() => ({ hovered, pressed }) => {
+                "worklet";
                 return {
                     opacity: hovered || pressed ? 0.5 : 1,
                 };

package/dist/elements/ProgressBar/ProgressBar.js

@@ -35,6 +35,7 @@ const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", hei
     const width = (0, react_native_reanimated_1.useSharedValue)("0%");
     const progress = clamp(unclampedProgress, 0, 100);
     const progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         return { width: width.value };
     });
     const [onCompletionCalled, setOnCompletionCalled] = (0, react_1.useState)(false);

package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.js

@@ -20,8 +20,10 @@ const useAnimatedHeaderScrolling = (scrollY) => {
         };
     }, [listenForScroll]);
     (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+        "worklet";
         return [scrollY.value, listenForScroll.value];
     }, ([animatedScrollY, isListeningForScroll], previousScroll) => {
+        "worklet";
         const [prevScrollY] = previousScroll ?? [0, false];
         // Hacky way to avoid some weird header behavior.
         // look at HACKS.md for more info.

package/dist/elements/Screen/hooks/useListenForScreenScroll.js

@@ -11,6 +11,7 @@ const useListenForScreenScroll = () => {
     const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY);
     const scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
         onScroll: (event) => {
+            "worklet";
             animatedScrollY.value = event.contentOffset.y;
         },
     });

package/dist/elements/Skeleton/Skeleton.js

@@ -43,6 +43,7 @@ const Skeleton = ({ children }) => {
     const opacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
     opacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, { duration: 1000, easing: react_native_reanimated_1.Easing.ease }), -1, true);
     const fadeLoopAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         return { opacity: opacity.value };
     }, []);
     return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: fadeLoopAnim, children: children });

package/dist/elements/Tabs/SubTabBar.js

@@ -17,6 +17,7 @@ const SubTabBar = ({ children }) => {
     const scrollY = (0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)();
     const space = (0, useSpace_1.useSpace)();
     const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         return {
             transform: [
                 {

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -35,6 +35,7 @@ const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, o
     const initialBoxDimensions = { height: 0, width: 0 };
     const boxDimensions = (0, react_native_reanimated_1.useSharedValue)(initialBoxDimensions);
     const animationStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         return {
             height: (0, react_native_reanimated_1.withTiming)(boxDimensions.value.height, {
                 duration: 500,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.2.11",
+  "version": "11.2.13",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -116,7 +116,7 @@
     "react-native-flipper": "0.178.1",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "^3.3.0",
+    "react-native-reanimated": "2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-svg": "13.7.0",
     "react-test-renderer": "18.2.0",