3139f85b5d
* docs(react-native): create the basic expo project * docs(react-native): cross-platform Apple social sign-in * docs(react-native): cross-platform Google social sign-in * docs(react-native): fix typos * docs(react-native): remove wrong entry in the `Connection` component * Correct typos * Prettier * Draft * Draft * docs(react-native): use kebab-case file naming convention in Expo guide - use kebab-case file naming convention in Expo guide - add trailing semicolon to align with the standard Expo template conventions * docs(react-native): use kebab-case file naming convention in Expo social auth example * docs(react-native): update the packages of the Expo social auth example * Fix * Draft * Changes * Correct log message --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import type { PropsWithChildren, ReactElement } from 'react';
|
|
import { StyleSheet } from 'react-native';
|
|
import Animated, {
|
|
interpolate,
|
|
useAnimatedRef,
|
|
useAnimatedStyle,
|
|
useScrollViewOffset,
|
|
} from 'react-native-reanimated';
|
|
|
|
import { ThemedView } from '@/components/themed-view';
|
|
import { useBottomTabOverflow } from '@/components/ui/tab-bar-background';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
|
|
const HEADER_HEIGHT = 250;
|
|
|
|
type Props = PropsWithChildren<{
|
|
headerImage: ReactElement;
|
|
headerBackgroundColor: { dark: string; light: string };
|
|
}>;
|
|
|
|
export default function ParallaxScrollView({
|
|
children,
|
|
headerImage,
|
|
headerBackgroundColor,
|
|
}: Props) {
|
|
const colorScheme = useColorScheme() ?? 'light';
|
|
const scrollRef = useAnimatedRef<Animated.ScrollView>();
|
|
const scrollOffset = useScrollViewOffset(scrollRef);
|
|
const bottom = useBottomTabOverflow();
|
|
const headerAnimatedStyle = useAnimatedStyle(() => {
|
|
return {
|
|
transform: [
|
|
{
|
|
translateY: interpolate(
|
|
scrollOffset.value,
|
|
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
|
|
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
|
|
),
|
|
},
|
|
{
|
|
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
|
|
},
|
|
],
|
|
};
|
|
});
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<Animated.ScrollView
|
|
ref={scrollRef}
|
|
scrollEventThrottle={16}
|
|
scrollIndicatorInsets={{ bottom }}
|
|
contentContainerStyle={{ paddingBottom: bottom }}>
|
|
<Animated.View
|
|
style={[
|
|
styles.header,
|
|
{ backgroundColor: headerBackgroundColor[colorScheme] },
|
|
headerAnimatedStyle,
|
|
]}>
|
|
{headerImage}
|
|
</Animated.View>
|
|
<ThemedView style={styles.content}>{children}</ThemedView>
|
|
</Animated.ScrollView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
height: HEADER_HEIGHT,
|
|
overflow: 'hidden',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
padding: 32,
|
|
gap: 16,
|
|
overflow: 'hidden',
|
|
},
|
|
});
|