react-navigation / react-navigation/react-navigation
native-stack height does not update on iOS.
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
When using @react-navigation/native-stack, if there is some view that forces Stack navigator to be shorter, and then that view is removed, stack navigator on iOS does not update to occupy the free space. Works fine on Android and on web but does not work on iOS devices. Please see the attached expo snack for a simple demo.
Also, it works just fine on all platforms when using @react-navigation/stack but I was wondering if there is anything that can be done to fix this behaviour while using @react-navigation/native-stack.
Expected behavior
Expect the Stack.Navigator to occupy all the available space if the view that was occupying part of the height before is removed from view.
Reproduction
https://snack.expo.dev/@saikedo/d7d3b0
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- [] I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | 6.0.11 |
| @react-navigation/stack | 6.2.2 |
| @react-navigation/native-stack | 6.7.0 |
| react-native-safe-area-context | 4.3.1 |
| react-native-screens | 3.15.0 |
| react-native | 0.68.2 |
| node | 18.6.0 |
| npm or yarn | 8.13.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 by running the linked Expo Snack on an iOS device and compare the layout behavior of @react-navigation/native-stack with @react-navigation/stack. Trace the native-stack layout path and the react-native-screens integration to identify where height changes are handled. Done means the native stack expands after the constraining view is removed, while Android and web behavior remains unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100