fix: iOS contentInsetAdjustmentBehavior for all LargeTitleHeader screens

apps/expo/app/(app)/current-pack/[id].tsx

@@ -15,8 +15,8 @@ import { getRelativeTime } from 'expo-app/lib/utils/getRelativeTime';
 import type { PackItem } from 'expo-app/types';
 import { useLocalSearchParams } from 'expo-router';
 import type React from 'react';
-import { Platform, ScrollView, View } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 function WeightCard({
   title,
@@ -132,20 +132,17 @@ export default function CurrentPackScreen() {
 
   const pack = usePackDetailsFromStore(params.id as string);
   const uniqueCategories = computeCategorySummaries(pack);
-  const insets = useSafeAreaInsets();
 
   return (
-    <SafeAreaView className="flex-1" style={{ paddingTop: Platform.OS === 'ios' ? insets.top : 0 }}>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.currentPack')} />
       <ScrollView
         className="flex-1"
         contentContainerStyle={{ paddingBottom: 32 }}
         removeClippedSubviews={false}
+        contentInsetAdjustmentBehavior="automatic"
       >
-        <View
-          className="flex-row items-center p-4"
-          style={{ paddingTop: Platform.OS === 'ios' ? insets.top + 22 : 0 }}
-        >
+        <View className="flex-row items-center p-4">
           <Avatar className="mr-4 h-16 w-16" alt="">
             <AvatarImage source={{ uri: pack.image ?? undefined }} />
             <AvatarFallback>

apps/expo/app/(app)/gear-inventory.tsx

@@ -47,9 +47,9 @@ export default function GearInventoryScreen() {
   const itemsByCategory = groupByCategory(items);
 
   return (
-    <SafeAreaView className="flex-1">
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.gearInventory')} />
-      <ScrollView className="flex-1 px-4">
+      <ScrollView className="flex-1 px-4" contentInsetAdjustmentBehavior="automatic">
         <View className="flex-row items-center justify-between p-4">
           <Text variant="subhead" className="text-muted-foreground">
             {t('packs.itemsInInventory', { count: items?.length })}

apps/expo/app/(app)/pack-stats/[id].tsx

@@ -7,6 +7,7 @@ import { computeCategorySummaries } from 'expo-app/features/packs/utils';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { useLocalSearchParams } from 'expo-router';
 import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function PackStatsScreen() {
   const params = useLocalSearchParams();
@@ -30,10 +31,10 @@ export default function PackStatsScreen() {
   }));
 
   return (
-    <View className="flex-1">
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.packStats')} />
       {weightHistory || CATEGORY_DISTRIBUTION ? (
-        <ScrollView className="flex-1 px-4">
+        <ScrollView className="flex-1 px-4" contentInsetAdjustmentBehavior="automatic">
           {/* Weight History Section */}
           {WEIGHT_HISTORY && (
             <View className="my-4 rounded-lg bg-card p-4">
@@ -157,6 +158,6 @@ export default function PackStatsScreen() {
           <Text>{t('packs.noStatsAvailable')}</Text>
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 }

apps/expo/app/(app)/recent-packs.tsx

@@ -6,6 +6,7 @@ import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { getRelativeTime } from 'expo-app/lib/utils/getRelativeTime';
 import { Image, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 function RecentPackCard({ pack }: { pack: Pack }) {
   const { colors } = useColorScheme();
@@ -58,10 +59,10 @@ export default function RecentPacksScreen() {
   const { t } = useTranslation();
 
   return (
-    <View className="flex-1">
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.recentPacks')} />
       {recentPacks.length ? (
-        <ScrollView className="flex-1">
+        <ScrollView className="flex-1" contentInsetAdjustmentBehavior="automatic">
           <View className="p-4">
             <Text variant="subhead" className="mb-2 text-muted-foreground">
               {t('packs.recentlyUpdated')}
@@ -81,6 +82,6 @@ export default function RecentPacksScreen() {
           </Text>
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 }

apps/expo/app/(app)/shared-packs.tsx

@@ -8,6 +8,7 @@ import {
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Mock data for shared packs
 const SHARED_PACKS = [
@@ -179,9 +180,9 @@ function SharedPackCard({ pack }: { pack: (typeof SHARED_PACKS)[0] }) {
 export default function SharedPacksScreen() {
   const { t } = useTranslation();
   return (
-    <>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.sharedPacks')} />
-      <ScrollView className="flex-1">
+      <ScrollView className="flex-1" contentInsetAdjustmentBehavior="automatic">
         <View className="p-4">
           <Text variant="subhead" className="mb-2 text-muted-foreground">
             {t('packs.collaborateOnPacks')}
@@ -210,6 +211,6 @@ export default function SharedPacksScreen() {
           <Text variant="body">{t('packs.sharingBenefit3')}</Text>
         </View>
       </ScrollView>
-    </>
+    </SafeAreaView>
   );
 }

apps/expo/app/(app)/shopping-list.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import type { TranslationKeys } from 'expo-app/lib/i18n/types';
 import { useState } from 'react';
 import { Pressable, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Mock data for shopping list
 const SHOPPING_LIST = [
@@ -168,9 +169,9 @@ export default function ShoppingListScreen() {
   });
 
   return (
-    <>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('shopping.shoppingList')} />
-      <ScrollView className="flex-1">
+      <ScrollView className="flex-1" contentInsetAdjustmentBehavior="automatic">
         <View className="p-4">
           <View className="mb-4 flex-row items-center justify-between">
             <Text variant="subhead" className="text-muted-foreground">
@@ -251,6 +252,6 @@ export default function ShoppingListScreen() {
           <Text variant="body">• Compare prices across multiple retailers before purchasing</Text>
         </View>
       </ScrollView>
-    </>
+    </SafeAreaView>
   );
 }

apps/expo/app/(app)/trail-conditions.tsx

@@ -7,7 +7,7 @@ import type { TrailConditionReport, TrailSurface } from 'expo-app/features/trail
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { useMemo, useState } from 'react';
 import { FlatList, Modal, Pressable, ScrollView, View } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 type SurfaceFilter = TrailSurface | 'all';
 
@@ -40,7 +40,6 @@ export default function TrailConditionsScreen() {
   const [selectedSurface, setSelectedSurface] = useState<SurfaceFilter>('all');
   const { data: reports, isLoading, error } = useTrailConditionReports();
   const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
 
   const SURFACE_FILTERS: FilterItem[] = useMemo(
     () => [
@@ -160,7 +159,7 @@ export default function TrailConditionsScreen() {
   );
 
   return (
-    <SafeAreaView style={{ flex: 1, paddingTop: insets.top }}>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader
         title={t('trailConditions.title')}
         rightView={() => (
@@ -186,6 +185,7 @@ export default function TrailConditionsScreen() {
         ListFooterComponent={listFooter}
         ListEmptyComponent={listEmptyComponent}
         contentContainerClassName="pb-4"
+        contentInsetAdjustmentBehavior="automatic"
       />
 
       {/* Submit Report Modal */}

apps/expo/app/(app)/weather-alerts.tsx

@@ -133,9 +133,9 @@ export default function WeatherAlertsScreen() {
   const { alerts, loading, error, activeLocation } = useWeatherAlerts();
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('weather.weatherAlertsTitle')} />
-      <ScrollView className="flex-1 mt-20">
+      <ScrollView className="flex-1 mt-20" contentInsetAdjustmentBehavior="automatic">
         <View className="flex-row items-center justify-between p-4">
           <Text
             variant="subhead"

apps/expo/app/(app)/weight-analysis/[id].tsx

@@ -6,8 +6,8 @@ import { usePackWeightAnalysis } from 'expo-app/features/packs/hooks/usePackWeig
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { useLocalSearchParams } from 'expo-router';
-import { Platform, ScrollView, View } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 function WeightCard({
   title,
@@ -45,20 +45,17 @@ export default function WeightAnalysisScreen() {
   const { data, items } = usePackWeightAnalysis(packId as string);
 
   const preferredWeightUnit = userStore.preferredWeightUnit.peek() ?? 'g';
-  const insets = useSafeAreaInsets();
 
   return (
-    <SafeAreaView className="flex-1" style={{ paddingTop: Platform.OS === 'ios' ? insets.top : 0 }}>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.weightAnalysis')} />
       <ScrollView
         className="flex-1"
         contentContainerStyle={{ paddingBottom: 32 }}
         removeClippedSubviews={false}
+        contentInsetAdjustmentBehavior="automatic"
       >
-        <View
-          className="grid grid-cols-2 gap-3 p-4"
-          style={{ paddingTop: Platform.OS === 'ios' ? insets.top + 22 : 0 }}
-        >
+        <View className="grid grid-cols-2 gap-3 p-4">
           <WeightCard
             title={t('packs.baseWeight')}
             weight={`${data.baseWeight} g`}

apps/expo/components/LargeTitleHeaderOverlapFixIOS.tsx

@@ -1,5 +1,4 @@
 import { Platform, SafeAreaView, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const LargeTitleHeaderOverlapFixIOS = ({ children }: { children?: React.ReactNode }) => {
   if (Platform.OS === 'android') {
@@ -10,14 +9,8 @@ export const LargeTitleHeaderOverlapFixIOS = ({ children }: { children?: React.R
     }
   }
 
-  const insets = useSafeAreaInsets();
-
   return (
-    <SafeAreaView
-      {...(children
-        ? { className: 'flex-1 bg-background', style: { paddingTop: insets.top } }
-        : {})}
-    >
+    <SafeAreaView {...(children ? { className: 'flex-1 bg-background' } : {})}>
       {children}
       {!children && <View className="h-[0.5]" />}
     </SafeAreaView>