@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/Screen/FloatingHeader.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const constants_1 = require("./constants");
-const BackButton_1 = require("../BackButton");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const FloatingHeader = ({ onBack, rightElements, ...flexProps }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: constants_1.ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", ...flexProps, children: [(0, jsx_runtime_1.jsx)(BackButton_1.BackButtonWithBackground, { onPress: onBack }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1 }), rightElements && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ZINDEX } from "./constants";
+import { BackButtonWithBackground } from "../BackButton";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+export const FloatingHeader = ({ onBack, rightElements, ...flexProps }) => {
+    const insets = useSafeAreaInsets();
+    return (_jsxs(Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", ...flexProps, children: [_jsx(BackButtonWithBackground, { onPress: onBack }), _jsx(Flex, { flex: 1 }), rightElements && (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Spacer, { x: 1 }), rightElements] }))] }));
 };
-exports.FloatingHeader = FloatingHeader;

package/dist/elements/Screen/FullWidthDivider.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullWidthDivider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Screen_1 = require("../Screen");
-const Separator_1 = require("../Separator");
-const FullWidthDivider = (flexProps) => {
-    return ((0, jsx_runtime_1.jsx)(Screen_1.Screen.FullWidthItem, { children: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2, ...flexProps }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Screen } from "../Screen";
+import { Separator } from "../Separator";
+export const FullWidthDivider = (flexProps) => {
+    return (_jsx(Screen.FullWidthItem, { children: _jsx(Separator, { my: 2, ...flexProps }) }));
 };
-exports.FullWidthDivider = FullWidthDivider;

package/dist/elements/Screen/FullWidthItem.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullWidthItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("./constants");
-const Flex_1 = require("../Flex");
-const FullWidthItem = (props) => {
-    return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, mx: -constants_1.SCREEN_HORIZONTAL_PADDING });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SCREEN_HORIZONTAL_PADDING } from "./constants";
+import { Flex } from "../Flex";
+export const FullWidthItem = (props) => {
+    return _jsx(Flex, { ...props, mx: -SCREEN_HORIZONTAL_PADDING });
 };
-exports.FullWidthItem = FullWidthItem;

package/dist/elements/Screen/Header.js

@@ -1,69 +1,41 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.AnimatedHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const moti_1 = require("moti");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const ScreenScrollContext_1 = require("./ScreenScrollContext");
-const constants_1 = require("./constants");
-const constants_2 = require("../../constants");
-const ArrowLeftIcon_1 = require("../../svgs/ArrowLeftIcon");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-const AnimatedHeader = (props) => {
-    return (0, jsx_runtime_1.jsx)(exports.Header, { animated: true, ...props });
+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 { useScreenScrollContext } from "./ScreenScrollContext";
+import { NAVBAR_HEIGHT, ZINDEX } from "./constants";
+import { DEFAULT_HIT_SLOP } from "../../constants";
+import { ArrowLeftIcon } from "../../svgs/ArrowLeftIcon";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const AnimatedHeader = (props) => {
+    return _jsx(Header, { animated: true, ...props });
 };
-exports.AnimatedHeader = AnimatedHeader;
-const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...titleProps, children: (0, jsx_runtime_1.jsx)(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, alignItems: "flex-end", children: (0, jsx_runtime_1.jsx)(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
+    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, { ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
 };
-exports.Header = Header;
 const Right = ({ hideRightElements, rightElements }) => {
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !hideRightElements && rightElements });
+    return _jsx(_Fragment, { children: !hideRightElements && rightElements });
 };
 const Center = ({ animated, hideTitle, title }) => {
-    const { scrollYOffset = 0, currentScrollY = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const { scrollYOffset = 0, currentScrollY = 0 } = useScreenScrollContext();
     if (hideTitle) {
         return null;
     }
-    const titleTextElement = ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }));
+    const titleTextElement = (_jsx(Text, { variant: "sm-display", numberOfLines: 1, children: title }));
     if (!animated) {
         return titleTextElement;
     }
     // Show / hide the title to avoid rerenders, which retrigger the animation
-    const display = currentScrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
-    return ((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: {
+    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,
-        }, children: (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
+        }, children: _jsx(MotiView, { animate: {
                 opacity: display === "flex" ? 1 : 0,
             }, children: titleTextElement }) }));
 };
 const Left = ({ hideLeftElements, leftElements, onBack }) => {
     if (hideLeftElements)
         return null;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements || ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
+    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
 };

package/dist/elements/Screen/Screen.stories.js

@@ -1,21 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const Flex_1 = require("../Flex");
-const Screen_1 = require("../Screen");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Screen", module)
-    .add("With Header and BottomView", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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))) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("With Header and Right Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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("With Header, Without Left Element and Right Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", hideLeftElements: true, rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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("With Right Element & Custom Left Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", leftElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long left element" }), rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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))) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("ScrollView With AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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)))] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("ScrollView With AnimatedHeader and Right Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title", rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Right" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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)))] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("FlatList With AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { ListHeaderComponent: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
-                } }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("FlatList With AnimatedHeader and StickySubHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.StickySubHeader, { title: "Title", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Flex } from "../Flex";
+import { Screen } from "../Screen";
+import { Text } from "../Text";
+storiesOf("Screen", module)
+    .add("With Header and BottomView", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { scroll: true, 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(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("With Header and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, 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("With Header, Without Left Element and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", hideLeftElements: true, rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, 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("With Right Element & Custom Left Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", leftElements: _jsx(Text, { variant: "xs", children: "Very long left element" }), rightElements: _jsx(Text, { variant: "xs", children: "right element" }) }), _jsx(Screen.Body, { scroll: true, 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(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), 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(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title", rightElements: _jsx(Text, { children: "Right" }) }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), 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(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("FlatList With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { ListHeaderComponent: () => _jsx(Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
+                    return (_jsx(Text, { my: 1, children: item }, index));
+                } }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("FlatList With AnimatedHeader and StickySubHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
+                    return (_jsx(Text, { my: 1, children: item }, index));
                 } }) })] })))
-    .add("Fullwidth", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { 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.\"" }) })] })));
+    .add("Fullwidth", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(Text, { 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.\"" }) })] })));

package/dist/elements/Screen/ScreenBase.js

@@ -1,16 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScreenBase = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const ScreenScrollContext_1 = require("./ScreenScrollContext");
-const Flex_1 = require("../Flex");
-const ScreenBase = ({ children, safeArea = true, ...flexProps }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext_1.ScreenScrollContextProvider, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, ...flexProps, children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, { safeArea: true })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScreenScrollContextProvider } from "./ScreenScrollContext";
+import { Flex } from "../Flex";
+export const ScreenBase = ({ children, safeArea = true, ...flexProps }) => {
+    const insets = useSafeAreaInsets();
+    return (_jsx(ScreenScrollContextProvider, { children: _jsxs(Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, ...flexProps, children: [children, _jsx(SafeAreaCover, { safeArea: true })] }) }));
 };
-exports.ScreenBase = ScreenBase;
 const SafeAreaCover = ({ safeArea }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", left: 0, right: 0, top: safeArea ? -insets.top : 0, height: insets.top, backgroundColor: "background" }));
+    const insets = useSafeAreaInsets();
+    return (_jsx(Flex, { position: "absolute", left: 0, right: 0, top: safeArea ? -insets.top : 0, height: insets.top, backgroundColor: "background" }));
 };

package/dist/elements/Screen/ScreenFlatList.js

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScreenFlatList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
-const useListenForScreenScroll_1 = require("./hooks/useListenForScreenScroll");
-function ScreenFlatList(props) {
-    const { scrollHandler } = (0, useListenForScreenScroll_1.useListenForScreenScroll)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { flowRight } from "lodash";
+import Animated from "react-native-reanimated";
+import { useListenForScreenScroll } from "./hooks/useListenForScreenScroll";
+export function ScreenFlatList(props) {
+    const { scrollHandler } = useListenForScreenScroll();
     let handleScroll;
     if (props.onScroll) {
-        handleScroll = (0, lodash_1.flowRight)(scrollHandler, props.onScroll);
+        handleScroll = flowRight(scrollHandler, props.onScroll);
     }
     else {
         handleScroll = scrollHandler;
     }
-    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.FlatList, { ref: props.innerRef, ...props, onScroll: handleScroll });
+    return _jsx(Animated.FlatList, { ref: props.innerRef, ...props, onScroll: handleScroll });
 }
-exports.ScreenFlatList = ScreenFlatList;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScreenScrollContext = exports.ScreenScrollContextProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ScreenScrollContext = (0, react_1.createContext)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, createContext, useState } from "react";
+const ScreenScrollContext = 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);
+export const ScreenScrollContextProvider = ({ children, }) => {
+    const [currentScrollY, setCurrentScrollY] = useState(0);
+    const [scrollYOffset, setScrollYOffset] = useState(undefined);
     const providerValue = {
         currentScrollY,
         scrollYOffset,
@@ -22,14 +19,12 @@ const ScreenScrollContextProvider = ({ children, }) => {
             setScrollYOffset(yOffset);
         },
     };
-    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext.Provider, { value: providerValue, children: children }));
+    return (_jsx(ScreenScrollContext.Provider, { value: providerValue, children: children }));
 };
-exports.ScreenScrollContextProvider = ScreenScrollContextProvider;
-const useScreenScrollContext = () => {
-    const context = (0, react_1.useContext)(ScreenScrollContext);
+export const useScreenScrollContext = () => {
+    const context = useContext(ScreenScrollContext);
     if (!context) {
         throw new Error("useScreenScrollContext must be used within a Screen.ScreenScrollContextProvider component");
     }
     return context;
 };
-exports.useScreenScrollContext = useScreenScrollContext;

package/dist/elements/Screen/ScreenScrollView.js

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScreenScrollView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
-const useListenForScreenScroll_1 = require("./hooks/useListenForScreenScroll");
-const ScreenScrollView = (props) => {
-    const { scrollHandler } = (0, useListenForScreenScroll_1.useListenForScreenScroll)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { flowRight } from "lodash";
+import Animated from "react-native-reanimated";
+import { useListenForScreenScroll } from "./hooks/useListenForScreenScroll";
+export const ScreenScrollView = (props) => {
+    const { scrollHandler } = useListenForScreenScroll();
     let handleScroll;
     if (props.onScroll) {
-        handleScroll = (0, lodash_1.flowRight)(scrollHandler, props.onScroll);
+        handleScroll = flowRight(scrollHandler, props.onScroll);
     }
     else {
         handleScroll = scrollHandler;
     }
-    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.ScrollView, { ...props, onScroll: handleScroll, scrollEventThrottle: 16 });
+    return _jsx(Animated.ScrollView, { ...props, onScroll: handleScroll, scrollEventThrottle: 16 });
 };
-exports.ScreenScrollView = ScreenScrollView;

package/dist/elements/Screen/StickySubHeader.js

@@ -1,49 +1,23 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StickySubHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const ScreenScrollContext_1 = require("./ScreenScrollContext");
-const constants_1 = require("./constants");
-const hooks_1 = require("../../utils/hooks");
-const Flex_1 = require("../Flex");
-const Separator_1 = require("../Separator");
-const Text_1 = require("../Text");
+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 { 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 = (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black5" });
-const StickySubHeader = ({ title, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, }) => {
-    const { currentScrollY, scrollYOffset = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    const space = (0, hooks_1.useSpace)();
-    const [stickyBarHeight, setStickyHeaderHeight] = (0, react_1.useState)(null);
-    const visible = (0, react_native_reanimated_1.useDerivedValue)(() => {
+const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "black5" });
+export const StickySubHeader = ({ title, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, }) => {
+    const { currentScrollY, scrollYOffset = 0 } = useScreenScrollContext();
+    const space = useSpace();
+    const [stickyBarHeight, setStickyHeaderHeight] = useState(null);
+    const visible = useDerivedValue(() => {
         if (stickyBarHeight === null) {
             return true;
         }
-        return currentScrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset;
+        return currentScrollY < NAVBAR_HEIGHT + scrollYOffset;
     }, [currentScrollY, scrollYOffset, stickyBarHeight]);
     const handleLayout = (event) => {
         setStickyHeaderHeight(event.nativeEvent.layout.height);
@@ -52,20 +26,19 @@ const StickySubHeader = ({ title, separatorComponent = DEFAULT_SEPARATOR_COMPONE
     const sharedStyles = {
         paddingHorizontal: space(2),
     };
-    const animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const animatedStyles = useAnimatedStyle(() => {
         return {
-            height: (0, react_native_reanimated_1.withTiming)(visible.value ? stickyBarHeight || STICKY_BAR_HEIGHT : 0, {
+            height: withTiming(visible.value ? stickyBarHeight || STICKY_BAR_HEIGHT : 0, {
                 duration: 100,
             }),
             transform: [
                 {
-                    translateY: (0, react_native_reanimated_1.withTiming)(visible.value ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT), {
+                    translateY: withTiming(visible.value ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT), {
                         duration: 100,
                     }),
                 },
             ],
         };
     });
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [stickyBarHeight === null && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: sharedStyles, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] }) })), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [sharedStyles, animatedStyles], children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: { height: stickyBarHeight }, mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: title }), subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }), children, children !== undefined && separatorComponent] }));
+    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: "lg-display", color: "white100", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }), children, children !== undefined && separatorComponent] }));
 };
-exports.StickySubHeader = StickySubHeader;

package/dist/elements/Screen/constants.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZINDEX = exports.SCREEN_TRANSITION_TIME = exports.SCREEN_HORIZONTAL_PADDING = exports.NAVBAR_HEIGHT = exports.LARGE_TITLE_HEIGHT = void 0;
-exports.LARGE_TITLE_HEIGHT = 64;
-exports.NAVBAR_HEIGHT = 50;
-exports.SCREEN_HORIZONTAL_PADDING = 2;
-exports.SCREEN_TRANSITION_TIME = 400;
-exports.ZINDEX = {
+export const LARGE_TITLE_HEIGHT = 64;
+export const NAVBAR_HEIGHT = 50;
+export const SCREEN_HORIZONTAL_PADDING = 2;
+export const SCREEN_TRANSITION_TIME = 400;
+export const ZINDEX = {
     artworkContent: 10,
     bottomSheetModalView: 1,
     floatingHeader: 2,

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

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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, 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]);
+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);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const timer = setTimeout(() => {
             listenForScroll.value = false;
         }, 1000);
@@ -20,7 +17,7 @@ const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
             clearTimeout(timer);
         };
     }, [listenForScroll]);
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+    useAnimatedReaction(() => {
         return [scrollY.value, listenForScroll.value];
     }, ([animatedScrollY, isListeningForScroll], previousScroll) => {
         const [prevScrollY] = previousScroll ?? [0, false];
@@ -35,8 +32,7 @@ const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
         if (prevTitleShown === currTitleShown) {
             return;
         }
-        (0, react_native_reanimated_1.runOnJS)(update)(Math.floor(animatedScrollY));
+        runOnJS(update)(Math.floor(animatedScrollY));
     }, [scrollY, HEADER_HEIGHT]);
     return currScrollY;
 };
-exports.useAnimatedHeaderScrolling = useAnimatedHeaderScrolling;

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

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenForScreenScroll = void 0;
-const react_1 = require("react");
-const react_native_reanimated_1 = require("react-native-reanimated");
-const useAnimatedHeaderScrolling_1 = require("./useAnimatedHeaderScrolling");
-const ScreenScrollContext_1 = require("../ScreenScrollContext");
-const useListenForScreenScroll = () => {
-    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    const animatedScrollY = (0, react_native_reanimated_1.useSharedValue)(0);
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY, scrollYOffset);
-    const scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+import { useEffect } from "react";
+import { useAnimatedScrollHandler, useSharedValue } 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 scrollHandler = useAnimatedScrollHandler({
         onScroll: (event) => {
             animatedScrollY.value = event.contentOffset.y;
         },
     });
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         updateCurrentScrollY(scrollY);
     }, [scrollY, updateCurrentScrollY]);
     return {
         scrollHandler,
     };
 };
-exports.useListenForScreenScroll = useListenForScreenScroll;