fix: iOS contentInsetAdjustmentBehavior for all LargeTitleHeader screens#2357
Merged
Conversation
…leHeader screens 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.
…tInsetAdjustmentBehavior
- 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
Contributor
|
Caution Review failedThe pull request is closed. Warning
|
| Cohort / File(s) | Summary |
|---|---|
App screens with SafeAreaView refactoring apps/expo/app/(app)/current-pack/[id].tsx, apps/expo/app/(app)/weight-analysis/[id].tsx |
Removed useSafeAreaInsets usage and conditional iOS padding; replaced with SafeAreaView edges={['bottom']} and contentInsetAdjustmentBehavior="automatic" on scrollable views. |
App screens adding SafeAreaView with bottom edge apps/expo/app/(app)/gear-inventory.tsx, apps/expo/app/(app)/pack-stats/[id].tsx, apps/expo/app/(app)/recent-packs.tsx, apps/expo/app/(app)/shared-packs.tsx, apps/expo/app/(app)/shopping-list.tsx, apps/expo/app/(app)/weather-alerts.tsx |
Wrapped root container in SafeAreaView with edges={['bottom']} and added contentInsetAdjustmentBehavior="automatic" to scrollable views. |
App screens with FlatList inset adjustment apps/expo/app/(app)/trail-conditions.tsx |
Removed useSafeAreaInsets; configured SafeAreaView edges={['bottom']} and FlatList contentInsetAdjustmentBehavior="automatic". |
Component dependency cleanup apps/expo/components/LargeTitleHeaderOverlapFixIOS.tsx |
Removed react-native-safe-area-context dependency by eliminating useSafeAreaInsets usage and conditional paddingTop logic. |
Feature screens adding contentInsetAdjustmentBehavior apps/expo/features/catalog/screens/CatalogItemsScreen.tsx, apps/expo/features/feed/screens/FeedScreen.tsx, apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx, apps/expo/features/wildlife/screens/WildlifeScreen.tsx |
Added contentInsetAdjustmentBehavior="automatic" to FlatList for automatic content inset management. |
Feature screens with broader SafeAreaView changes apps/expo/features/guides/screens/GuidesListScreen.tsx |
Added contentInsetAdjustmentBehavior="automatic" to FlatList managing safe-area inset adjustments for list header, refresh control, and footer. |
Pack feature screens with edges configuration apps/expo/features/packs/screens/PackDetailScreen.tsx, apps/expo/features/packs/screens/PackItemDetailScreen.tsx |
Updated SafeAreaView to restrict safe-area handling to bottom edge via edges={['bottom']}. |
PackListScreen wrapping refactor apps/expo/features/packs/screens/PackListScreen.tsx |
Wrapped root layout in SafeAreaView edges={['bottom']} to constrain safe-area handling while preserving LargeTitleHeaderOverlapFixIOS and FlatList rendering logic. |
TripListScreen safe-area refactor apps/expo/features/trips/screens/TripListScreen.tsx |
Replaced fragment wrapper with SafeAreaView edges={['bottom']} and added contentInsetAdjustmentBehavior="automatic" to FlatList. |
LocationsScreen comprehensive refactor apps/expo/features/weather/screens/LocationsScreen.tsx |
Removed platform-dependent iOS top padding and wrapped header content in LargeTitleHeaderOverlapFixIOS; configured SafeAreaView edges={['bottom']} and adjusted styling. |
ReportedContentScreen rendering refactor apps/expo/features/ai/screens/ReportedContentScreen.tsx |
Restructured control flow from outer conditional to single FlatList using ListHeaderComponent for filters and ListEmptyComponent for loading/error/empty states. |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~30 minutes
Possibly related PRs
- Development -> main #2190: Both PRs modify
apps/expo/features/packs/screens/PackListScreen.tsx, with this PR updating the rootSafeAreaViewwrapping and the related PR adjusting spacing details. - Release v2.0.15 #1979: Both PRs modify safe-area handling and related imports across overlapping Expo app screens including current-pack, gear-inventory, and weight-analysis.
Suggested reviewers
- Isthisanmol
Poem
🐰 Safe areas now bottom-aligned with cheer,
Insets adjust automatic, crystal clear,
Fragments become containers, layouts refined,
Platform checks removed, new patterns designed,
A hop toward consistency across the app! ✨
✨ Finishing Touches
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
fix/ios-inset-adjustments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
Collaborator
|
Reviewing... |
Collaborator
|
We already have a fix for iOS LargeTitleHeader overlap using SafeAreaView. Though I can see that this PR addressed some new screens with LargeTitleHeader that were missed. I’m looking at the result of the changes and also comparing with the previous SafeAreaView only fix in screens that had it for correctness. |
… / overlapping header in multiple screens
mikib0
approved these changes
Apr 28, 2026
Collaborator
mikib0
left a comment
mikib0
left a comment
There was a problem hiding this comment.
Added a commit with some corrections. Ltgm now.
6 tasks
andrew-bierman
pushed a commit
that referenced
this pull request
May 14, 2026
fix: iOS contentInsetAdjustmentBehavior for all LargeTitleHeader screens
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
contentInsetAdjustmentBehavior="automatic"added to all 20 screens usingLargeTitleHeaderso scroll content starts below the transparent native nav bar on iOS (was rendering behind it)current-pack,weight-analysis, andtrail-conditionshad existingSafeAreaView paddingTop: insets.top+ innerpaddingTop: insets.top + 22that conflicted with the automatic behavior; those are strippedPackItemDetailScreen—SafeAreaViewrestricted toedges={['bottom']}since the regular opaque stack header already offsets content correctlyTest plan
/item/[id]): no extra gap at top below nav barSummary by CodeRabbit
Release Notes
Bug Fixes
Refactor