summaryrefslogtreecommitdiff
path: root/components/ParallaxScrollView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/ParallaxScrollView.tsx')
-rw-r--r--components/ParallaxScrollView.tsx33
1 files changed, 20 insertions, 13 deletions
diff --git a/components/ParallaxScrollView.tsx b/components/ParallaxScrollView.tsx
index 5df1d75..46ed68e 100644
--- a/components/ParallaxScrollView.tsx
+++ b/components/ParallaxScrollView.tsx
@@ -1,15 +1,16 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
+"use client";
+import type { PropsWithChildren, ReactElement } from "react";
+import { StyleSheet } from "react-native";
import Animated, {
interpolate,
useAnimatedRef,
useAnimatedStyle,
useScrollViewOffset,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
-import { ThemedView } from '@/components/ThemedView';
-import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { ThemedView } from "@/components/ThemedView";
+import { useBottomTabOverflow } from "@/components/ui/TabBarBackground";
+import { useColorScheme } from "@/hooks/useColorScheme";
const HEADER_HEIGHT = 250;
@@ -23,7 +24,7 @@ export default function ParallaxScrollView({
headerImage,
headerBackgroundColor,
}: Props) {
- const colorScheme = useColorScheme() ?? 'light';
+ const colorScheme = useColorScheme() ?? "light";
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const scrollOffset = useScrollViewOffset(scrollRef);
const bottom = useBottomTabOverflow();
@@ -34,11 +35,15 @@ export default function ParallaxScrollView({
translateY: interpolate(
scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
- [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+ [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
),
},
{
- scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+ scale: interpolate(
+ scrollOffset.value,
+ [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+ [2, 1, 1],
+ ),
},
],
};
@@ -50,13 +55,15 @@ export default function ParallaxScrollView({
ref={scrollRef}
scrollEventThrottle={16}
scrollIndicatorInsets={{ bottom }}
- contentContainerStyle={{ paddingBottom: bottom }}>
+ contentContainerStyle={{ paddingBottom: bottom }}
+ >
<Animated.View
style={[
styles.header,
{ backgroundColor: headerBackgroundColor[colorScheme] },
headerAnimatedStyle,
- ]}>
+ ]}
+ >
{headerImage}
</Animated.View>
<ThemedView style={styles.content}>{children}</ThemedView>
@@ -71,12 +78,12 @@ const styles = StyleSheet.create({
},
header: {
height: HEADER_HEIGHT,
- overflow: 'hidden',
+ overflow: "hidden",
},
content: {
flex: 1,
padding: 32,
gap: 16,
- overflow: 'hidden',
+ overflow: "hidden",
},
});