[iOS] FormSheet on tablet - content cropped

[delphinebugner]

Description

This image illustrates the problem on iPad with screen presentation : formSheet.
The content seems to be larger than the modal itself. The Text is cropped as a result.

Issue is fleaky, sometimes content fit. I'd say I have it 80% of the time.

Steps to reproduce

1. Open reproduction app on an iPad with all orientations unlocked.
2. Clic on "Open Modal"
3. The bug should be present. If not, play with screen rotation of the iPad and re-open the modal.

Snack or a link to a repository

https://github.com/delphinebugner/repro-52

Screens version

4.9.2 (also reproduced in 4.8.0)

React Native version

0.77.1 (also reproduced in 0.76)

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kkafar]

Thanks for the report! We'll look into it.

[delphinebugner]

note: it also occurs with presentation: modal!

[delphinebugner]

After having the issue, I tried to replace my formSheet screens by fullScreenModal.

Turns out when I rotate the screen on tablet, the fullScreenModal is dismissed 😅
And I can't re-open it after; because React Navigation believes it still opened.
But I don't reproduce it on the repro app, only on mine. Mentioning it to explain the title change action, but it's probably a separate issue / something else in my code.

[delphinebugner]

Last update 🙂

• I updated RNScreens to 4.10.0 and still have the issue
• With formSheet and modal presentations

• I confirm the rotate screen was an issue in my code, unrelated with RNScreens!

[kkafar]

Yeah, nothing changed on 4.10.0 here. I haven't looked into the issue yet.

[kkafar]

Hey, I want to update you, that together with @maciekstosio we've found the culprit today and this is bad news: React Native loses shadow state progression in certain scenarios & this is an issue known in RN core for a long time now (at least from intel I've gathered).

I don't have good workaround in mind yet, therefore this is blocked until we come up with something reliable.

• facebook/react-native@543c5a0
• https://github.com/facebook/react-native/blame/403d609d837881078b34529678ddca39bc363b74/packages/react-native/ReactCommon/react/renderer/core/ShadowNode.cpp#L113-L115
• https://github.com/facebook/react-native/blob/1bb929baed00952f76ff12db03032a3a79f1700d/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp#L213-L215
• https://github.com/facebook/react-native/blob/1bb929baed00952f76ff12db03032a3a79f1700d/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp#L522-L527

[maciekstosio]

I'm putting this on hold, as we don't see how it could be fixed on our side. The problem is described well in this issue, and can be tracked there.

[delphinebugner]

Thanks for the work and the visibility, I have subscribed to the main issue!

For now, I just replaced my modals by card screens on Tablet; it's less beautiful but works perfectly well, so the issue is non-blocking on my side 🙂

[timmaier]

I'm having the exact same issue I use blueskys dialog implementation on iPad mini 6th generation running iOS 18.1. This uses a native modal under the hood.

I've monkey patched around it for now by setting a explicit width style smaller than the modal width. This at least makes the modals content usable it doesn't look pretty though.

Here's demo

ScreenRecording_04-05-2025.19-38-26_1.MP4

[mozzius]

Haha - if you're using Bluesky's sheet implementation on iPadOS it does that, yeah, it assumes the content is full width. I believe what react-native-true-sheet does to handle that is measure the frame size in the native view controller, and pass that back up to the JS side https://github.com/lodev09/react-native-true-sheet/blob/main/ios/TrueSheetViewController.swift#L158