66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { useScrollToTop } from "expo-router";
|
|
import { useRef, type ReactNode } from "react";
|
|
import { Platform, ScrollView, type ScrollViewProps, StyleSheet, View } from "react-native";
|
|
|
|
import { tabLayout } from "@/lib/tab-layout";
|
|
import { useTabScreenScrollPadding } from "@/lib/tab-bar-insets";
|
|
|
|
type TabScrollViewProps = ScrollViewProps & {
|
|
/** Rendered at the top of scroll content (scrolls with the page). */
|
|
header?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Tab screen scroll view. Top chrome (logo / account) is pinned in TabPage;
|
|
* the page header and body scroll together here.
|
|
*/
|
|
export function TabScrollView({
|
|
header,
|
|
children,
|
|
contentContainerStyle,
|
|
refreshControl,
|
|
style,
|
|
bounces,
|
|
alwaysBounceVertical,
|
|
...props
|
|
}: TabScrollViewProps) {
|
|
const scrollRef = useRef<ScrollView>(null);
|
|
const bottomPadding = useTabScreenScrollPadding();
|
|
const canRefresh = Boolean(refreshControl);
|
|
|
|
useScrollToTop(scrollRef);
|
|
|
|
return (
|
|
<ScrollView
|
|
ref={scrollRef}
|
|
style={[styles.scroll, style]}
|
|
contentContainerStyle={[
|
|
tabLayout.scrollContent,
|
|
{ paddingBottom: bottomPadding },
|
|
contentContainerStyle,
|
|
]}
|
|
contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "never" : undefined}
|
|
automaticallyAdjustContentInsets={false}
|
|
automaticallyAdjustKeyboardInsets={false}
|
|
automaticallyAdjustsScrollIndicatorInsets={false}
|
|
bounces={bounces ?? canRefresh}
|
|
alwaysBounceVertical={alwaysBounceVertical ?? canRefresh}
|
|
refreshControl={refreshControl}
|
|
scrollIndicatorInsets={{ bottom: bottomPadding }}
|
|
{...props}
|
|
>
|
|
{header}
|
|
<View style={tabLayout.scrollBody}>{children}</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
scroll: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
backgroundColor: "transparent",
|
|
},
|
|
});
|