Bottom Tab Navigator falls out of viewable area

[PatrickMilroy]

Current behavior

In my app, I have a custom header component that is conditionally rendered for certain screens eg. the header is not shown on the Login Screen, but is then shown on the "Home" screen. In my scenario, the "Home" Screen is part of my Bottom Tab navigator.

When booting the app from a cold start, after progressing past the "Login" Screen, where the Bottom Tab Navigator and Header is not shown, to the "Home" Screen which has the header, the Bottom Tab Navigator appears below the viewable area of the screen. However, if I either;

1. Send the app to the background and then bring it to the foreground
2. Navigate to a screen that is outside of the Tab Navigator (for example, a "Settings" screen which is accessed by a button in the top right of the view) The Bottom Tab Navigator appears in its correct location.

Additional noteworthy points:

• The larger the "Header" component is along the Y axis, the more obscured the Tab Navigator becomes
• if I add the "Home" Screen in my example to the array of screens to not render the header component, the Bottom Tab Navigator appears correctly even if I then navigate to another Tab that has the header rendered.
• This only started occuring after I upgraded my production app to React Native 0.73.6. (previously RN 0.70.8) I have confirmed this issue occurs on fresh sample App using 0.73.6 (see the reproduction repo)
• I have only observed this on iOS devices. I don't experience this issue on Android

Expected behavior

The Bottom Tab navigator to always appear within the viewable area of the device.

Reproduction

https://github.com/PatrickMilroy/rn-bottomTab-navigation-issue

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [X] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [X] @react-navigation/stack
• [X] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

• [x] I've removed the packages that I don't use

package	version
@react-navigation/native	"6.1.17",
@react-navigation/bottom-tabs	"^6.4.0",
@react-navigation/stack	"^6.3.29",
@react-navigation/native-stack	"^6.9.26",
react-native-safe-area-context	"^4.8.2",
react-native-screens	"^3.28.0",
react-native	"0.73.6"
node	"18"
npm or yarn	"yarn v1.22.19"

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/bottom-tabs (found: 6.4.0, latest: 6.5.20)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[PatrickMilroy]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

* `@react-navigation/bottom-tabs` (found: `6.4.0`, latest: `6.5.20`)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Issue persists with @react-navigation/bottom-tabs: 6.5.20