From 7f02dbbff3b152567a5786ce40741f2813e07b2d Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 26 Apr 2026 17:47:20 -0600
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20fix:=20add=20contentInsetAdj?=
 =?UTF-8?q?ustmentBehavior=3D"automatic"=20to=20all=20LargeTitleHeader=20s?=
 =?UTF-8?q?creens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All 19 screens using LargeTitleHeader were missing this prop on their main
scroll component, causing content to render behind the transparent native
header on iOS. Fixes the overlap bug found on SeasonSuggestions.
---
 .claude/scheduled_tasks.lock                                    | 1 +
 apps/expo/app/(app)/current-pack/[id].tsx                       | 1 +
 apps/expo/app/(app)/gear-inventory.tsx                          | 2 +-
 apps/expo/app/(app)/pack-categories/[id].tsx                    | 2 +-
 apps/expo/app/(app)/pack-stats/[id].tsx                         | 2 +-
 apps/expo/app/(app)/recent-packs.tsx                            | 2 +-
 apps/expo/app/(app)/shared-packs.tsx                            | 2 +-
 apps/expo/app/(app)/shopping-list.tsx                           | 2 +-
 apps/expo/app/(app)/trail-conditions.tsx                        | 1 +
 apps/expo/app/(app)/weather-alerts.tsx                          | 2 +-
 apps/expo/app/(app)/weight-analysis/[id].tsx                    | 1 +
 apps/expo/features/ai/screens/ReportedContentScreen.tsx         | 1 +
 apps/expo/features/catalog/screens/CatalogItemsScreen.tsx       | 1 +
 apps/expo/features/feed/screens/FeedScreen.tsx                  | 1 +
 apps/expo/features/guides/screens/GuidesListScreen.tsx          | 1 +
 .../features/pack-templates/screens/PackTemplateListScreen.tsx  | 1 +
 apps/expo/features/packs/screens/PackListScreen.tsx             | 1 +
 apps/expo/features/trips/screens/TripListScreen.tsx             | 1 +
 apps/expo/features/weather/screens/LocationsScreen.tsx          | 1 +
 apps/expo/features/wildlife/screens/WildlifeScreen.tsx          | 1 +
 20 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 .claude/scheduled_tasks.lock

diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
new file mode 100644
index 0000000000..b1c5a73747
--- /dev/null
+++ b/.claude/scheduled_tasks.lock
@@ -0,0 +1 @@
+{"sessionId":"6cde7465-5bfc-4ba4-88ef-122130ee32fd","pid":83477,"acquiredAt":1776531548866}
\ No newline at end of file
diff --git a/apps/expo/app/(app)/current-pack/[id].tsx b/apps/expo/app/(app)/current-pack/[id].tsx
index b7412516ca..161c92b34a 100644
--- a/apps/expo/app/(app)/current-pack/[id].tsx
+++ b/apps/expo/app/(app)/current-pack/[id].tsx
@@ -141,6 +141,7 @@ export default function CurrentPackScreen() {
         className="flex-1"
         contentContainerStyle={{ paddingBottom: 32 }}
         removeClippedSubviews={false}
+        contentInsetAdjustmentBehavior="automatic"
       >
         <View
           className="flex-row items-center p-4"
diff --git a/apps/expo/app/(app)/gear-inventory.tsx b/apps/expo/app/(app)/gear-inventory.tsx
index 980c9f21d2..9b9282a7cc 100644
--- a/apps/expo/app/(app)/gear-inventory.tsx
+++ b/apps/expo/app/(app)/gear-inventory.tsx
@@ -49,7 +49,7 @@ export default function GearInventoryScreen() {
   return (
     <SafeAreaView className="flex-1">
       <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 })}
diff --git a/apps/expo/app/(app)/pack-categories/[id].tsx b/apps/expo/app/(app)/pack-categories/[id].tsx
index 4f8f97b771..e0699ae3bc 100644
--- a/apps/expo/app/(app)/pack-categories/[id].tsx
+++ b/apps/expo/app/(app)/pack-categories/[id].tsx
@@ -65,7 +65,7 @@ export default function PackCategoriesScreen() {
     <>
       <LargeTitleHeader title={t('packs.packCategories')} />
       {categories.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.organizeGear')}
diff --git a/apps/expo/app/(app)/pack-stats/[id].tsx b/apps/expo/app/(app)/pack-stats/[id].tsx
index 85809d1af3..c2460fa50b 100644
--- a/apps/expo/app/(app)/pack-stats/[id].tsx
+++ b/apps/expo/app/(app)/pack-stats/[id].tsx
@@ -33,7 +33,7 @@ export default function PackStatsScreen() {
     <View className="flex-1">
       <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">
diff --git a/apps/expo/app/(app)/recent-packs.tsx b/apps/expo/app/(app)/recent-packs.tsx
index 8c0fc21734..e420436c33 100644
--- a/apps/expo/app/(app)/recent-packs.tsx
+++ b/apps/expo/app/(app)/recent-packs.tsx
@@ -61,7 +61,7 @@ export default function RecentPacksScreen() {
     <View className="flex-1">
       <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')}
diff --git a/apps/expo/app/(app)/shared-packs.tsx b/apps/expo/app/(app)/shared-packs.tsx
index bc6132c563..c100b5b055 100644
--- a/apps/expo/app/(app)/shared-packs.tsx
+++ b/apps/expo/app/(app)/shared-packs.tsx
@@ -181,7 +181,7 @@ export default function SharedPacksScreen() {
   return (
     <>
       <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')}
diff --git a/apps/expo/app/(app)/shopping-list.tsx b/apps/expo/app/(app)/shopping-list.tsx
index f0f2c25381..da5e04ad42 100644
--- a/apps/expo/app/(app)/shopping-list.tsx
+++ b/apps/expo/app/(app)/shopping-list.tsx
@@ -170,7 +170,7 @@ export default function ShoppingListScreen() {
   return (
     <>
       <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">
diff --git a/apps/expo/app/(app)/trail-conditions.tsx b/apps/expo/app/(app)/trail-conditions.tsx
index dded885c76..5cb0b88261 100644
--- a/apps/expo/app/(app)/trail-conditions.tsx
+++ b/apps/expo/app/(app)/trail-conditions.tsx
@@ -186,6 +186,7 @@ export default function TrailConditionsScreen() {
         ListFooterComponent={listFooter}
         ListEmptyComponent={listEmptyComponent}
         contentContainerClassName="pb-4"
+        contentInsetAdjustmentBehavior="automatic"
       />
 
       {/* Submit Report Modal */}
diff --git a/apps/expo/app/(app)/weather-alerts.tsx b/apps/expo/app/(app)/weather-alerts.tsx
index fffe578cb3..de72385ef2 100644
--- a/apps/expo/app/(app)/weather-alerts.tsx
+++ b/apps/expo/app/(app)/weather-alerts.tsx
@@ -135,7 +135,7 @@ export default function WeatherAlertsScreen() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <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"
diff --git a/apps/expo/app/(app)/weight-analysis/[id].tsx b/apps/expo/app/(app)/weight-analysis/[id].tsx
index cb89ce9dda..fa4da289c1 100644
--- a/apps/expo/app/(app)/weight-analysis/[id].tsx
+++ b/apps/expo/app/(app)/weight-analysis/[id].tsx
@@ -54,6 +54,7 @@ export default function WeightAnalysisScreen() {
         className="flex-1"
         contentContainerStyle={{ paddingBottom: 32 }}
         removeClippedSubviews={false}
+        contentInsetAdjustmentBehavior="automatic"
       >
         <View
           className="grid grid-cols-2 gap-3 p-4"
diff --git a/apps/expo/features/ai/screens/ReportedContentScreen.tsx b/apps/expo/features/ai/screens/ReportedContentScreen.tsx
index b277eec3fe..56ced1108e 100644
--- a/apps/expo/features/ai/screens/ReportedContentScreen.tsx
+++ b/apps/expo/features/ai/screens/ReportedContentScreen.tsx
@@ -79,6 +79,7 @@ export default function ReportedContentScreen() {
           data={filteredData}
           keyExtractor={(item) => item.id.toString()}
           contentContainerClassName="p-4"
+          contentInsetAdjustmentBehavior="automatic"
           renderItem={({ item }) => (
             <View className="mb-4 rounded-lg border border-border bg-card p-4">
               <View className="mb-2 flex-row justify-between">
diff --git a/apps/expo/features/catalog/screens/CatalogItemsScreen.tsx b/apps/expo/features/catalog/screens/CatalogItemsScreen.tsx
index 4fe67890bf..e7a3dc89a9 100644
--- a/apps/expo/features/catalog/screens/CatalogItemsScreen.tsx
+++ b/apps/expo/features/catalog/screens/CatalogItemsScreen.tsx
@@ -223,6 +223,7 @@ function CatalogItemsScreen() {
         onEndReached={loadMore}
         onEndReachedThreshold={0.5}
         contentContainerStyle={{ flexGrow: 1, padding: 16 }}
+        contentInsetAdjustmentBehavior="automatic"
         ListFooterComponent={
           <>
             <View className="py-4">
diff --git a/apps/expo/features/feed/screens/FeedScreen.tsx b/apps/expo/features/feed/screens/FeedScreen.tsx
index 0b50985786..43067d4019 100644
--- a/apps/expo/features/feed/screens/FeedScreen.tsx
+++ b/apps/expo/features/feed/screens/FeedScreen.tsx
@@ -106,6 +106,7 @@ export const FeedScreen = () => {
           renderItem={renderItem}
           keyExtractor={(item) => String(item.id)}
           contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 8, paddingBottom: 24 }}
+          contentInsetAdjustmentBehavior="automatic"
           refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
           onEndReached={handleLoadMore}
           onEndReachedThreshold={0.3}
diff --git a/apps/expo/features/guides/screens/GuidesListScreen.tsx b/apps/expo/features/guides/screens/GuidesListScreen.tsx
index 928a52746c..847b9a7538 100644
--- a/apps/expo/features/guides/screens/GuidesListScreen.tsx
+++ b/apps/expo/features/guides/screens/GuidesListScreen.tsx
@@ -216,6 +216,7 @@ export const GuidesListScreen = () => {
         renderItem={renderGuide}
         ListHeaderComponent={listHeader}
         contentContainerStyle={{ paddingHorizontal: 16, flexGrow: 1 }}
+        contentInsetAdjustmentBehavior="automatic"
         refreshControl={
           <RefreshControl
             refreshing={isRefetching}
diff --git a/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx b/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx
index 2c3a59b5e5..46d55919b6 100644
--- a/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx
+++ b/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx
@@ -224,6 +224,7 @@ export function PackTemplateListScreen() {
       <FlatList
         data={filteredTemplates}
         keyExtractor={(item) => item.id}
+        contentInsetAdjustmentBehavior="automatic"
         renderItem={({ item }) => (
           <View className="px-4 pt-4">
             <PackTemplateCard templateId={item.id} onPress={handleTemplatePress} />
diff --git a/apps/expo/features/packs/screens/PackListScreen.tsx b/apps/expo/features/packs/screens/PackListScreen.tsx
index 5985ffcd80..6f5759ff20 100644
--- a/apps/expo/features/packs/screens/PackListScreen.tsx
+++ b/apps/expo/features/packs/screens/PackListScreen.tsx
@@ -219,6 +219,7 @@ export function PackListScreen() {
         data={filteredPacks}
         keyExtractor={(pack) => pack.id}
         stickyHeaderIndices={[0]}
+        contentInsetAdjustmentBehavior="automatic"
         renderItem={({ item: pack }) => (
           <View className="px-4 pt-4">
             <PackCard
diff --git a/apps/expo/features/trips/screens/TripListScreen.tsx b/apps/expo/features/trips/screens/TripListScreen.tsx
index d97a158f8a..c1819ec677 100644
--- a/apps/expo/features/trips/screens/TripListScreen.tsx
+++ b/apps/expo/features/trips/screens/TripListScreen.tsx
@@ -170,6 +170,7 @@ export function TripsListScreen() {
         data={filteredTrips}
         keyExtractor={(trip) => trip.id}
         ListHeaderComponent={<TrailConditionsBanner />}
+        contentInsetAdjustmentBehavior="automatic"
         renderItem={({ item: trip }) => (
           <View className="px-4 pt-4">
             <TripCard trip={trip} onPress={handleTripPress} />
diff --git a/apps/expo/features/weather/screens/LocationsScreen.tsx b/apps/expo/features/weather/screens/LocationsScreen.tsx
index 62db89a680..20e4bfc5ff 100644
--- a/apps/expo/features/weather/screens/LocationsScreen.tsx
+++ b/apps/expo/features/weather/screens/LocationsScreen.tsx
@@ -190,6 +190,7 @@ function LocationsScreen() {
             paddingBottom: insets.bottom + 16,
             flexGrow: showEmptyState ? 1 : undefined,
           }}
+          contentInsetAdjustmentBehavior="automatic"
           refreshControl={
             <RefreshControl
               refreshing={isRefreshing}
diff --git a/apps/expo/features/wildlife/screens/WildlifeScreen.tsx b/apps/expo/features/wildlife/screens/WildlifeScreen.tsx
index 00aad4b253..c48d234e17 100644
--- a/apps/expo/features/wildlife/screens/WildlifeScreen.tsx
+++ b/apps/expo/features/wildlife/screens/WildlifeScreen.tsx
@@ -105,6 +105,7 @@ export function WildlifeScreen() {
                 <HistoryItem item={item} onPress={() => handleHistoryItemPress(item)} />
               )}
               contentContainerStyle={{ paddingBottom: 24 }}
+              contentInsetAdjustmentBehavior="automatic"
             />
           </>
         ) : (

From 5bbe29281bc2a0908883b00e442b53e87f5be187 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 26 Apr 2026 21:44:57 -0600
Subject: [PATCH 2/3] fix: remove redundant SafeAreaView top insets conflicting
 with contentInsetAdjustmentBehavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PackItemDetailScreen: edges={['bottom']} — regular stack header already offsets content
- current-pack, weight-analysis, trail-conditions: strip manual paddingTop/insets since
  contentInsetAdjustmentBehavior=automatic handles nav bar offset
---
 .claude/scheduled_tasks.lock                         |  1 -
 apps/expo/app/(app)/current-pack/[id].tsx            | 12 ++++--------
 apps/expo/app/(app)/trail-conditions.tsx             |  5 ++---
 apps/expo/app/(app)/weight-analysis/[id].tsx         | 12 ++++--------
 .../features/packs/screens/PackItemDetailScreen.tsx  |  8 ++++----
 5 files changed, 14 insertions(+), 24 deletions(-)
 delete mode 100644 .claude/scheduled_tasks.lock

diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
deleted file mode 100644
index b1c5a73747..0000000000
--- a/.claude/scheduled_tasks.lock
+++ /dev/null
@@ -1 +0,0 @@
-{"sessionId":"6cde7465-5bfc-4ba4-88ef-122130ee32fd","pid":83477,"acquiredAt":1776531548866}
\ No newline at end of file
diff --git a/apps/expo/app/(app)/current-pack/[id].tsx b/apps/expo/app/(app)/current-pack/[id].tsx
index 161c92b34a..1289d4a8fc 100644
--- a/apps/expo/app/(app)/current-pack/[id].tsx
+++ b/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,10 +132,9 @@ 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">
       <LargeTitleHeader title={t('packs.currentPack')} />
       <ScrollView
         className="flex-1"
@@ -143,10 +142,7 @@ export default function CurrentPackScreen() {
         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>
diff --git a/apps/expo/app/(app)/trail-conditions.tsx b/apps/expo/app/(app)/trail-conditions.tsx
index 5cb0b88261..244c35f623 100644
--- a/apps/expo/app/(app)/trail-conditions.tsx
+++ b/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 style={{ flex: 1 }}>
       <LargeTitleHeader
         title={t('trailConditions.title')}
         rightView={() => (
diff --git a/apps/expo/app/(app)/weight-analysis/[id].tsx b/apps/expo/app/(app)/weight-analysis/[id].tsx
index fa4da289c1..1027fa5bce 100644
--- a/apps/expo/app/(app)/weight-analysis/[id].tsx
+++ b/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,10 +45,9 @@ 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">
       <LargeTitleHeader title={t('packs.weightAnalysis')} />
       <ScrollView
         className="flex-1"
@@ -56,10 +55,7 @@ export default function WeightAnalysisScreen() {
         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`}
diff --git a/apps/expo/features/packs/screens/PackItemDetailScreen.tsx b/apps/expo/features/packs/screens/PackItemDetailScreen.tsx
index bb3fbaa18f..c1b67368a9 100644
--- a/apps/expo/features/packs/screens/PackItemDetailScreen.tsx
+++ b/apps/expo/features/packs/screens/PackItemDetailScreen.tsx
@@ -49,7 +49,7 @@ export function ItemDetailScreen() {
   // Loading state for non-owned items
   if (!isOwnedByUser && isLoading) {
     return (
-      <SafeAreaView className="flex-1">
+      <SafeAreaView edges={['bottom']} className="flex-1">
         <View className="flex-1 items-center justify-center p-4">
           <ActivityIndicator />
         </View>
@@ -60,7 +60,7 @@ export function ItemDetailScreen() {
   // Error state for non-owned packs
   if (!isOwnedByUser && isError) {
     return (
-      <SafeAreaView className="flex-1">
+      <SafeAreaView edges={['bottom']} className="flex-1">
         <View className="flex-1 items-center justify-center p-8">
           <View className="mb-4 rounded-full bg-destructive/10 p-4">
             <Icon name="exclamation" size={32} color="text-destructive" />
@@ -86,7 +86,7 @@ export function ItemDetailScreen() {
 
   if (!isDefined(item)) {
     return (
-      <SafeAreaView className="flex-1">
+      <SafeAreaView edges={['bottom']} className="flex-1">
         <View className="flex-1 items-center justify-center p-4">
           <ActivityIndicator />
         </View>
@@ -134,7 +134,7 @@ export function ItemDetailScreen() {
   };
 
   return (
-    <SafeAreaView className="flex-1">
+    <SafeAreaView edges={['bottom']} className="flex-1">
       <ScrollView>
         <PackItemImage item={item} className="h-64 w-full" resizeMode="contain" />
 

From 568962b78f274076bbae4ba88ed1feecb3da4be6 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Tue, 28 Apr 2026 12:03:07 +0100
Subject: [PATCH 3/3] fix(expo): handle Android extra padding, bottom insets
 and iOS hidden / overlapping header in multiple screens

---
 apps/expo/app/(app)/current-pack/[id].tsx     |   2 +-
 apps/expo/app/(app)/gear-inventory.tsx        |   2 +-
 apps/expo/app/(app)/pack-categories/[id].tsx  |   2 +-
 apps/expo/app/(app)/pack-stats/[id].tsx       |   5 +-
 apps/expo/app/(app)/recent-packs.tsx          |   5 +-
 apps/expo/app/(app)/shared-packs.tsx          |   5 +-
 apps/expo/app/(app)/shopping-list.tsx         |   5 +-
 apps/expo/app/(app)/trail-conditions.tsx      |   2 +-
 apps/expo/app/(app)/weather-alerts.tsx        |   2 +-
 apps/expo/app/(app)/weight-analysis/[id].tsx  |   2 +-
 .../LargeTitleHeaderOverlapFixIOS.tsx         |   9 +-
 .../ai/screens/ReportedContentScreen.tsx      | 252 +++++++++---------
 .../packs/screens/PackDetailScreen.tsx        |   2 +-
 .../features/packs/screens/PackListScreen.tsx | 217 +++++++--------
 .../features/trips/screens/TripListScreen.tsx |   5 +-
 .../weather/screens/LocationsScreen.tsx       | 238 +++++++++--------
 16 files changed, 380 insertions(+), 375 deletions(-)

diff --git a/apps/expo/app/(app)/current-pack/[id].tsx b/apps/expo/app/(app)/current-pack/[id].tsx
index 1289d4a8fc..db114c3fe7 100644
--- a/apps/expo/app/(app)/current-pack/[id].tsx
+++ b/apps/expo/app/(app)/current-pack/[id].tsx
@@ -134,7 +134,7 @@ export default function CurrentPackScreen() {
   const uniqueCategories = computeCategorySummaries(pack);
 
   return (
-    <SafeAreaView className="flex-1">
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.currentPack')} />
       <ScrollView
         className="flex-1"
diff --git a/apps/expo/app/(app)/gear-inventory.tsx b/apps/expo/app/(app)/gear-inventory.tsx
index 9b9282a7cc..f2fa21b2ed 100644
--- a/apps/expo/app/(app)/gear-inventory.tsx
+++ b/apps/expo/app/(app)/gear-inventory.tsx
@@ -47,7 +47,7 @@ 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" contentInsetAdjustmentBehavior="automatic">
         <View className="flex-row items-center justify-between p-4">
diff --git a/apps/expo/app/(app)/pack-categories/[id].tsx b/apps/expo/app/(app)/pack-categories/[id].tsx
index e0699ae3bc..4f8f97b771 100644
--- a/apps/expo/app/(app)/pack-categories/[id].tsx
+++ b/apps/expo/app/(app)/pack-categories/[id].tsx
@@ -65,7 +65,7 @@ export default function PackCategoriesScreen() {
     <>
       <LargeTitleHeader title={t('packs.packCategories')} />
       {categories.length ? (
-        <ScrollView className="flex-1" contentInsetAdjustmentBehavior="automatic">
+        <ScrollView className="flex-1">
           <View className="p-4">
             <Text variant="subhead" className="mb-2 text-muted-foreground">
               {t('packs.organizeGear')}
diff --git a/apps/expo/app/(app)/pack-stats/[id].tsx b/apps/expo/app/(app)/pack-stats/[id].tsx
index c2460fa50b..3277f6d134 100644
--- a/apps/expo/app/(app)/pack-stats/[id].tsx
+++ b/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,7 +31,7 @@ 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" contentInsetAdjustmentBehavior="automatic">
@@ -157,6 +158,6 @@ export default function PackStatsScreen() {
           <Text>{t('packs.noStatsAvailable')}</Text>
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/app/(app)/recent-packs.tsx b/apps/expo/app/(app)/recent-packs.tsx
index e420436c33..20fa2db13a 100644
--- a/apps/expo/app/(app)/recent-packs.tsx
+++ b/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,7 +59,7 @@ 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" contentInsetAdjustmentBehavior="automatic">
@@ -81,6 +82,6 @@ export default function RecentPacksScreen() {
           </Text>
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/app/(app)/shared-packs.tsx b/apps/expo/app/(app)/shared-packs.tsx
index c100b5b055..76ab6cf6ed 100644
--- a/apps/expo/app/(app)/shared-packs.tsx
+++ b/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,7 +180,7 @@ 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" contentInsetAdjustmentBehavior="automatic">
         <View className="p-4">
@@ -210,6 +211,6 @@ export default function SharedPacksScreen() {
           <Text variant="body">{t('packs.sharingBenefit3')}</Text>
         </View>
       </ScrollView>
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/app/(app)/shopping-list.tsx b/apps/expo/app/(app)/shopping-list.tsx
index da5e04ad42..931afdd7e4 100644
--- a/apps/expo/app/(app)/shopping-list.tsx
+++ b/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,7 +169,7 @@ export default function ShoppingListScreen() {
   });
 
   return (
-    <>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('shopping.shoppingList')} />
       <ScrollView className="flex-1" contentInsetAdjustmentBehavior="automatic">
         <View className="p-4">
@@ -251,6 +252,6 @@ export default function ShoppingListScreen() {
           <Text variant="body">• Compare prices across multiple retailers before purchasing</Text>
         </View>
       </ScrollView>
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/app/(app)/trail-conditions.tsx b/apps/expo/app/(app)/trail-conditions.tsx
index 244c35f623..984a7cf2f3 100644
--- a/apps/expo/app/(app)/trail-conditions.tsx
+++ b/apps/expo/app/(app)/trail-conditions.tsx
@@ -159,7 +159,7 @@ export default function TrailConditionsScreen() {
   );
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader
         title={t('trailConditions.title')}
         rightView={() => (
diff --git a/apps/expo/app/(app)/weather-alerts.tsx b/apps/expo/app/(app)/weather-alerts.tsx
index de72385ef2..c02838c9a4 100644
--- a/apps/expo/app/(app)/weather-alerts.tsx
+++ b/apps/expo/app/(app)/weather-alerts.tsx
@@ -133,7 +133,7 @@ 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" contentInsetAdjustmentBehavior="automatic">
         <View className="flex-row items-center justify-between p-4">
diff --git a/apps/expo/app/(app)/weight-analysis/[id].tsx b/apps/expo/app/(app)/weight-analysis/[id].tsx
index 1027fa5bce..01978d9fd1 100644
--- a/apps/expo/app/(app)/weight-analysis/[id].tsx
+++ b/apps/expo/app/(app)/weight-analysis/[id].tsx
@@ -47,7 +47,7 @@ export default function WeightAnalysisScreen() {
   const preferredWeightUnit = userStore.preferredWeightUnit.peek() ?? 'g';
 
   return (
-    <SafeAreaView className="flex-1">
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader title={t('packs.weightAnalysis')} />
       <ScrollView
         className="flex-1"
diff --git a/apps/expo/components/LargeTitleHeaderOverlapFixIOS.tsx b/apps/expo/components/LargeTitleHeaderOverlapFixIOS.tsx
index e96ba31a73..ae6b71a30e 100644
--- a/apps/expo/components/LargeTitleHeaderOverlapFixIOS.tsx
+++ b/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>
diff --git a/apps/expo/features/ai/screens/ReportedContentScreen.tsx b/apps/expo/features/ai/screens/ReportedContentScreen.tsx
index 56ced1108e..b7e98df99d 100644
--- a/apps/expo/features/ai/screens/ReportedContentScreen.tsx
+++ b/apps/expo/features/ai/screens/ReportedContentScreen.tsx
@@ -34,145 +34,147 @@ export default function ReportedContentScreen() {
     <View className="flex-1 bg-background">
       <LargeTitleHeader title={t('ai.reportedContent.title')} />
 
-      <View className="flex-row justify-around px-4 py-2">
-        <FilterButton
-          label={t('ai.reportedContent.pending')}
-          isActive={selectedFilter === 'pending'}
-          onPress={() => setSelectedFilter('pending')}
-        />
-        <FilterButton
-          label={t('ai.reportedContent.reviewed')}
-          isActive={selectedFilter === 'reviewed'}
-          onPress={() => setSelectedFilter('reviewed')}
-        />
-        <FilterButton
-          label={t('ai.reportedContent.dismissed')}
-          isActive={selectedFilter === 'dismissed'}
-          onPress={() => setSelectedFilter('dismissed')}
-        />
-        <FilterButton
-          label={t('ai.reportedContent.all')}
-          isActive={selectedFilter === 'all'}
-          onPress={() => setSelectedFilter('all')}
-        />
-      </View>
+      <FlatList
+        data={filteredData}
+        keyExtractor={(item) => item.id.toString()}
+        contentContainerClassName="p-4"
+        contentInsetAdjustmentBehavior="automatic"
+        ListHeaderComponent={
+          <View className="flex-row justify-around px-4 py-2">
+            <FilterButton
+              label={t('ai.reportedContent.pending')}
+              isActive={selectedFilter === 'pending'}
+              onPress={() => setSelectedFilter('pending')}
+            />
+            <FilterButton
+              label={t('ai.reportedContent.reviewed')}
+              isActive={selectedFilter === 'reviewed'}
+              onPress={() => setSelectedFilter('reviewed')}
+            />
+            <FilterButton
+              label={t('ai.reportedContent.dismissed')}
+              isActive={selectedFilter === 'dismissed'}
+              onPress={() => setSelectedFilter('dismissed')}
+            />
+            <FilterButton
+              label={t('ai.reportedContent.all')}
+              isActive={selectedFilter === 'all'}
+              onPress={() => setSelectedFilter('all')}
+            />
+          </View>
+        }
+        ListEmptyComponent={
+          isLoading ? (
+            <View className="flex-1 items-center justify-center">
+              <ActivityIndicator size="large" color={colors.primary} />
+            </View>
+          ) : error ? (
+            <View className="flex-1 items-center justify-center p-4">
+              <Text className="text-center text-destructive">
+                {t('ai.reportedContent.errorLoading')}
+              </Text>
+            </View>
+          ) : (
+            <View className="flex-1 items-center justify-center p-4">
+              <Icon name="magnify" size={48} color={colors.grey2} />
+              <Text className="mt-4 text-center text-muted-foreground">
+                {t('ai.reportedContent.noReportsFound')}
+              </Text>
+            </View>
+          )
+        }
+        renderItem={({ item }) => (
+          <View className="mb-4 rounded-lg border border-border bg-card p-4">
+            <View className="mb-2 flex-row justify-between">
+              <Text className="font-medium">{item.user.firstName}</Text>
+              <Text className="text-xs text-muted-foreground">
+                {new Date(item.createdAt).toLocaleDateString()}
+              </Text>
+            </View>
 
-      {isLoading ? (
-        <View className="flex-1 items-center justify-center">
-          <ActivityIndicator size="large" color={colors.primary} />
-        </View>
-      ) : error ? (
-        <View className="flex-1 items-center justify-center p-4">
-          <Text className="text-center text-destructive">
-            {t('ai.reportedContent.errorLoading')}
-          </Text>
-        </View>
-      ) : filteredData?.length === 0 ? (
-        <View className="flex-1 items-center justify-center p-4">
-          <Icon name="magnify" size={48} color={colors.grey2} />
-          <Text className="mt-4 text-center text-muted-foreground">
-            {t('ai.reportedContent.noReportsFound')}
-          </Text>
-        </View>
-      ) : (
-        <FlatList
-          data={filteredData}
-          keyExtractor={(item) => item.id.toString()}
-          contentContainerClassName="p-4"
-          contentInsetAdjustmentBehavior="automatic"
-          renderItem={({ item }) => (
-            <View className="mb-4 rounded-lg border border-border bg-card p-4">
-              <View className="mb-2 flex-row justify-between">
-                <Text className="font-medium">{item.user.firstName}</Text>
-                <Text className="text-xs text-muted-foreground">
-                  {new Date(item.createdAt).toLocaleDateString()}
+            {/* Report reason badge */}
+            <View className="mb-3 flex-row">
+              <View className="rounded-full bg-amber-100 px-2 py-1 dark:bg-amber-900">
+                <Text className="text-xs font-medium text-amber-800 dark:text-amber-100">
+                  {t(
+                    reportReasonTranslationKeys[
+                      item.reason as keyof typeof reportReasonTranslationKeys
+                    ],
+                  )}
                 </Text>
               </View>
+            </View>
 
-              {/* Report reason badge */}
-              <View className="mb-3 flex-row">
-                <View className="rounded-full bg-amber-100 px-2 py-1 dark:bg-amber-900">
-                  <Text className="text-xs font-medium text-amber-800 dark:text-amber-100">
-                    {t(
-                      reportReasonTranslationKeys[
-                        item.reason as keyof typeof reportReasonTranslationKeys
-                      ],
-                    )}
-                  </Text>
-                </View>
+            {/* User Query Section */}
+            <View className="my-2">
+              <Text className="mb-1 text-xs font-medium text-muted-foreground">
+                {t('ai.reportedContent.userQuery')}
+              </Text>
+              <View className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
+                <Text className="text-blue-900 dark:text-blue-100">{item.userQuery}</Text>
               </View>
+            </View>
 
-              {/* User Query Section */}
-              <View className="my-2">
-                <Text className="mb-1 text-xs font-medium text-muted-foreground">
-                  {t('ai.reportedContent.userQuery')}
-                </Text>
-                <View className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-                  <Text className="text-blue-900 dark:text-blue-100">{item.userQuery}</Text>
-                </View>
+            {/* AI Response Section */}
+            <View className="my-2">
+              <Text className="mb-1 text-xs font-medium text-muted-foreground">
+                {t('ai.reportedContent.aiResponse')}
+              </Text>
+              <View className="rounded-md bg-red-50 p-3 dark:bg-red-950">
+                <Text className="text-red-900 dark:text-red-100">{item.aiResponse}</Text>
               </View>
+            </View>
 
-              {/* AI Response Section */}
+            {/* User Comment Section - only show if there is a comment */}
+            {item.userComment && (
               <View className="my-2">
                 <Text className="mb-1 text-xs font-medium text-muted-foreground">
-                  {t('ai.reportedContent.aiResponse')}
+                  {t('ai.reportedContent.userComment')}
                 </Text>
-                <View className="rounded-md bg-red-50 p-3 dark:bg-red-950">
-                  <Text className="text-red-900 dark:text-red-100">{item.aiResponse}</Text>
-                </View>
-              </View>
-
-              {/* User Comment Section - only show if there is a comment */}
-              {item.userComment && (
-                <View className="my-2">
-                  <Text className="mb-1 text-xs font-medium text-muted-foreground">
-                    {t('ai.reportedContent.userComment')}
+                <View className="rounded-md bg-gray-50 p-3 dark:bg-gray-800">
+                  <Text className="italic text-gray-700 dark:text-gray-300">
+                    {item.userComment}
                   </Text>
-                  <View className="rounded-md bg-gray-50 p-3 dark:bg-gray-800">
-                    <Text className="italic text-gray-700 dark:text-gray-300">
-                      {item.userComment}
-                    </Text>
-                  </View>
                 </View>
-              )}
+              </View>
+            )}
 
-              {item.status === 'pending' ? (
-                <View className="mt-3 flex-row justify-end gap-2">
-                  <Button
-                    variant="tonal"
-                    size="sm"
-                    onPress={() => handleReview(item.id, 'dismissed')}
-                    disabled={updateMutation.isPending}
-                  >
-                    <Text>{t('ai.reportedContent.dismiss')}</Text>
-                  </Button>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onPress={() => handleReview(item.id, 'reviewed')}
-                    disabled={updateMutation.isPending}
-                  >
-                    <Text>{t('ai.reportedContent.resolve')}</Text>
-                  </Button>
-                </View>
-              ) : (
-                <View className="mt-3 flex-row justify-end">
-                  <Text
-                    className={cn(
-                      'text-xs font-medium',
-                      item.status === 'resolved' ? 'text-destructive' : 'text-muted-foreground',
-                    )}
-                  >
-                    {item.status === 'resolved'
-                      ? t('ai.reportedContent.resolved')
-                      : t('ai.reportedContent.dismissed')}
-                  </Text>
-                </View>
-              )}
-            </View>
-          )}
-        />
-      )}
+            {item.status === 'pending' ? (
+              <View className="mt-3 flex-row justify-end gap-2">
+                <Button
+                  variant="tonal"
+                  size="sm"
+                  onPress={() => handleReview(item.id, 'dismissed')}
+                  disabled={updateMutation.isPending}
+                >
+                  <Text>{t('ai.reportedContent.dismiss')}</Text>
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onPress={() => handleReview(item.id, 'reviewed')}
+                  disabled={updateMutation.isPending}
+                >
+                  <Text>{t('ai.reportedContent.resolve')}</Text>
+                </Button>
+              </View>
+            ) : (
+              <View className="mt-3 flex-row justify-end">
+                <Text
+                  className={cn(
+                    'text-xs font-medium',
+                    item.status === 'resolved' ? 'text-destructive' : 'text-muted-foreground',
+                  )}
+                >
+                  {item.status === 'resolved'
+                    ? t('ai.reportedContent.resolved')
+                    : t('ai.reportedContent.dismissed')}
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+      />
     </View>
   );
 }
diff --git a/apps/expo/features/packs/screens/PackDetailScreen.tsx b/apps/expo/features/packs/screens/PackDetailScreen.tsx
index 0ed7252c7f..dcb9fe8757 100644
--- a/apps/expo/features/packs/screens/PackDetailScreen.tsx
+++ b/apps/expo/features/packs/screens/PackDetailScreen.tsx
@@ -453,7 +453,7 @@ export function PackDetailScreen() {
   }
 
   return (
-    <SafeAreaView className="flex-1">
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <ScrollView stickyHeaderIndices={[2]} contentContainerClassName="pb-24">
         {pack.image && (
           <Image source={{ uri: pack.image }} className="h-48 w-full" resizeMode="cover" />
diff --git a/apps/expo/features/packs/screens/PackListScreen.tsx b/apps/expo/features/packs/screens/PackListScreen.tsx
index 6f5759ff20..0236d0c2b2 100644
--- a/apps/expo/features/packs/screens/PackListScreen.tsx
+++ b/apps/expo/features/packs/screens/PackListScreen.tsx
@@ -30,6 +30,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAllPacks } from '../hooks/useAllPacks';
 import { usePacks } from '../hooks/usePacks';
 import type { Pack, PackCategory, PackInStore } from '../types';
@@ -186,118 +187,120 @@ export function PackListScreen() {
   };
 
   return (
-    <LargeTitleHeaderOverlapFixIOS>
-      <LargeTitleHeader
-        title={t('navigation.packs')}
-        backVisible={false}
-        searchBar={{
-          ref: asNonNullableRef(searchBarRef),
-          onChangeText(text) {
-            setSearchValue(text);
-          },
-          content: (
-            <LargeTitleHeaderSearchContentContainer>
-              {searchValue ? (
-                <SearchResults
-                  // biome-ignore lint/suspicious/noExplicitAny: Treaty type divergence
-                  results={(filteredPacks || []) as any}
-                  searchValue={searchValue}
-                  onResultPress={handleSearchResultPress}
-                />
-              ) : (
-                <View className="flex-1 items-center justify-center">
-                  <Text>{t('packs.searchPacks')}</Text>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
+      <LargeTitleHeaderOverlapFixIOS>
+        <LargeTitleHeader
+          title={t('navigation.packs')}
+          backVisible={false}
+          searchBar={{
+            ref: asNonNullableRef(searchBarRef),
+            onChangeText(text) {
+              setSearchValue(text);
+            },
+            content: (
+              <LargeTitleHeaderSearchContentContainer>
+                {searchValue ? (
+                  <SearchResults
+                    // biome-ignore lint/suspicious/noExplicitAny: Treaty type divergence
+                    results={(filteredPacks || []) as any}
+                    searchValue={searchValue}
+                    onResultPress={handleSearchResultPress}
+                  />
+                ) : (
+                  <View className="flex-1 items-center justify-center">
+                    <Text>{t('packs.searchPacks')}</Text>
+                  </View>
+                )}
+              </LargeTitleHeaderSearchContentContainer>
+            ),
+          }}
+          rightView={() => <CreatePackIconButton />}
+        />
+
+        <FlatList
+          data={filteredPacks}
+          keyExtractor={(pack) => pack.id}
+          stickyHeaderIndices={[0]}
+          contentInsetAdjustmentBehavior="automatic"
+          renderItem={({ item: pack }) => (
+            <View className="px-4 pt-4">
+              <PackCard
+                // biome-ignore lint/suspicious/noExplicitAny: Treaty type divergence
+                pack={pack as any}
+                onPress={handlePackPress}
+                showDuplicateButton={selectedTypeIndex === ALL_PACKS_INDEX}
+              />
+            </View>
+          )}
+          refreshControl={
+            selectedTypeIndex === ALL_PACKS_INDEX ? (
+              <RefreshControl
+                refreshing={allPacksQuery.isRefetching}
+                onRefresh={allPacksQuery.refetch}
+                tintColor={colors.primary}
+              />
+            ) : undefined
+          }
+          ListHeaderComponent={
+            <View className="bg-background">
+              {!isAuthenticated && <SyncBanner title={t('packs.syncBanner')} />}
+              {isAuthenticated && (
+                <View className="px-4">
+                  <SegmentedControl
+                    enabled={isAuthenticated}
+                    values={['My Packs', 'All Packs']}
+                    selectedIndex={selectedTypeIndex}
+                    onIndexChange={(index) => {
+                      setSelectedTypeIndex(index);
+                    }}
+                  />
                 </View>
               )}
-            </LargeTitleHeaderSearchContentContainer>
-          ),
-        }}
-        rightView={() => <CreatePackIconButton />}
-      />
-
-      <FlatList
-        data={filteredPacks}
-        keyExtractor={(pack) => pack.id}
-        stickyHeaderIndices={[0]}
-        contentInsetAdjustmentBehavior="automatic"
-        renderItem={({ item: pack }) => (
-          <View className="px-4 pt-4">
-            <PackCard
-              // biome-ignore lint/suspicious/noExplicitAny: Treaty type divergence
-              pack={pack as any}
-              onPress={handlePackPress}
-              showDuplicateButton={selectedTypeIndex === ALL_PACKS_INDEX}
-            />
-          </View>
-        )}
-        refreshControl={
-          selectedTypeIndex === ALL_PACKS_INDEX ? (
-            <RefreshControl
-              refreshing={allPacksQuery.isRefetching}
-              onRefresh={allPacksQuery.refetch}
-              tintColor={colors.primary}
-            />
-          ) : undefined
-        }
-        ListHeaderComponent={
-          <View className="bg-background">
-            {!isAuthenticated && <SyncBanner title={t('packs.syncBanner')} />}
-            {isAuthenticated && (
-              <View className="px-4">
-                <SegmentedControl
-                  enabled={isAuthenticated}
-                  values={['My Packs', 'All Packs']}
-                  selectedIndex={selectedTypeIndex}
-                  onIndexChange={(index) => {
-                    setSelectedTypeIndex(index);
-                  }}
-                />
+              <View className="bg-background px-4 py-2">
+                <ScrollView horizontal showsHorizontalScrollIndicator={false} className="py-1">
+                  {filterOptions.map(renderFilterChip)}
+                </ScrollView>
               </View>
-            )}
-            <View className="bg-background px-4 py-2">
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} className="py-1">
-                {filterOptions.map(renderFilterChip)}
-              </ScrollView>
+              {selectedTypeIndex === USER_PACKS_INDEX && (
+                <View className="px-6 py-2 bg-background">
+                  <Text className="text-muted-foreground">
+                    {filteredPacks?.length || 0} {filteredPacks?.length === 1 ? 'pack' : 'packs'}
+                  </Text>
+                </View>
+              )}
             </View>
-            {selectedTypeIndex === USER_PACKS_INDEX && (
-              <View className="px-6 py-2 bg-background">
-                <Text className="text-muted-foreground">
-                  {filteredPacks?.length || 0} {filteredPacks?.length === 1 ? 'pack' : 'packs'}
+          }
+          ListEmptyComponent={
+            selectedTypeIndex === ALL_PACKS_INDEX ? (
+              renderAllPacksEmptyState()
+            ) : (
+              <View className="flex-1 items-center justify-center p-8">
+                <View className="mb-4 rounded-full bg-muted p-4">
+                  <Icon name="cog-outline" size={32} color="text-muted-foreground" />
+                </View>
+                <Text className="mb-1 text-lg font-medium text-foreground">
+                  {t('packs.noPacksFound')}
                 </Text>
-              </View>
-            )}
-          </View>
-        }
-        ListEmptyComponent={
-          selectedTypeIndex === ALL_PACKS_INDEX ? (
-            renderAllPacksEmptyState()
-          ) : (
-            <View className="flex-1 items-center justify-center p-8">
-              <View className="mb-4 rounded-full bg-muted p-4">
-                <Icon name="cog-outline" size={32} color="text-muted-foreground" />
-              </View>
-              <Text className="mb-1 text-lg font-medium text-foreground">
-                {t('packs.noPacksFound')}
-              </Text>
-              <Text className="mb-6 text-center text-muted-foreground">
-                {activeFilter === 'all'
-                  ? "You haven't created or found any public packs yet."
-                  : `You don't have any ${activeFilter} packs.`}
-              </Text>
-              <TouchableOpacity
-                className="rounded-lg bg-primary px-4 py-2"
-                onPress={handleCreatePack}
-              >
-                <Text className="font-medium text-primary-foreground">
-                  {t('packs.createNewPack')}
+                <Text className="mb-6 text-center text-muted-foreground">
+                  {activeFilter === 'all'
+                    ? "You haven't created or found any public packs yet."
+                    : `You don't have any ${activeFilter} packs.`}
                 </Text>
-              </TouchableOpacity>
-            </View>
-          )
-        }
-        ListFooterComponent={<AndroidTabBarInsetFix />}
-        contentContainerStyle={{ flexGrow: 1 }}
-      />
-    </LargeTitleHeaderOverlapFixIOS>
+                <TouchableOpacity
+                  className="rounded-lg bg-primary px-4 py-2"
+                  onPress={handleCreatePack}
+                >
+                  <Text className="font-medium text-primary-foreground">
+                    {t('packs.createNewPack')}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            )
+          }
+          ListFooterComponent={<AndroidTabBarInsetFix />}
+          contentContainerStyle={{ flexGrow: 1 }}
+        />
+      </LargeTitleHeaderOverlapFixIOS>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/features/trips/screens/TripListScreen.tsx b/apps/expo/features/trips/screens/TripListScreen.tsx
index c1819ec677..0eb9b8d38a 100644
--- a/apps/expo/features/trips/screens/TripListScreen.tsx
+++ b/apps/expo/features/trips/screens/TripListScreen.tsx
@@ -9,6 +9,7 @@ import { asNonNullableRef } from 'expo-app/lib/utils/asNonNullableRef';
 import { Link, useRouter } from 'expo-router';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FlatList, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { TripCard } from '../components/TripCard';
 import { useTrips } from '../hooks';
 import type { Trip } from '../types';
@@ -148,7 +149,7 @@ export function TripsListScreen() {
   };
 
   return (
-    <>
+    <SafeAreaView className="flex-1" edges={['bottom']}>
       <LargeTitleHeader
         title={t('trips.trips')}
         backVisible={false}
@@ -180,6 +181,6 @@ export function TripsListScreen() {
         ListFooterComponent={<AndroidTabBarInsetFix />}
         contentContainerStyle={{ flexGrow: 1 }}
       />
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/features/weather/screens/LocationsScreen.tsx b/apps/expo/features/weather/screens/LocationsScreen.tsx
index 20e4bfc5ff..1c48d033b2 100644
--- a/apps/expo/features/weather/screens/LocationsScreen.tsx
+++ b/apps/expo/features/weather/screens/LocationsScreen.tsx
@@ -1,5 +1,6 @@
 import { Button, LargeTitleHeader, Text } from '@packrat/ui/nativewindui';
 import { Icon } from 'expo-app/components/Icon';
+import { LargeTitleHeaderOverlapFixIOS } from 'expo-app/components/LargeTitleHeaderOverlapFixIOS';
 import { SearchInput } from 'expo-app/components/SearchInput';
 import { withAuthWall } from 'expo-app/features/auth/hocs';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -11,7 +12,6 @@ import {
   ActivityIndicator,
   Alert,
   Keyboard,
-  Platform,
   Pressable,
   RefreshControl,
   ScrollView,
@@ -117,134 +117,136 @@ function LocationsScreen() {
   const showLocationsList = filteredLocations.length > 0;
 
   return (
-    <SafeAreaView style={{ flex: 1, paddingTop: Platform.OS === 'ios' ? insets.top : 0 }}>
-      <LargeTitleHeader
-        title={t('weather.weather')}
-        rightView={() => (
-          <Pressable onPress={handleAddLocation} className="mx-2">
-            <Icon name="plus" color={colors.foreground} />
-          </Pressable>
-        )}
-      />
-
-      <View className="p-4" style={{ paddingTop: Platform.OS === 'ios' ? insets.top + 22 : 0 }}>
-        <SearchInput
-          ref={searchInputRef}
-          placeholder={t('weather.searchSavedLocations')}
-          value={searchQuery}
-          onChangeText={handleSearchChange}
-          containerClassName="border border-border"
-          onFocus={() => setIsSearchFocused(true)}
-          onBlur={() => {
-            // Only unfocus if search is empty
-            if (searchQuery.length === 0) {
-              setIsSearchFocused(false);
-            }
-          }}
+    <SafeAreaView className="flex-1" edges={['bottom']}>
+      <LargeTitleHeaderOverlapFixIOS>
+        <LargeTitleHeader
+          title={t('weather.weather')}
+          rightView={() => (
+            <Pressable onPress={handleAddLocation} className="mx-2">
+              <Icon name="plus" color={colors.foreground} />
+            </Pressable>
+          )}
         />
-      </View>
-
-      {showNoSearchResults && (
-        <Animated.View
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(200)}
-          className="px-4 py-2"
-        >
-          <Text className="mb-2 text-xs uppercase text-muted-foreground">
-            {t('weather.searchResults')}
-          </Text>
-          <View className="bg-muted/30 items-center rounded-lg p-4">
-            <Icon name="magnify-minus-outline" size={24} color={colors.grey2} />
-            <Text className="mt-2 text-muted-foreground">
-              {t('weather.noLocationsMatch', { query: searchQuery })}
+
+        <View className="p-4">
+          <SearchInput
+            ref={searchInputRef}
+            placeholder={t('weather.searchSavedLocations')}
+            value={searchQuery}
+            onChangeText={handleSearchChange}
+            containerClassName="border border-border"
+            onFocus={() => setIsSearchFocused(true)}
+            onBlur={() => {
+              // Only unfocus if search is empty
+              if (searchQuery.length === 0) {
+                setIsSearchFocused(false);
+              }
+            }}
+          />
+        </View>
+
+        {showNoSearchResults && (
+          <Animated.View
+            entering={FadeIn.duration(200)}
+            exiting={FadeOut.duration(200)}
+            className="px-4 py-2"
+          >
+            <Text className="mb-2 text-xs uppercase text-muted-foreground">
+              {t('weather.searchResults')}
             </Text>
-            <View className="mt-4 flex-row">
-              <TouchableOpacity
-                className="bg-primary/10 mr-2 rounded-full px-4 py-2"
-                onPress={clearSearch}
-              >
-                <Text className="text-primary">{t('weather.clearSearch')}</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                className="rounded-full bg-primary px-4 py-2"
-                onPress={handleAddLocation}
-              >
-                <Text className="text-white">{t('weather.addNewLocation')}</Text>
-              </TouchableOpacity>
+            <View className="bg-muted/30 items-center rounded-lg p-4">
+              <Icon name="magnify-minus-outline" size={24} color={colors.grey2} />
+              <Text className="mt-2 text-muted-foreground">
+                {t('weather.noLocationsMatch', { query: searchQuery })}
+              </Text>
+              <View className="mt-4 flex-row">
+                <TouchableOpacity
+                  className="bg-primary/10 mr-2 rounded-full px-4 py-2"
+                  onPress={clearSearch}
+                >
+                  <Text className="text-primary">{t('weather.clearSearch')}</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  className="rounded-full bg-primary px-4 py-2"
+                  onPress={handleAddLocation}
+                >
+                  <Text className="text-white">{t('weather.addNewLocation')}</Text>
+                </TouchableOpacity>
+              </View>
             </View>
+          </Animated.View>
+        )}
+
+        {isLoading ? (
+          <View className="flex-1 items-center justify-center py-12">
+            <ActivityIndicator size="large" color={colors.primary} />
+            <Text className="mt-4 text-muted-foreground">{t('weather.loadingWeatherData')}</Text>
           </View>
-        </Animated.View>
-      )}
+        ) : (
+          <ScrollView
+            // className="flex-1"
+            contentContainerStyle={{
+              paddingHorizontal: 16,
+              paddingTop: 8,
+              paddingBottom: insets.bottom + 16,
+              flexGrow: showEmptyState ? 1 : undefined,
+            }}
+            contentInsetAdjustmentBehavior="automatic"
+            refreshControl={
+              <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={refreshAllLocations}
+                tintColor={colors.primary}
+              />
+            }
+            keyboardShouldPersistTaps="handled"
+          >
+            {showLocationsList && (
+              <>
+                {showSearchResults && (
+                  <View className="mb-2">
+                    <Text className="text-xs uppercase text-muted-foreground">
+                      {filteredLocations.length}{' '}
+                      {filteredLocations.length === 1 ? t('weather.result') : t('weather.results')}
+                    </Text>
+                  </View>
+                )}
 
-      {isLoading ? (
-        <View className="flex-1 items-center justify-center py-12">
-          <ActivityIndicator size="large" color={colors.primary} />
-          <Text className="mt-4 text-muted-foreground">{t('weather.loadingWeatherData')}</Text>
-        </View>
-      ) : (
-        <ScrollView
-          className="flex-1"
-          contentContainerStyle={{
-            paddingHorizontal: 16,
-            paddingTop: 8,
-            paddingBottom: insets.bottom + 16,
-            flexGrow: showEmptyState ? 1 : undefined,
-          }}
-          contentInsetAdjustmentBehavior="automatic"
-          refreshControl={
-            <RefreshControl
-              refreshing={isRefreshing}
-              onRefresh={refreshAllLocations}
-              tintColor={colors.primary}
-            />
-          }
-          keyboardShouldPersistTaps="handled"
-        >
-          {showLocationsList && (
-            <>
-              {showSearchResults && (
                 <View className="mb-2">
-                  <Text className="text-xs uppercase text-muted-foreground">
-                    {filteredLocations.length}{' '}
-                    {filteredLocations.length === 1 ? t('weather.result') : t('weather.results')}
+                  <Text className="text-xs text-muted-foreground">
+                    {t('weather.longPressForOptions')}
                   </Text>
                 </View>
-              )}
 
-              <View className="mb-2">
-                <Text className="text-xs text-muted-foreground">
-                  {t('weather.longPressForOptions')}
+                {filteredLocations.map((location) => (
+                  <LocationCard
+                    key={location.id}
+                    location={location}
+                    onPress={() => handleLocationPress(location.id)}
+                    onSetActive={() => handleSetActive(location.id)}
+                    onRemove={() => handleRemoveLocation(location.id)}
+                  />
+                ))}
+              </>
+            )}
+
+            {showEmptyState && (
+              <View className="flex-1 items-center mt-16">
+                <Icon name="map-marker-radius-outline" size={64} color={colors.grey2} />
+                <Text className="mt-4 text-center text-lg font-medium">
+                  {t('weather.noSavedLocations')}
+                </Text>
+                <Text className="mb-4 mt-2 px-8 text-center text-sm text-muted-foreground">
+                  {t('weather.noSavedLocationsDesc')}
                 </Text>
+                <Button variant="primary" onPress={handleAddLocation}>
+                  <Text className="font-medium text-white">{t('weather.addLocation')}</Text>
+                </Button>
               </View>
-
-              {filteredLocations.map((location) => (
-                <LocationCard
-                  key={location.id}
-                  location={location}
-                  onPress={() => handleLocationPress(location.id)}
-                  onSetActive={() => handleSetActive(location.id)}
-                  onRemove={() => handleRemoveLocation(location.id)}
-                />
-              ))}
-            </>
-          )}
-
-          {showEmptyState && (
-            <View className="flex-1 items-center mt-16">
-              <Icon name="map-marker-radius-outline" size={64} color={colors.grey2} />
-              <Text className="mt-4 text-center text-lg font-medium">
-                {t('weather.noSavedLocations')}
-              </Text>
-              <Text className="mb-4 mt-2 px-8 text-center text-sm text-muted-foreground">
-                {t('weather.noSavedLocationsDesc')}
-              </Text>
-              <Button variant="primary" onPress={handleAddLocation}>
-                <Text className="font-medium text-white">{t('weather.addLocation')}</Text>
-              </Button>
-            </View>
-          )}
-        </ScrollView>
-      )}
+            )}
+          </ScrollView>
+        )}
+      </LargeTitleHeaderOverlapFixIOS>
     </SafeAreaView>
   );
 }