react-navigation / react-navigation/react-navigation
"formSheet" presented screens account/not account for bottom safe area inset
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
Screens presented with "formSheet" presentation have inconsistent behavior between Android and iOS.
In iOS the content is rendered above the safe area inset, while in Android it is not, as it can be seen in the image below.
Here's a minimal reproducible example (branch react-navigation-form-sheet-bug https://github.com/santitopo/expo-router-stack-header-bug/tree/react-navigation-form-sheet-bug)
Expected behavior
I think the most flexible behavior would be for both platforms to behave like they do in Android, where no inset is considered. In the hypothetical event that we need some content to render below the bottom system bar in iOS that wouldn't be possible within a screen presented with this technique.
Reproduction
https://github.com/santitopo/expo-router-stack-header-bug/tree/react-navigation-form-sheet-bug
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-drawer-layout
- react-native-tab-view
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | "7.1.21" |
| @react-navigation/native-stack | "7.8.0" |
| react-native | "0.81.5" |
| expo | "~54.0.25", |
| node | 22.15.1 |
| npm or yarn | 10.9.2 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the @react-navigation/native-stack package and reproduce the behavior using the linked react-navigation-form-sheet-bug branch on both Android and iOS. Compare how formSheet screens account for the bottom safe area inset, then verify that the chosen behavior is consistent across both platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100