Files
petfeed/mobile/src/hooks/useBottomSafePadding.ts
T
adminandClaude Opus 5.5 de237f19a1 fix(mobile): content hidden under Android gesture bar on stack screens
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>
2026-09-26 12:41:42 +02:00

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]);
}