Description

After upgrading to react-navigation 7 and react-native-screens 4.2.0 my modal's content, a native stack navigator, isn't showing up any more. After some debugging I found out that it has a layout of zero width and zero height. Applying a wrapping <View /> with fixed width and height works, applying flex: 1 does not. However, a fixed height cannot be the solution for my flexible-height content. Using a normal view works fine and grows with its content, but not with the stack navigator.

This does only apply to presentation: 'formSheet' but not presentation: 'modal', despite the fact that at least on iOS (only tested on iOS) the resulting modal looks the same. presentation: 'modal' handles sizing of my stack navigator correctly.

Is presentation: 'formSheet' and presentation: 'modal' really the same UI element here? And how can I fix the layout/height of my content? It is definitely a change from 3.x to 4.x, as it worked on 3.x for a long time.

Steps to reproduce

Place a native stack navigator inside a modal of type 'formSheet'.

Snack or a link to a repository

https://snack.expo.dev/Pqu3Cikm2Pk84jev-qtF9

Screens version

4.2.0

React Native version

0.76.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15 (iOS 17.2)

Acknowledgements

Yes