Android is edge-to-edge, and stack screens (no tab bar below) had no bottom inset on their scroll containers — the first post on a pet profile sat in the gesture area and couldn't be tapped (found.md). New useBottomSafePadding hook adds insets.bottom to the contentContainerStyle of pet profile, followers, following, health, milestones, edit pet, settings, search, messages list and delete account. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
19 lines
773 B
TypeScript
19 lines
773 B
TypeScript
import { useMemo } from "react";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
const BASE_PADDING = 16;
|
|
|
|
/**
|
|
* Bottom padding for scroll containers on stack screens (no tab bar below).
|
|
* Android is edge-to-edge, so without this the last item scrolls under the
|
|
* gesture/navigation bar — found.md: the first post on a pet profile sat in
|
|
* the gesture area and couldn't be tapped. Same idea as comments.tsx /
|
|
* messages/[conversationId].tsx, which pass insets.bottom into makeStyles.
|
|
*
|
|
* Usage: `contentContainerStyle={[styles.list, bottomPadding]}`.
|
|
*/
|
|
export function useBottomSafePadding(base: number = BASE_PADDING) {
|
|
const { bottom } = useSafeAreaInsets();
|
|
return useMemo(() => ({ paddingBottom: base + bottom }), [base, bottom]);
|
|
}
|