@artsy/palette-mobile 22.1.0--canary.424.5073.0 → 22.1.0--canary.425.5083.0

package/dist/elements/Image/Image.js

@@ -3,7 +3,8 @@ import FastImage from "@d11/react-native-fast-image";
 import { memo, useState } from "react";
 // @ts-expect-error
 import { Blurhash } from "react-native-blurhash";
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { getImageURL } from "./helpers/getImageURL";
 import { DEFAULT_ANIMATION_DURATION } from "../../constants";
 import { useColor } from "../../utils/hooks";
@@ -17,7 +18,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
     const color = useColor();
     const onLoadEnd = () => {
         opacity.value = withSpring(0, { duration: DEFAULT_ANIMATION_DURATION }, () => {
-            runOnJS(setIsLoading)(false);
+            scheduleOnRN(setIsLoading, false);
         });
     };
     const skeletonStyle = useAnimatedStyle(() => {

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

@@ -13,6 +13,7 @@ export interface HeaderProps {
     title?: string | JSX.Element;
     titleProps?: FlexProps;
     titleShown?: boolean;
+    zIndex?: number;
 }
 export declare const AnimatedHeader: React.FC<HeaderProps>;
 export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -11,13 +11,13 @@ import { Touchable } from "../Touchable";
 export const AnimatedHeader = (props) => {
     return _jsx(Header, { animated: true, ...props });
 };
-export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
+export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, zIndex = ZINDEX.header, }) => {
     const { width } = useScreenDimensions();
     const space = useSpace();
     // Assumes small left and right elements, it protects from overflowing
     // but doesn't cover edge cases where right or left are bigger
     const centerMaxWidth = width - space(4) - DEFAULT_ICON_SIZE * 2;
-    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: zIndex, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
 };
 const Right = ({ hideRightElements, rightElements }) => {
     return _jsx(_Fragment, { children: !hideRightElements && rightElements });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "22.1.0--canary.424.5073.0",
+  "version": "22.1.0--canary.425.5083.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"
@@ -124,9 +124,10 @@
     "react-native": "0.81.5",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "3.19.4",
+    "react-native-reanimated": "4.1.5",
     "react-native-safe-area-context": "5.6.0",
     "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.6.1",
     "react-test-renderer": "19.1.0",
     "rimraf": "4.1.2",
     "styled-components": "6.1.19",