@artsy/palette-mobile 13.0.5 → 13.0.6

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v13.0.6 (Mon Sep 11 2023)
+
+#### 🐛 Bug Fix
+
+- feat(tabs): adds scroll offsets to the tabs when checking scroll position [#147](https://github.com/artsy/palette-mobile/pull/147) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v13.0.5 (Mon Sep 11 2023)
 
 #### 🐛 Bug Fix

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

@@ -9,6 +9,7 @@ export interface HeaderProps {
     onBack?: () => void;
     rightElements?: React.ReactNode;
     scrollY?: number;
+    scrollYOffset?: number;
     title?: string;
     titleProps?: FlexProps;
     titleShown?: boolean;

package/dist/elements/Screen/Header.js

@@ -35,11 +35,11 @@ const Spacer_1 = require("../Spacer");
 const Text_1 = require("../Text");
 const Touchable_1 = require("../Touchable");
 const AnimatedHeader = (props) => {
-    const { currentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    return (0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, animated: true, ...props });
+    const { currentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    return ((0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, scrollYOffset: scrollYOffset, animated: true, ...props }));
 };
 exports.AnimatedHeader = AnimatedHeader;
-const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, title, titleProps = {}, }) => {
+const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, scrollYOffset = 0, title, titleProps = {}, }) => {
     const Left = () => {
         if (hideLeftElements) {
             return null;
@@ -56,7 +56,7 @@ const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTit
             return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", width: "100%", ...titleProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }) }) }));
         }
         // Show / hide the title to avoid rerenders, which retrigger the animation
-        const display = scrollY < constants_1.NAVBAR_HEIGHT ? "none" : "flex";
+        const display = scrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), exiting: react_native_reanimated_1.FadeOut.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), style: {
                     display,
                     flex: 1,

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

@@ -2,6 +2,8 @@
 export interface ScreenScrollContextProps {
     currentScrollY: number;
     updateCurrentScrollY: (scrollY: number) => void;
+    scrollYOffset?: number;
+    updateScrollYOffset: (offset: number) => void;
 }
 export declare const ScreenScrollContextProvider: React.FC<React.PropsWithChildren>;
 export declare const useScreenScrollContext: () => ScreenScrollContextProps;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -6,14 +6,21 @@ const react_1 = require("react");
 const ScreenScrollContext = (0, react_1.createContext)({
     currentScrollY: 0,
     updateCurrentScrollY: () => { },
+    scrollYOffset: undefined,
+    updateScrollYOffset: () => { },
 });
 const ScreenScrollContextProvider = ({ children }) => {
     const [currentScrollY, setCurrentScrollY] = (0, react_1.useState)(0);
+    const [scrollYOffset, setScrollYOffset] = (0, react_1.useState)(undefined);
     const providerValue = {
         currentScrollY,
+        scrollYOffset,
         updateCurrentScrollY: (scrollY) => {
             setCurrentScrollY(scrollY);
         },
+        updateScrollYOffset: (yOffset) => {
+            setScrollYOffset(yOffset);
+        },
     };
     return ((0, jsx_runtime_1.jsx)(ScreenScrollContext.Provider, { value: providerValue, children: children }));
 };

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

@@ -1,2 +1,2 @@
 import { SharedValue } from "react-native-reanimated";
-export declare const useAnimatedHeaderScrolling: (scrollY: SharedValue<number>) => number;
+export declare const useAnimatedHeaderScrolling: (scrollY: SharedValue<number>, scrollYOffset?: number) => number;

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

@@ -4,9 +4,10 @@ exports.useAnimatedHeaderScrolling = void 0;
 const react_1 = require("react");
 const react_native_reanimated_1 = require("react-native-reanimated");
 const constants_1 = require("../constants");
-const useAnimatedHeaderScrolling = (scrollY) => {
+const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
     const listenForScroll = (0, react_native_reanimated_1.useSharedValue)(true);
     const [currScrollY, setCurrScrollY] = (0, react_1.useState)(scrollY.value);
+    const HEADER_HEIGHT = (0, react_1.useMemo)(() => constants_1.NAVBAR_HEIGHT + scrollYOffset, [scrollYOffset]);
     // Needed to run on JS thread
     const update = (y) => {
         setCurrScrollY(y);
@@ -25,17 +26,17 @@ const useAnimatedHeaderScrolling = (scrollY) => {
         const [prevScrollY] = previousScroll ?? [0, false];
         // Hacky way to avoid some weird header behavior.
         // look at HACKS.md for more info.
-        const suddenlyScrolled = Math.abs(animatedScrollY - prevScrollY) > constants_1.NAVBAR_HEIGHT;
+        const suddenlyScrolled = Math.abs(animatedScrollY - prevScrollY) > HEADER_HEIGHT;
         if (isListeningForScroll && suddenlyScrolled) {
             return;
         }
-        const prevTitleShown = prevScrollY >= constants_1.NAVBAR_HEIGHT;
-        const currTitleShown = animatedScrollY >= constants_1.NAVBAR_HEIGHT;
+        const prevTitleShown = prevScrollY >= HEADER_HEIGHT;
+        const currTitleShown = animatedScrollY >= HEADER_HEIGHT;
         if (prevTitleShown === currTitleShown) {
             return;
         }
         (0, react_native_reanimated_1.runOnJS)(update)(Math.floor(animatedScrollY));
-    }, [scrollY]);
+    }, [scrollY, HEADER_HEIGHT]);
     return currScrollY;
 };
 exports.useAnimatedHeaderScrolling = useAnimatedHeaderScrolling;

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

@@ -6,9 +6,9 @@ const react_native_reanimated_1 = require("react-native-reanimated");
 const useAnimatedHeaderScrolling_1 = require("./useAnimatedHeaderScrolling");
 const ScreenScrollContext_1 = require("../ScreenScrollContext");
 const useListenForScreenScroll = () => {
-    const { updateCurrentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
     const animatedScrollY = (0, react_native_reanimated_1.useSharedValue)(0);
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY);
+    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY, scrollYOffset);
     const scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
         onScroll: (event) => {
             animatedScrollY.value = event.contentOffset.y;

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -6,8 +6,8 @@ const react_native_collapsible_tab_view_1 = require("react-native-collapsible-ta
 const ScreenScrollContext_1 = require("../../Screen/ScreenScrollContext");
 const useAnimatedHeaderScrolling_1 = require("../../Screen/hooks/useAnimatedHeaderScrolling");
 const useListenForTabContentScroll = () => {
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)());
-    const { updateCurrentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)(), scrollYOffset);
     (0, react_1.useEffect)(() => {
         updateCurrentScrollY(scrollY);
     }, [scrollY, updateCurrentScrollY]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.5",
+  "version": "13.0.6",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",