@artsy/palette-mobile 14.0.40 → 14.0.41

package/dist/elements/Screen/Header.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MotiView } from "moti";
-import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
+import { Dimensions } from "react-native";
+import Animated, { Easing, FadeIn, FadeOut, useDerivedValue } from "react-native-reanimated";
 import { useScreenScrollContext } from "./ScreenScrollContext";
+import { BOTTOM_TABS_HEIGHT, STICKY_BAR_HEIGHT } from "./StickySubHeader";
 import { NAVBAR_HEIGHT, ZINDEX } from "./constants";
 import { DEFAULT_HIT_SLOP } from "../../constants";
 import { ArrowLeftIcon } from "../../svgs/ArrowLeftIcon";
@@ -18,7 +20,17 @@ const Right = ({ hideRightElements, rightElements }) => {
     return _jsx(_Fragment, { children: !hideRightElements && rightElements });
 };
 const Center = ({ animated, hideTitle, title }) => {
-    const { scrollYOffset = 0, currentScrollY = 0 } = useScreenScrollContext();
+    const { scrollYOffset = 0, currentScrollYAnimated, scrollViewDimensionsAnimated, } = useScreenScrollContext();
+    const { height: screenHeight } = Dimensions.get("window");
+    const scrollViewContentHeight = screenHeight - NAVBAR_HEIGHT - STICKY_BAR_HEIGHT - BOTTOM_TABS_HEIGHT;
+    // Show / hide the title to avoid rerenders, which retrigger the animation
+    const display = useDerivedValue(() => {
+        // The user is scrolling on a screen that is too small to show the small header
+        if (scrollViewDimensionsAnimated?.value < scrollViewContentHeight) {
+            return "none";
+        }
+        return currentScrollYAnimated.value < NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
+    }, [currentScrollYAnimated, scrollYOffset]);
     if (hideTitle) {
         return null;
     }
@@ -26,12 +38,10 @@ const Center = ({ animated, hideTitle, title }) => {
     if (!animated) {
         return titleTextElement;
     }
-    // Show / hide the title to avoid rerenders, which retrigger the animation
-    const display = currentScrollY < NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
     return (_jsx(Animated.View, { entering: FadeIn.duration(400).easing(Easing.out(Easing.exp)), exiting: FadeOut.duration(400).easing(Easing.out(Easing.exp)), style: {
-            display,
+            display: display.value,
         }, children: _jsx(MotiView, { animate: {
-                opacity: display === "flex" ? 1 : 0,
+                opacity: display.value === "flex" ? 1 : 0,
             }, children: titleTextElement }) }));
 };
 const Left = ({ hideLeftElements, leftElements, onBack }) => {

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

@@ -1,8 +1,11 @@
 /// <reference types="react" />
+import { SharedValue } from "react-native-reanimated";
 export interface ScreenScrollContextProps {
+    currentScrollYAnimated: SharedValue<number>;
     currentScrollY: number;
     updateCurrentScrollY: (scrollY: number) => void;
     scrollYOffset?: number;
+    scrollViewDimensionsAnimated: SharedValue<number>;
     updateScrollYOffset: (offset: number) => void;
 }
 export declare const ScreenScrollContextProvider: React.FC<React.PropsWithChildren<{}>>;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -1,17 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, createContext, useState } from "react";
+import { useSharedValue } from "react-native-reanimated";
 const ScreenScrollContext = createContext({
+    // Casting this value as ShareValue because we set it to useSharedValue(0) on Mount
+    currentScrollYAnimated: null,
     currentScrollY: 0,
     updateCurrentScrollY: () => { },
     scrollYOffset: undefined,
+    // Casting this value as ShareValue because we set it to useSharedValue(0) on Mount
+    scrollViewDimensionsAnimated: null,
     updateScrollYOffset: () => { },
 });
 export const ScreenScrollContextProvider = ({ children, }) => {
     const [currentScrollY, setCurrentScrollY] = useState(0);
     const [scrollYOffset, setScrollYOffset] = useState(undefined);
+    const currentScrollYAnimated = useSharedValue(0);
+    const scrollViewDimensionsAnimated = useSharedValue(0);
     const providerValue = {
+        currentScrollYAnimated,
         currentScrollY,
         scrollYOffset,
+        scrollViewDimensionsAnimated,
         updateCurrentScrollY: (scrollY) => {
             setCurrentScrollY(scrollY);
         },

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

@@ -9,4 +9,7 @@ export interface StickySubHeaderProps extends React.PropsWithChildren<{}> {
     subTitle?: string;
     Component?: React.ReactNode;
 }
+export declare const STICKY_BAR_HEIGHT = 42;
+export declare const DEFAULT_SEPARATOR_COMPONENT: JSX.Element;
+export declare const BOTTOM_TABS_HEIGHT = 65;
 export declare const StickySubHeader: React.FC<StickySubHeaderProps>;

package/dist/elements/Screen/StickySubHeader.js

@@ -1,24 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
-import { useScreenScrollContext } from "./ScreenScrollContext";
-import { NAVBAR_HEIGHT } from "./constants";
+import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated";
+import { useShowLargeTitle } from "./hooks/useShowLargeTitle";
 import { useSpace } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Separator } from "../Separator";
 import { Text } from "../Text";
-const STICKY_BAR_HEIGHT = 42;
-const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "black5" });
+export const STICKY_BAR_HEIGHT = 42;
+export const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "black5" });
+export const BOTTOM_TABS_HEIGHT = 65;
 export const StickySubHeader = ({ title, largeTitle = false, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, Component, }) => {
-    const { currentScrollY, scrollYOffset = 0 } = useScreenScrollContext();
     const space = useSpace();
     const [stickyBarHeight, setStickyHeaderHeight] = useState(null);
-    const visible = useDerivedValue(() => {
-        if (stickyBarHeight === null) {
-            return true;
-        }
-        return currentScrollY < NAVBAR_HEIGHT + scrollYOffset;
-    }, [currentScrollY, scrollYOffset, stickyBarHeight]);
+    const { visible } = useShowLargeTitle({ stickyBarHeight });
     const handleLayout = (event) => {
         setStickyHeaderHeight(event.nativeEvent.layout.height);
     };
@@ -29,7 +23,7 @@ export const StickySubHeader = ({ title, largeTitle = false, separatorComponent
     const animatedStyles = useAnimatedStyle(() => {
         return {
             height: withTiming(visible.value ? stickyBarHeight || STICKY_BAR_HEIGHT : 0, {
-                duration: 100,
+                duration: 200,
             }),
             transform: [
                 {
@@ -39,6 +33,6 @@ export const StickySubHeader = ({ title, largeTitle = false, separatorComponent
                 },
             ],
         };
-    });
+    }, [visible.value, stickyBarHeight]);
     return (_jsxs(Flex, { children: [stickyBarHeight === null && (_jsx(Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: sharedStyles, children: _jsxs(Flex, { mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", color: "white100", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle })), Component] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle })), Component] }) }), children, children !== undefined && separatorComponent] }));
 };

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

@@ -1,14 +1,14 @@
 import { useEffect } from "react";
-import { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+import { useAnimatedScrollHandler } from "react-native-reanimated";
 import { useAnimatedHeaderScrolling } from "./useAnimatedHeaderScrolling";
 import { useScreenScrollContext } from "../ScreenScrollContext";
 export const useListenForScreenScroll = () => {
-    const { updateCurrentScrollY, scrollYOffset } = useScreenScrollContext();
-    const animatedScrollY = useSharedValue(0);
-    const scrollY = useAnimatedHeaderScrolling(animatedScrollY, scrollYOffset);
+    const { updateCurrentScrollY, scrollYOffset, currentScrollYAnimated, scrollViewDimensionsAnimated, } = useScreenScrollContext();
+    const scrollY = useAnimatedHeaderScrolling(currentScrollYAnimated, scrollYOffset);
     const scrollHandler = useAnimatedScrollHandler({
         onScroll: (event) => {
-            animatedScrollY.set(() => event.contentOffset.y);
+            currentScrollYAnimated.set(() => event.contentOffset.y);
+            scrollViewDimensionsAnimated.set(() => event.contentSize.height);
         },
     });
     useEffect(() => {

package/dist/elements/Screen/hooks/useShowLargeTitle.d.ts

@@ -0,0 +1,5 @@
+export declare const useShowLargeTitle: ({ stickyBarHeight }: {
+    stickyBarHeight: number | null;
+}) => {
+    visible: import("react-native-reanimated").DerivedValue<boolean>;
+};

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

@@ -0,0 +1,29 @@
+import { Dimensions } from "react-native";
+import { useDerivedValue } from "react-native-reanimated";
+import { useScreenScrollContext } from "../ScreenScrollContext";
+import { BOTTOM_TABS_HEIGHT, STICKY_BAR_HEIGHT } from "../StickySubHeader";
+import { NAVBAR_HEIGHT } from "../constants";
+export const useShowLargeTitle = ({ stickyBarHeight }) => {
+    const { currentScrollY, scrollYOffset = 0, currentScrollYAnimated, scrollViewDimensionsAnimated, } = useScreenScrollContext();
+    const { height: screenHeight } = Dimensions.get("window");
+    const scrollViewContentHeight = screenHeight - NAVBAR_HEIGHT - STICKY_BAR_HEIGHT - BOTTOM_TABS_HEIGHT;
+    const visible = useDerivedValue(() => {
+        // We show the big title if
+        if (
+        // We are still not yet done computing its height
+        stickyBarHeight === null ||
+            // The user didn't scroll yet
+            currentScrollYAnimated === null ||
+            // The user is scrolling on a screen that is too small to show the small header
+            scrollViewDimensionsAnimated?.value < scrollViewContentHeight) {
+            return true;
+        }
+        if (currentScrollYAnimated?.value < 0) {
+            return true;
+        }
+        return currentScrollYAnimated.value < NAVBAR_HEIGHT + scrollYOffset;
+    }, [currentScrollY, scrollYOffset, stickyBarHeight, currentScrollYAnimated]);
+    return {
+        visible,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "14.0.40",
+  "version": "14.0.41",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",