@artsy/palette-mobile 14.0.2 → 14.0.4

package/dist/elements/Avatar/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Image } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, withDelay, } from "react-native-reanimated";
 import { useColor } from "../../utils/hooks";
@@ -30,13 +30,15 @@ export const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
     const color = useColor();
     const [loading, setLoading] = useState(true);
     const opacity = useSharedValue(0);
-    opacity.value = withDelay(100, withTiming(1, {
-        duration: 200,
-        easing: Easing.sin,
-    }));
+    useEffect(() => {
+        opacity.set(() => withDelay(100, withTiming(1, {
+            duration: 200,
+            easing: Easing.sin,
+        })));
+    }, [loading]);
     const style = useAnimatedStyle(() => {
         return {
-            opacity: loading ? 0 : opacity.value,
+            opacity: loading ? 0 : opacity.get(),
         };
     }, [loading]);
     const { diameter, textSize } = VARIANTS[size];

package/dist/elements/ButtonNew/Button.js

@@ -19,7 +19,7 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
     useAnimatedReaction(() => {
         return pressedV.value;
     }, (pressedVal) => {
-        return (pressAnimationProgress.value = withTiming(pressedVal, {
+        return pressAnimationProgress.set(() => withTiming(pressedVal, {
             duration: ANIMATION_DURATION,
         }));
     });
@@ -59,8 +59,8 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
             };
         }
         return {
-            backgroundColor: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
-            borderColor: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
+            backgroundColor: interpolateColor(pressAnimationProgress.get(), [0, 1], [colors.active.bg, colors.pressed.bg]),
+            borderColor: interpolateColor(pressAnimationProgress.get(), [0, 1], [colors.active.border, colors.pressed.border]),
         };
     });
     const textAnim = useAnimatedStyle(() => {
@@ -69,8 +69,8 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
             return { color: "rgba(0, 0, 0, 0)" };
         }
         return {
-            color: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
-            textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
+            color: interpolateColor(pressAnimationProgress.get(), [0, 1], [colors.active.text, colors.pressed.text]),
+            textDecorationLine: pressAnimationProgress.get() > 0 ? "underline" : "none",
         };
     });
     return (_jsx(Pressable, { disabled: disabled, onPressIn: () => {

package/dist/elements/ButtonNew/Button.tests.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent } from "@testing-library/react-native";
+import { fireEvent, screen } from "@testing-library/react-native";
 import { Button } from "./Button";
 import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 import { Spinner } from "../Spinner";
@@ -10,20 +10,20 @@ describe("Button", () => {
     });
     it("invokes the onClick callback", () => {
         const onPress = jest.fn();
-        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, children: "wow" }));
-        fireEvent.press(getByTestId("the-button"));
+        renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, children: "wow" }));
+        fireEvent.press(screen.getByTestId("the-button"));
         expect(onPress).toHaveBeenCalled();
     });
     it("does not invoke the onClick callback if loading is true", () => {
         const onPress = jest.fn();
-        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
-        fireEvent.press(getByTestId("the-button"));
+        renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
+        fireEvent.press(screen.getByTestId("the-button"));
         expect(onPress).not.toHaveBeenCalled();
     });
     it("does not invoke the onClick callback if disabled is true", () => {
         const onPress = jest.fn();
-        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
-        fireEvent.press(getByTestId("the-button"));
+        renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
+        fireEvent.press(screen.getByTestId("the-button"));
         expect(onPress).not.toHaveBeenCalled();
     });
 });

package/dist/elements/Dialog/Dialog.tests.js

@@ -1,54 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent } from "@testing-library/react-native";
+import { fireEvent, screen } from "@testing-library/react-native";
 import { Dialog } from "./Dialog";
 import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("Dialog", () => {
     it("renders without error", () => {
-        const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             } }));
-        expect(getByText("title")).toBeTruthy();
+        expect(screen.getByText("title")).toBeOnTheScreen();
     });
     it("should render details if it is passed", () => {
-        const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
+        renderWithWrappers(_jsx(Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             } }));
-        expect(getByText("Some unique detail")).toBeTruthy();
+        expect(screen.getByText("Some unique detail")).toBeOnTheScreen();
     });
     it("should render the primary action button", () => {
         const primaryActionMock = jest.fn();
-        const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: primaryActionMock,
             } }));
-        const primaryButton = getByTestId("dialog-primary-action-button");
+        const primaryButton = screen.getByTestId("dialog-primary-action-button");
         fireEvent.press(primaryButton);
         expect(primaryActionMock).toHaveBeenCalled();
-        expect(getByText("Primary Action Button")).toBeTruthy();
+        expect(screen.getByText("Primary Action Button")).toBeOnTheScreen();
     });
     it("should render the secondary action button if it is passed", () => {
         const secondaryActionMock = jest.fn();
-        const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             }, secondaryCta: {
                 text: "Secondary Action Button",
                 onPress: secondaryActionMock,
             } }));
-        const secondaryButton = getByTestId("dialog-secondary-action-button");
+        const secondaryButton = screen.getByTestId("dialog-secondary-action-button");
         fireEvent.press(secondaryButton);
         expect(secondaryActionMock).toHaveBeenCalled();
-        expect(getByText("Secondary Action Button")).toBeTruthy();
+        expect(screen.getByText("Secondary Action Button")).toBeOnTheScreen();
     });
     it("should call onBackgroundPress when backdrop is pressed", () => {
         const onBackgroundPressMock = jest.fn();
-        const { getByTestId } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
+        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             } }));
-        fireEvent.press(getByTestId("dialog-backdrop"));
+        fireEvent.press(screen.getByTestId("dialog-backdrop"));
         expect(onBackgroundPressMock).toHaveBeenCalled();
     });
 });

package/dist/elements/Image/Image.js

@@ -15,12 +15,12 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
     const color = useColor();
     const animatedStyles = useAnimatedStyle(() => {
         return {
-            opacity: withTiming(loading.value ? 0 : 1, { duration: 200, easing: Easing.sin }),
+            opacity: withTiming(loading.get() ? 0 : 1, { duration: 200, easing: Easing.sin }),
         };
     }, []);
     const onAnimationEnd = useCallback(() => {
         "worklet";
-        loading.value = false;
+        loading.set(() => false);
         // No need to get the js thread involved here
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/dist/elements/Input/Input.d.ts

@@ -11,6 +11,10 @@ export interface InputProps extends Omit<TextInputProps, "placeholder" | "onChan
      * These lead to some issues when the parent component wants further control of the value
      */
     disabled?: boolean;
+    /**
+     * Enables the clear button
+     * @warning This prop only works if `value` is specified
+     */
     enableClearButton?: boolean;
     error?: string;
     fixedRightPlaceholder?: string;
@@ -60,6 +64,13 @@ export interface InputProps extends Omit<TextInputProps, "placeholder" | "onChan
      * <Input mask="999-99-9999 999-99-9999 999-99-9999" />
      */
     mask?: string | string[] | undefined;
+    /**
+     * @warning This prop affects the performance of the input
+     * and should be avoided if possible.
+     * Use `defaultValue` instead.
+     * See: https://github.com/facebook/react-native-website/pull/4247
+     */
+    value?: string | undefined;
 }
 export declare const HORIZONTAL_PADDING = 15;
 export declare const INPUT_BORDER_RADIUS = 4;

package/dist/elements/Input/Input.js

@@ -148,14 +148,17 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
             fontFamily: fontFamily,
         };
     }, [fontFamily, space]);
-    animatedState.value = getInputState({
-        isFocused: !!focused,
-        value: value,
-    });
+    useEffect(() => {
+        const inputState = getInputState({
+            isFocused: !!focused,
+            value: value,
+        });
+        animatedState.set(() => inputState);
+    }, [value, focused, animatedState]);
     const textInputAnimatedStyles = useAnimatedStyle(() => {
         return {
-            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
-            color: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputTextColor),
+            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.get()].inputBorderColor),
+            color: withTiming(INPUT_VARIANTS[variant][animatedState.get()].inputTextColor),
         };
     });
     const labelAnimatedStyles = useAnimatedStyle(() => {
@@ -165,15 +168,15 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
             ? textInputPaddingLeft - 3
             : HORIZONTAL_PADDING;
         return {
-            color: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelColor),
-            top: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelTop),
-            fontSize: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelFontSize),
+            color: withTiming(INPUT_VARIANTS[variant][animatedState.get()].labelColor),
+            top: withTiming(INPUT_VARIANTS[variant][animatedState.get()].labelTop),
+            fontSize: withTiming(INPUT_VARIANTS[variant][animatedState.get()].labelFontSize),
             marginLeft: withTiming(marginLeft),
         };
     });
     const selectComponentStyles = useAnimatedStyle(() => {
         return {
-            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
+            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.get()].inputBorderColor),
         };
     });
     const handleFocus = (e) => {
@@ -349,7 +352,9 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                     ...styles,
                 }, children: placeholderString }))) }));
     }, [placeholder, styles]);
-    return (_jsxs(Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), _jsx(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
+    return (_jsxs(Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), _jsx(AnimatedStyledInput
+            // Only use a controlled input if specified
+            , { ...((propValue !== undefined && propValue !== null) || mask ? { value } : {}), onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
                     setInputWidth(event.nativeEvent.layout.width);
                 }, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
 });

package/dist/elements/Input/Input.tests.js

@@ -1,50 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent } from "@testing-library/react-native";
+import { fireEvent, screen } from "@testing-library/react-native";
 import { Input } from "./Input";
 import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("Input", () => {
     const testID = "input";
     it("renders an instance of native TextInput", () => {
-        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID }));
-        expect(getByTestId(testID).type).toEqual("TextInput");
+        renderWithWrappers(_jsx(Input, { testID: testID }));
+        expect(screen.getByTestId(testID).type).toEqual("TextInput");
     });
     it("uses correct font family", () => {
-        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID }));
-        expect(getByTestId(testID).props.style[0].fontFamily).toEqual("Unica77LL-Regular");
+        renderWithWrappers(_jsx(Input, { testID: testID, placeholder: "input" }));
+        expect(screen.getByPlaceholderText("input")).toHaveStyle({ fontFamily: "Unica77LL-Regular" });
     });
     it("mutates given text as value", () => {
-        const { getByTestId, getByDisplayValue } = renderWithWrappers(_jsx(Input, { testID: testID }));
-        fireEvent.changeText(getByTestId(testID), "mockStr");
-        getByDisplayValue("mockStr");
+        renderWithWrappers(_jsx(Input, { testID: testID }));
+        fireEvent.changeText(screen.getByTestId(testID), "mockStr");
+        screen.getByDisplayValue("mockStr");
     });
     it("Shows an error message when input has an error", () => {
-        const { getByText } = renderWithWrappers(_jsx(Input, { value: "", error: "input has an error" }));
-        getByText("input has an error");
+        renderWithWrappers(_jsx(Input, { value: "", error: "input has an error" }));
+        screen.getByText("input has an error");
     });
-    it("should render the clear button when input is not empty and pressing it should clear the input", () => {
-        const { getByDisplayValue, queryByDisplayValue, getByPlaceholderText, getByLabelText } = renderWithWrappers(_jsx(Input, { placeholder: "USD", enableClearButton: true }));
-        // placeholder is rendered
-        getByPlaceholderText("USD");
-        fireEvent(getByPlaceholderText("USD"), "onChangeText", "Banksy");
-        getByDisplayValue("Banksy");
-        getByLabelText("Clear input button");
-        fireEvent.press(getByLabelText("Clear input button"));
-        expect(queryByDisplayValue("Banksy")).toBeFalsy();
+    it("should render the clear button when input is not empty and pressing it should clear the input", async () => {
+        renderWithWrappers(_jsx(Input, { testID: testID, placeholder: "USD", enableClearButton: true }));
+        fireEvent(screen.getByTestId(testID), "onChangeText", "Banksy");
+        await screen.findByLabelText("Clear input button");
+        fireEvent.press(screen.getByLabelText("Clear input button"));
+        expect(screen.queryByDisplayValue("Banksy")).toBeFalsy();
     });
     it("should show the correct show/hide password icon", () => {
-        const { getByPlaceholderText, queryByLabelText, getByLabelText } = renderWithWrappers(_jsx(Input, { placeholder: "password", secureTextEntry: true }));
-        getByPlaceholderText("password");
-        getByLabelText("show password button");
-        fireEvent(getByPlaceholderText("password"), "onChangeText", "123456");
-        fireEvent.press(getByLabelText("show password button"));
-        expect(queryByLabelText("show password button")).toBeFalsy();
-        getByLabelText("hide password button");
-        fireEvent.press(getByLabelText("hide password button"));
-        expect(queryByLabelText("hide password button")).toBeFalsy();
-        getByLabelText("show password button");
+        renderWithWrappers(_jsx(Input, { placeholder: "password", secureTextEntry: true }));
+        screen.getByPlaceholderText("password");
+        screen.getByLabelText("show password button");
+        fireEvent(screen.getByPlaceholderText("password"), "onChangeText", "123456");
+        fireEvent.press(screen.getByLabelText("show password button"));
+        expect(screen.queryByLabelText("show password button")).toBeFalsy();
+        screen.getByLabelText("hide password button");
+        fireEvent.press(screen.getByLabelText("hide password button"));
+        expect(screen.queryByLabelText("hide password button")).toBeFalsy();
+        screen.getByLabelText("show password button");
     });
     it("enables scrolling when multiline is true", () => {
-        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID, multiline: true }));
-        expect(getByTestId(testID).props.scrollEnabled).toBe(true);
+        renderWithWrappers(_jsx(Input, { testID: testID, multiline: true }));
+        expect(screen.getByTestId(testID).props.scrollEnabled).toBe(true);
     });
 });

package/dist/elements/Message/Message.tests.js

@@ -1,26 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent } from "@testing-library/react-native";
+import { fireEvent, screen } from "@testing-library/react-native";
 import { Message } from "./Message";
 import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("Message", () => {
     it("it renders", () => {
-        const MessageComponent = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
-        expect(MessageComponent).toBeTruthy();
-        expect(MessageComponent.getByText("title")).toBeDefined();
-        expect(MessageComponent.getByText("text")).toBeDefined();
+        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
+        expect(screen.getByText("title")).toBeOnTheScreen();
+        expect(screen.getByText("text")).toBeOnTheScreen();
     });
     it("does not show close button when !showCloseButton", () => {
-        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
-        expect(() => getByTestId("Message-close-button")).toThrow("Unable to find an element with testID: Message-close-button");
+        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
+        expect(screen.queryByTestId("Message-close-button")).not.toBeOnTheScreen();
     });
     it("shows close button when showCloseButton", () => {
-        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
-        expect(getByTestId("Message-close-button")).toBeDefined();
+        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
+        expect(screen.getByTestId("Message-close-button")).toBeOnTheScreen();
     });
     it("fires onClose press event", () => {
         const onClose = jest.fn();
-        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
-        fireEvent.press(getByTestId("Message-close-button"));
+        renderWithWrappers(_jsx(Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
+        fireEvent.press(screen.getByTestId("Message-close-button"));
         expect(onClose).toHaveBeenCalled();
     });
 });

package/dist/elements/Pill/Pill.tests.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { Pill } from "./Pill";
 import { Theme } from "../../Theme";
 describe("Pill", () => {
     it("invokes the onClick callback", () => {
         const onPress = jest.fn();
-        const { getByText } = render(_jsx(Theme, { children: _jsx(Pill, { onPress: onPress, children: "wow" }) }));
-        fireEvent.press(getByText("wow"));
+        render(_jsx(Theme, { children: _jsx(Pill, { onPress: onPress, children: "wow" }) }));
+        fireEvent.press(screen.getByText("wow"));
         expect(onPress).toHaveBeenCalled();
     });
     it("should not be pressable if disabled is passed", () => {
         const onPress = jest.fn();
-        const { getByText } = render(_jsx(Theme, { children: _jsx(Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
-        fireEvent.press(getByText("Press me"));
+        render(_jsx(Theme, { children: _jsx(Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
+        fireEvent.press(screen.getByText("Press me"));
         expect(onPress).not.toHaveBeenCalled();
     });
 });

package/dist/elements/ProgressBar/ProgressBar.js

@@ -11,11 +11,11 @@ export const ProgressBar = ({ animationDuration = 200, backgroundColor = "black3
     const width = useSharedValue(0);
     const progress = clamp(unclampedProgress, 0, 100);
     const progressAnim = useAnimatedStyle(() => {
-        return { width: `${width.value}%` };
+        return { width: `${width.get()}%` };
     });
     const [onCompletionCalled, setOnCompletionCalled] = useState(false);
     useEffect(() => {
-        width.value = withTiming(progress, { duration: animationDuration });
+        width.set(() => withTiming(progress, { duration: animationDuration }));
         if (progress === 100 && !onCompletionCalled) {
             onCompletion?.();
             setOnCompletionCalled(true);

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

@@ -3,7 +3,7 @@ import { runOnJS, useAnimatedReaction, useSharedValue } from "react-native-reani
 import { NAVBAR_HEIGHT } from "../constants";
 export const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
     const listenForScroll = useSharedValue(true);
-    const [currScrollY, setCurrScrollY] = useState(scrollY.value);
+    const [currScrollY, setCurrScrollY] = useState(scrollY.get());
     const HEADER_HEIGHT = useMemo(() => NAVBAR_HEIGHT + scrollYOffset, [scrollYOffset]);
     // Needed to run on JS thread
     const update = (y) => {
@@ -11,14 +11,14 @@ export const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
     };
     useEffect(() => {
         const timer = setTimeout(() => {
-            listenForScroll.value = false;
+            listenForScroll.set(() => false);
         }, 1000);
         return () => {
             clearTimeout(timer);
         };
-    }, [listenForScroll]);
+    }, [listenForScroll.get()]);
     useAnimatedReaction(() => {
-        return [scrollY.value, listenForScroll.value];
+        return [scrollY.get(), listenForScroll.get()];
     }, ([animatedScrollY, isListeningForScroll], previousScroll) => {
         const [prevScrollY] = previousScroll ?? [0, false];
         // Hacky way to avoid some weird header behavior.

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

@@ -8,7 +8,7 @@ export const useListenForScreenScroll = () => {
     const scrollY = useAnimatedHeaderScrolling(animatedScrollY, scrollYOffset);
     const scrollHandler = useAnimatedScrollHandler({
         onScroll: (event) => {
-            animatedScrollY.value = event.contentOffset.y;
+            animatedScrollY.set(() => event.contentOffset.y);
         },
     });
     useEffect(() => {

package/dist/elements/SearchInput/RoundSearchInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import isArray from "lodash/isArray";
 import isString from "lodash/isString";
 import { useCallback, useRef, useState } from "react";
-import { LayoutAnimation, TextInput } from "react-native";
+import { TextInput } from "react-native";
 import { ArrowLeftIcon, MagnifyingGlassIcon } from "../../svgs";
 import { useColor, useTheme } from "../../utils/hooks";
 import { Flex } from "../Flex";
@@ -76,7 +76,6 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
                 // anything above that would lead to an error
                 maxLength: 100, clearButtonMode: "always", placeholderTextColor: color("black60"), onFocus: (e) => {
                     setIsFocused(true);
-                    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
                     rest.onFocus?.(e);
                 }, enterKeyHint: "search", returnKeyType: "search" }), _jsx(Flex, { position: "absolute", height: SEARCH_INPUT_CONTAINER_HEIGHT, justifyContent: "center", alignItems: "center", style: {
                     paddingHorizontal: CONTAINER_HORIZONTAL_PADDING,

package/dist/elements/Skeleton/Skeleton.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated";
 import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
@@ -15,9 +16,11 @@ import { Text } from "../Text";
  */
 export const Skeleton = ({ children }) => {
     const opacity = useSharedValue(0.5);
-    opacity.value = withRepeat(withTiming(1, { duration: 1000, easing: Easing.ease }), -1, true);
+    useEffect(() => {
+        opacity.set(() => withRepeat(withTiming(1, { duration: 1000, easing: Easing.ease }), -1, true));
+    }, [opacity]);
     const fadeLoopAnim = useAnimatedStyle(() => {
-        return { opacity: opacity.value };
+        return { opacity: opacity.get() };
     }, []);
     return _jsx(Animated.View, { style: fadeLoopAnim, children: children });
 };

package/dist/elements/ToolTip/ToolTip.tests.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from "@testing-library/react-native";
 import { ToolTip } from "./ToolTip";
 import { ScreenDimensionsProvider } from "../../utils/hooks";
 import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 import { Text } from "../Text";
 describe("ToolTip", () => {
     it("shows the flyout when enabled", () => {
-        const { queryByTestId } = renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
-        expect(queryByTestId("flyout")).not.toBeNull();
+        renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
+        expect(screen.getByTestId("flyout")).toBeOnTheScreen();
     });
     it("Does not show the flyout when disabled", () => {
-        const { queryByTestId } = renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
-        expect(queryByTestId("flyout")).toBeNull();
+        renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
+        expect(screen.queryByTestId("flyout")).not.toBeOnTheScreen();
     });
 });

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -10,23 +10,23 @@ export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onC
     const boxDimensions = useSharedValue(initialBoxDimensions);
     const animationStyle = useAnimatedStyle(() => {
         return {
-            height: withTiming(boxDimensions.value.height, {
+            height: withTiming(boxDimensions.get().height, {
                 duration: 500,
             }),
-            width: withTiming(boxDimensions.value.width, {
+            width: withTiming(boxDimensions.get().width, {
                 duration: 500,
             }),
         };
     });
     useEffect(() => {
         if (text) {
-            boxDimensions.value = {
+            boxDimensions.set(() => ({
                 height,
                 width,
-            };
+            }));
         }
         else {
-            boxDimensions.value = initialBoxDimensions;
+            boxDimensions.set(() => initialBoxDimensions);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [text, height, width]);

package/dist/setupJest.d.ts

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

package/dist/setupJest.js

@@ -1,9 +1,7 @@
 // @ts-expect-error
 global.__TEST__ = true;
+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/Libraries/Animated/NativeAnimatedHelper");
 require("react-native-reanimated").setUpTests();
-// @ts-expect-error
-global.__reanimatedWorkletInit = () => { };
-jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "14.0.2",
+  "version": "14.0.4",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -104,7 +104,7 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "0.6.10",
-    "eslint-plugin-testing-library": "^5.10.2",
+    "eslint-plugin-testing-library": "6.4.0",
     "husky": "^8.0.3",
     "jest": "29.6.3",
     "jest-environment-jsdom": "29.4.2",