[iOS] Large title does not collapse if scroll view is displayed after a delay

[erudel]

Description

The navigation bar with a large title does not collapse if a scroll view is rendered after a delay, e.g. if data is loaded from the network and another view is shown as a placeholder. Additionally, the refresh control remains inside the scroll view, instead of being repositioned inside the navigation bar.

After rotating the device to landscape and going back to portrait, the large title collapses as expected and the refresh control is inside the navigation bar.

I suspect that an additional layout pass should be triggered in the navigation bar when the scroll view is mounted, though I am not sure which component should be in charge of that. In fact, I am not entirely sure whether this issue belongs here, in react-navigation or react-native. If you believe it should be resolved somewhere else, I am happy to open a new issue in the appropriate repo.

Steps to reproduce

1. Create a stack navigator with a single Home screen and enable headerLargeTitle in the options prop
2. Define the Home screen as a bottom navigator with a single screen (and hide the header in the props)
3. Define the screen as a component that shows a placeholder, and after a couple of seconds displays a scroll view with a refresh control

https://github.com/user-attachments/assets/aff207d2-7f28-49d4-8133-915a889598a2

Snack or a link to a repository

https://snack.expo.dev/@erudel/0a1940

Screens version

4.4.0

React Native version

0.77

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kkafar]

Hey, my first impression is that this is just native behaviour & we won't be able to do much here.

We'll verify whether this is reproducible on purely native app or not.

[maciekstosio]

Hi @erudel, I don't know what's going on yet, but it seems that you can workaround the problem by wrapping the loading view with ScrollView

[erudel]

Thank you for the replies @kkafar and @maciekstosio . Our actual setup is a bit more complicated than the sample as we're using Suspense to wrap the list, but I'm going to see if the workaround you suggested can be applied there as well.

I also just stumbled upon the screenLayout/layout documentation from v7 which seems designated to solve exactly this problem.

[erudel]

Hi @erudel, I don't know what's going on yet, but it seems that you can workaround the problem by wrapping the loading view with ScrollView

I tested this workaround: the refresh control goes inside the navigation bar and the large title expands and collapses as expected. The only side effect I noticed is that when the list loads, the title is initially collapsed. If you scroll down it expands to a large title.