FormSheet fitToContents doesn't work on iOS - Opens full screen #2665
Assignees
Labels
Platform: Android
This issue is specific to Android
Platform: iOS
This issue is specific to iOS
Repro provided
A reproduction with a snack or repo is provided
Comments
github-actions
bot
added
Repro provided
|
I kinda confirm the issue 😅 If you pass If there is header present there indeed will be a bug. I should be able to fix this today. Thanks for the report! |
|
That does work! 🎉 Thanks for the quick response! |
|
Glad to hear. But fixing the issue completely won't be so straightforward as I've thought initially. |
2 tasks
kkafar
added a commit
that referenced
this issue
Feb 5, 2025
…ts` (#2670) ## Description Closes #2665 In case when we present `formSheet` with header, the content is nested in another stack -> content wrapper is *not* mounted directly under presented screen --> we need to forward information of content dimensions from nested content wrapper to the screen with `formSheet` presentation. Due to order of updates on Fabric (bottom up assembling of the host tree) first moment when we can look for *ancestor* screen with `formSheet` presentation is when we move to window... And that is what I did. Now `RNSScreenContentWrapper` looks for appropriate screen to attach to in `willMoveToWindow`. There was another problem: any stack along the way impacts desired height of the sheet -> therefore while looking for appropriate screen the wrapper sums up heights of encountered navigation bars and gives that information to the screen. > [!important] using `formSheet` with header enabled could lead to flicker (we won't be able to solve it for now, until we are able to trigger react commit & layout synchronously). Maybe we should describe this in types? ## Changes ☝🏻 ## Test code and steps to reproduce `TestFormSheet` + set `headerShown: true` on `formSheet` screen. ## Checklist - [ ] Included code example that can be used to test this change - [ ] Ensured that CI passes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Very excited to see formSheets!
When using formSheet screens and applying the
fitToContentsoptions onsheetAllowedDetentsit only ever opens a full modal screen on iOS, similar to if I was to applysheetAllowedDetents: [1]. Android appears to work as expected here.I see issue #2521 mentions the example app and the fix you applied is to remove the
flex: 1style from the screen but that doesn't seem to help.Also, something that would be very helpful would be the option to apply
[-1, 0.5, 1]tosheetAllowedDetentsto first use the content height, then allow it to expand to a full screen sheet. I'll raise a feature request separately for that though.Steps to reproduce
sheetAllowedDetents: "fitToContents"to screen options3.1. Opens at the correct height
4.1. Opens as a full screen modal
See Stack link below for details
Snack or a link to a repository
https://snack.expo.dev/@eli-nathan/formsheet
Screens version
4.6.0
React Native version
0.77.0
Platforms
iOS, Android
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
iPhone 15
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: