@artsy/palette-mobile 17.26.0 → 17.27.0

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

@@ -2,8 +2,6 @@
 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;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -4,26 +4,19 @@ 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);
-        },
         updateScrollYOffset: (yOffset) => {
             setScrollYOffset(yOffset);
         },

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

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

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

@@ -4,7 +4,7 @@ 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 { 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(() => {
@@ -22,7 +22,7 @@ export const useShowLargeTitle = ({ stickyBarHeight }) => {
             return true;
         }
         return currentScrollYAnimated.value < NAVBAR_HEIGHT + scrollYOffset;
-    }, [currentScrollY, scrollYOffset, stickyBarHeight, currentScrollYAnimated]);
+    }, [scrollYOffset, stickyBarHeight, currentScrollYAnimated]);
     return {
         visible,
     };

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

@@ -1,17 +1,12 @@
-import { useEffect } from "react";
 import { useCurrentTabScrollY } from "react-native-collapsible-tab-view";
 import { useAnimatedReaction } from "react-native-reanimated";
 import { useScreenScrollContext } from "../../Screen/ScreenScrollContext";
-import { useAnimatedHeaderScrolling } from "../../Screen/hooks/useAnimatedHeaderScrolling";
 export const useListenForTabContentScroll = () => {
-    // TODO: move away from JS variables, use the animated values instead
-    const { updateCurrentScrollY, scrollYOffset, currentScrollYAnimated } = useScreenScrollContext();
+    const { currentScrollYAnimated } = useScreenScrollContext();
     const currentTabScrollY = useCurrentTabScrollY();
-    const scrollY = useAnimatedHeaderScrolling(currentTabScrollY, scrollYOffset);
-    useEffect(() => {
-        updateCurrentScrollY(scrollY);
-    }, [scrollY, updateCurrentScrollY]);
-    useAnimatedReaction(() => currentTabScrollY.value, (current) => {
+    useAnimatedReaction(() => currentTabScrollY.value, 
+    // TODO: improve the conditions here
+    (current) => {
         currentScrollYAnimated?.set(current);
     });
 };

package/package.json

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

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

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

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

@@ -1,38 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { runOnJS, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-import { NAVBAR_HEIGHT } from "../constants";
-export const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
-    const listenForScroll = useSharedValue(true);
-    const [currScrollY, setCurrScrollY] = useState(scrollY.value);
-    const HEADER_HEIGHT = useMemo(() => NAVBAR_HEIGHT + scrollYOffset, [scrollYOffset]);
-    // Needed to run on JS thread
-    const update = (y) => {
-        setCurrScrollY(y);
-    };
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            listenForScroll.set(() => false);
-        }, 1000);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [listenForScroll.get()]);
-    useAnimatedReaction(() => {
-        return [scrollY.value, listenForScroll.get()];
-    }, ([animatedScrollY, isListeningForScroll], previousScroll) => {
-        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) > HEADER_HEIGHT;
-        if (isListeningForScroll && suddenlyScrolled) {
-            return;
-        }
-        const prevTitleShown = prevScrollY >= HEADER_HEIGHT;
-        const currTitleShown = animatedScrollY >= HEADER_HEIGHT;
-        if (prevTitleShown === currTitleShown) {
-            return;
-        }
-        runOnJS(update)(Math.floor(animatedScrollY));
-    }, [scrollY, HEADER_HEIGHT]);
-    return currScrollY;
-};