@artsy/palette-mobile 17.24.0 → 17.25.0

package/dist/elements/Screen/Header.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MotiView } from "moti";
-import { Dimensions } from "react-native";
-import Animated, { Easing, FadeIn, FadeOut, useDerivedValue } from "react-native-reanimated";
+import Animated, { Easing, FadeIn, FadeOut, useAnimatedStyle, 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";
@@ -20,17 +17,20 @@ const Right = ({ hideRightElements, rightElements }) => {
     return _jsx(_Fragment, { children: !hideRightElements && rightElements });
 };
 const Center = ({ animated, hideTitle, title }) => {
-    const { scrollYOffset = 0, currentScrollYAnimated, scrollViewDimensionsAnimated, } = useScreenScrollContext();
-    const { height: screenHeight } = Dimensions.get("window");
-    const scrollViewContentHeight = screenHeight - NAVBAR_HEIGHT - STICKY_BAR_HEIGHT - BOTTOM_TABS_HEIGHT;
+    const { scrollYOffset = 0, currentScrollYAnimated } = useScreenScrollContext();
     // 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]);
+    const opacity = useDerivedValue(() => {
+        return display.value === "flex" ? 1 : 0;
+    });
+    const style = useAnimatedStyle(() => {
+        return {
+            display: display.value,
+            opacity: opacity.value,
+        };
+    });
     if (hideTitle) {
         return null;
     }
@@ -38,11 +38,7 @@ const Center = ({ animated, hideTitle, title }) => {
     if (!animated) {
         return titleTextElement;
     }
-    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.value,
-        }, children: _jsx(MotiView, { animate: {
-                opacity: display.value === "flex" ? 1 : 0,
-            }, children: titleTextElement }) }));
+    return (_jsx(Animated.View, { entering: FadeIn.duration(400).easing(Easing.out(Easing.exp)), exiting: FadeOut.duration(400).easing(Easing.out(Easing.exp)), style: style, children: titleTextElement }));
 };
 const Left = ({ hideLeftElements, leftElements, onBack }) => {
     if (hideLeftElements)

package/dist/elements/Tabs/Tabs.stories.js

@@ -8,4 +8,4 @@ storiesOf("Tabs", module)
     .add("Simple Tabs", () => (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] })))
     .add("Tabs with Indicator", () => (_jsxs(Tabs, { indicators: [{ tabName: "tab1", Component: () => _jsx(Text, { textAlign: "right", children: "hi" }) }], children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] })))
     .add("Tabs with AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] })))
-    .add("Tabs with header", () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Artist" }), _jsx(Text, { children: "Description" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] })));
+    .add("Tabs with header", () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] })));

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

@@ -1,11 +1,17 @@
 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 = () => {
-    const { updateCurrentScrollY, scrollYOffset } = useScreenScrollContext();
-    const scrollY = useAnimatedHeaderScrolling(useCurrentTabScrollY(), scrollYOffset);
+    // TODO: move away from JS variables, use the animated values instead
+    const { updateCurrentScrollY, scrollYOffset, currentScrollYAnimated } = useScreenScrollContext();
+    const currentTabScrollY = useCurrentTabScrollY();
+    const scrollY = useAnimatedHeaderScrolling(currentTabScrollY, scrollYOffset);
     useEffect(() => {
         updateCurrentScrollY(scrollY);
     }, [scrollY, updateCurrentScrollY]);
+    useAnimatedReaction(() => currentTabScrollY.value, (current) => {
+        currentScrollYAnimated?.set(current);
+    });
 };

package/package.json

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