kirukib
7310a349c5
Ship Expo Router screens, seeded stores, and polished UX so auth, shop, checkout, prescriptions, loyalty, family, and account processes work end-to-end offline. Co-authored-by: Cursor <cursoragent@cursor.com>
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import {
|
|
ScrollView,
|
|
View,
|
|
type ScrollViewProps,
|
|
type StyleProp,
|
|
type ViewStyle,
|
|
} from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { colors, gutter } from "@/lib/theme";
|
|
|
|
type ScreenProps = {
|
|
children: ReactNode;
|
|
/** Adds bottom room for the floating tab bar. */
|
|
tabBarPadding?: boolean;
|
|
background?: string;
|
|
style?: StyleProp<ViewStyle>;
|
|
};
|
|
|
|
export function Screen({ children, background = colors.page, style }: ScreenProps) {
|
|
return <View style={[{ flex: 1, backgroundColor: background }, style]}>{children}</View>;
|
|
}
|
|
|
|
type ScreenScrollProps = ScrollViewProps & {
|
|
children: ReactNode;
|
|
/** Extra bottom inset, e.g. for a sticky bar or the floating tab bar. */
|
|
bottomInset?: number;
|
|
/** Set false when the screen renders its own header with the top inset. */
|
|
topInset?: boolean;
|
|
gutters?: boolean;
|
|
};
|
|
|
|
export function ScreenScroll({
|
|
children,
|
|
bottomInset = 32,
|
|
topInset = false,
|
|
gutters = true,
|
|
contentContainerStyle,
|
|
...rest
|
|
}: ScreenScrollProps) {
|
|
const insets = useSafeAreaInsets();
|
|
|
|
return (
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardShouldPersistTaps="handled"
|
|
contentContainerStyle={[
|
|
{
|
|
paddingTop: topInset ? insets.top + 12 : 0,
|
|
paddingBottom: insets.bottom + bottomInset,
|
|
paddingHorizontal: gutters ? gutter : 0,
|
|
},
|
|
contentContainerStyle,
|
|
]}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
/** Bottom padding that clears the floating tab bar. */
|
|
export const TAB_BAR_INSET = 96;
|