wrapping a scrollview in layout loses intrinsic children height

[joprice]

I'm using the recently added layout feature on a stack navigator, and trying to wrap the children prop provided to the layout in a ScrollView, with elements appearing before and after it. The child screen has flex: 1 and renders correctly on its own, but collapses to zero height when accessed in the layout. If I inline the screen's component directly in the layout, it renders correctly. If I wrap the children in another view and set an arbitrary fixed height, it renders as well. Is there a way to maintain the intrinsic height of the child screen in such a situation?

This is probably something I'm misunderstanding about flex and scrollviews, but I've only encountered it in this situation, where a view is wrapped in the screen components and so I was thinking it has something to do with some container styles that's added by the layout functionality.

[satya164]

That's how ScrollView works, it needs the children to occupy the height it needs so it can scroll. flex: 1 basically says fill the available space - not take as much space as you need to, so they are not compatible with each other.

Wrapping the core navigators in ScrollView is not supported (though you could write your own navigator that doesn't use flex: 1). If your goal is to wrap each screen's content in ScrollView, then use the layout prop on Screen component or screenLayout prop on the Navigator.

[joprice]

I'm using layout on the navigator currently for persistent animated elements in the header and footer. I think I tried other approaches and they ended up re-rendering components, since they are recreated when the new screen renders. Perhaps I could try using it at the screen level with a portal to allow them to be persistent.

[joprice]

I ended up working around it by changing the layout a bit for now, but might return to it later on for a different use case. Thanks for the clarifications.