[iOS] React Navigation | Native Bottom Tabs | Scroll view blank area issue during rendering

Description

When I try to use React Navigation's new native bottom tabs on iOS, an empty area appears above the scroll view. However, when I scroll, this empty area disappears. It does not remain there permanently.

When using it on Android or with the custom implementation option, this issue does not occur.
React Navigation maintainers asked me to open an issue here because this problem was caused by react-native-screens. https://github.com/react-navigation/react-navigation/issues/12946

https://github.com/user-attachments/assets/b0896b6b-d921-4362-8782-70afa5727650

Steps to reproduce

1. Create a React Native CLI application
2. Install react navigation 8 and react navigation native bottom tabs
3. Create a Native bottom tab navigator
4. Add a screen with a scroll view as its main container to the bottom tab navigator

Snack or a link to a repository

https://github.com/cetfu/ReactNavigationReproducerScrollView/

Screens version

4.20.0

React Native version

0.83.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

Start by running the linked ReactNavigationReproducerScrollView repository with React Native 0.83.1, react-native-screens 4.20.0, Fabric, and the native bottom tab navigator on an iOS simulator. Reproduce the blank area above the ScrollView, then verify that the area no longer appears during rendering while preserving the Android and custom implementation behavior.