Make top part of screen sticky

iron-fish · Dec 5, 2024 · 6079e17 · 6079e17
1 parent 710fb70
commit 6079e17
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 46 deletions.
diff --git a/packages/mobile-app/app/(tabs)/balances.tsx b/packages/mobile-app/app/(tabs)/balances.tsx
@@ -9,14 +9,82 @@ import {
   Card,
 } from "@ironfish/tackle-box";
 import { SafeAreaGradient } from "@/components/SafeAreaGradient/SafeAreaGradient";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+  SharedValue,
+} from "react-native-reanimated";
 
 const GRADIENT_COLORS = ["#DE83F0", "#FFC2E8"];
 
 export default function Balances() {
+  const scrollYOffset = useSharedValue(0);
+
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    scrollYOffset.value = event.contentOffset.y;
+  });
+
   return (
     <SafeAreaGradient from={GRADIENT_COLORS[0]} to={GRADIENT_COLORS[1]}>
-      <NavBar />
+      <Animated.ScrollView
+        scrollEventThrottle={16}
+        onScroll={scrollHandler}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        <View style={{ flexGrow: 1 }}>
+          <AccountHeader offsetY={scrollYOffset} />
 
+          <Box
+            bg="background"
+            flexGrow={1}
+            borderTopLeftRadius={20}
+            borderTopRightRadius={20}
+          >
+            <Tabs.Root defaultValue="assets">
+              <Tabs.List>
+                <Tabs.Trigger value="assets">Assets</Tabs.Trigger>
+                <Tabs.Trigger value="transactions">Transactions</Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="assets">
+                <VStack flexGrow={1} p={4} pb={16} gap={4}>
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                </VStack>
+              </Tabs.Content>
+              <Tabs.Content value="transactions">
+                <VStack flexGrow={1} p={4} pb={16}>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                </VStack>
+              </Tabs.Content>
+            </Tabs.Root>
+          </Box>
+        </View>
+      </Animated.ScrollView>
+    </SafeAreaGradient>
+  );
+}
+
+function AccountHeader({ offsetY }: { offsetY: SharedValue<number> }) {
+  return (
+    <Animated.View style={{ transform: [{ translateY: offsetY }] }}>
+      <HStack alignItems="center" px={4} py={6}>
+        <Icon name="hamburger-menu" />
+        <Box flexGrow={1}>
+          <Text size="lg" textAlign="center">
+            Account 1
+          </Text>
+        </Box>
+        <Icon name="gear" />
+      </HStack>
       <VStack alignItems="center">
         <Text size="3xl">100.55</Text>
         <Text size="lg">IRON</Text>
@@ -27,50 +95,7 @@ export default function Balances() {
           <IconButton label="Bridge" icon="arrows-bridge" />
         </HStack>
       </VStack>
-
-      <Box
-        bg="background"
-        flexGrow={1}
-        borderTopLeftRadius={20}
-        borderTopRightRadius={20}
-      >
-        <Tabs.Root defaultValue="assets">
-          <Tabs.List>
-            <Tabs.Trigger value="assets">Assets</Tabs.Trigger>
-            <Tabs.Trigger value="transactions">Transactions</Tabs.Trigger>
-          </Tabs.List>
-          <Tabs.Content value="assets">
-            <VStack p={4} gap={4}>
-              <AssetRow />
-              <AssetRow />
-            </VStack>
-          </Tabs.Content>
-          <Tabs.Content value="transactions">
-            <VStack p={4}>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-            </VStack>
-          </Tabs.Content>
-        </Tabs.Root>
-      </Box>
-    </SafeAreaGradient>
-  );
-}
-
-function NavBar() {
-  return (
-    <HStack alignItems="center" px={4} py={6}>
-      <Icon name="hamburger-menu" />
-      <Box flexGrow={1}>
-        <Text size="lg" textAlign="center">
-          Account 1
-        </Text>
-      </Box>
-      <Icon name="gear" />
-    </HStack>
+    </Animated.View>
   );
 }
 

diff --git a/packages/tackle-box/lib/components/Box/Box.tsx b/packages/tackle-box/lib/components/Box/Box.tsx
@@ -31,7 +31,7 @@ const styles = css.create({
   backgroundColor: (color?: string) => ({
     backgroundColor: color,
   }),
-  dimensions: (height: UnitValue, width: UnitValue) => ({
+  dimensions: (height?: UnitValue, width?: UnitValue) => ({
     height,
     width,
   }),