software-mansion
StackNavigator as formSheet content has size of zero (iOS)
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
Same here flex: 1 just won't work, I ended up using fixed height, but definitely not happy with that solution.
Are you using formSheet for its ability to specify detents or is modal presentation good replacement enough?
The formSheet presentation has changed with 4.0 (see here) and it is a bit impaired (but has other possibilities) at the moment. I'll try to handle this asap
@kkafar Yes, the formSheet allows for better customization than the modal (for e.g. specifying detents, showing the grabber, corner radius, etc.).
For my two use cases it is okay to fallback to 'modal'. I'm interested in the solution tho. But I'll keep a view on this ticket and re-read the release notes etc. Thanks for the response 🙌🏾
Thank you @kkafar for your effort and communication. We really appreciate it!
Any news? I'm using modal as fallback right now, but here the modal strangely "deforms" while sliding up in iOS, messing up all the content, until it's settled. never had that with formSheet.
This issue still continues. Btw this is only happens when formSheet is initial screen. There is no problem in layout when you navigate from card screen to formSheet screen if they are in same stack.
This seems to be working for me on iOS but I am experience the issue with Android simulators.
Giving height: '100%' to contentStyle in your parent stack screen seems to work. I called my collection stack from the bottom tab stack. It works even if they are not in the same stack, you can call it from another stack, and it will still bring screen as formSheet. I tried giving flex: 1, but it did not work, it was still a blank screen. Just give it height: '100%'.
<Stack.Screen
name="collection"
options={{
presentation: "formSheet",
contentStyle:{
height: '100%',
},
sheetCornerRadius: 20,
sheetGrabberVisible: true,
}}
/>
Giving
height: '100%'to contentStyle in your parent stack screen seems to work. I called my collection stack from the bottom tab stack. It works even if they are not in the same stack, you can call it from another stack, and it will still bring screen as formSheet. I tried giving flex: 1, but it did not work, it was still a blank screen. Just give it height: '100%'.<Stack.Screen name="collection" options={{ presentation: "formSheet", contentStyle:{ height: '100%', }, sheetCornerRadius: 20, sheetGrabberVisible: true, }} />
This is a hacky fix at best, if you add a background color the sheet you'll see the animations are very laggy, you can just get away with it if your background doesn't change. If you have content fixed to the bottom it won't look good.
App crashing for Android when i add contentStyle:{height:'100%'}
<Stack.Screen
name="quickaccess"
options={{
headerShown: false,
presentation: 'formSheet',
sheetGrabberVisible: true,
sheetCornerRadius: 20,
contentStyle: {
height: '100%',
},
sheetAllowedDetents: 'fitToContents',
}}
/>
EDIT: fixed my issue by updating react-native-screens from 4.4.0 to 4.7.0
Giving
height: '100%'to contentStyle in your parent stack screen seems to work. I called my collection stack from the bottom tab stack. It works even if they are not in the same stack, you can call it from another stack, and it will still bring screen as formSheet. I tried giving flex: 1, but it did not work, it was still a blank screen. Just give it height: '100%'.<Stack.Screen name="collection" options={{ presentation: "formSheet", contentStyle:{ height: '100%', }, sheetCornerRadius: 20, sheetGrabberVisible: true, }} />
This fix should be built in
Hi, just reporting in that this still seems to be an issue on 4.11.1 and setting a contentStyle height of 100% does not play nicely with fitToContents when trying to implement small, navigatable popover sheets
@kkafar Do you think it would be possible to take another look at this? I am happt to help reproduce if needed.
I believe I have found the issue....
After a stupid amount of time debugging this issue in our project. I found out if you remove the background colour from the main container view in the form-sheets page. It just works...
@sumersao @galgord
I believe I have found the issue....
After a stupid amount of time debugging this issue in our project. I found out if you remove the background colour from the main container view in the form-sheets page. It just works...
I cannot confirm this. Neither my stacks nor their wrappers have a background color.
Setting a parent view with just flex 1 and nothing else solved this. It was odd but it was the background colour causing the issue for me
Nope. Ally my parent views of the modal content are <View {...props} style={{flex:1}} />
Ah never mind, I hope you find the cause. The only other thing I'm doing is setting the background colour in the contentStyle for the sheet.
Thought I would share in case it solves it for y'all
@kkafar this is blocking some nice, contextual experiences. hoping you can take another look. happy to pair. thank you.
