fix(iOS, FormSheet): Allow handling dynamic content size in FormSheet since 0.82 with synchronous updates enabled

[t0maboro]

Description

Follow-up to 4605692 where I introduced a regression causing content flickering. The regression occurs when the content is allowed to dynamically adjust to the screen size (e.g., using flex: 1 in styles). The issue is caused by the asynchronous nature of the ShadowNode state update for the screen, which leads to its size being updated with a delay relative to the detent change transition.

It's important to note that this issue does not occur when the update is sent synchronously. Therefore, I'd like to propose allowing flex in screen styles when a set of conditions are met:

• The formSheet does not have fitToContents defined in sheetDetents.
• React Native version is at least 0.82 (the one which introduced synchronous state updates).
• The feature flag featureFlags.experiment.synchronousScreenUpdatesEnabled in react-native-screens is enabled (for now, the default value remains disabled).

Fixes #2522

Changes

• Added conditional style with flex: 1 for FormSheet

Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

Before

Screen.Recording.2025-12-05.at.11.11.53.mov

After

Screen.Recording.2025-12-05.at.11.13.45.mov

Test code and steps to reproduce

Test2522 - covering 4 cases: {flex, fixed height} x {detents from 0.0 to 1.0, fitToContents}

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[kkafar]

This looks good. I'll check the runtime soon & will be back here.

Thanks!

[kligarski]

Looks good.

By the way, shouldn't synchronous state updates feature flags be enabled in our example app by default?

[t0maboro]

Looks good.

By the way, shouldn't synchronous state updates feature flags be enabled in our example app by default?

Imo we should have in the example app a default value that matches the default value of the flag we export. I'd prefer to have this option disabled in the app to reproduce issues with the same setup that users have. Having the same value for the flag will cover most cases. For specific examples, we'll see whether the flag is set in the code snippet.

[kligarski]

For specific examples, we'll see whether the flag is set in the code snippet.

But in Test2522 it is not changed - the intention is that we set it manually after seeing the info in the example?

[t0maboro]

But in Test2522 it is not changed - the intention is that we set it manually after seeing the info in the example?

Yes, that was the intention, but at 2nd thought I don't have any good reason against overriding the flag in this specific example, I'll add a commit for that soon

[t0maboro]

cc @kligarski 4620062

[kligarski]

I'm okay with both solutions - just wanted to clarify it.

[kkafar]

There is a weird effect with flex: 1 & fitToContents where the sheet when closed with gesture lags for a moment, before closing. Please see this video:

Screen.Recording.2025-12-08.at.12.34.30.mov

I have no idea whether it is related to these changes or not. But we need to investigate it.

The close animation, when the dimming view is clicked, works perfectly fine. Only gesture dismissal has this problem.

[t0maboro]

There is a weird effect with flex: 1 & fitToContents where the sheet when closed with gesture lags for a moment, before closing. Please see this video:

Screen.Recording.2025-12-08.at.12.34.30.mov
I have no idea whether it is related to these changes or not. But we need to investigate it.

The close animation, when the dimming view is clicked, works perfectly fine. Only gesture dismissal has this problem.

I can reproduce the same problem on main. Interestingly, it depends on the content size
with

      <Text style={styles.text}>Start</Text>
      <Spacer space={100} />
      <Text style={styles.text}>End</Text>

the issue doesn't occur, video:

Screen.Recording.2025-12-08.at.12.54.42.mov

with

      <Text style={styles.text}>Start</Text>
      <Spacer space={10} />
      <Text style={styles.text}>End</Text>

the issue occurs, video:

Screen.Recording.2025-12-08.at.12.54.16.mov

[kkafar]

This one is currently on hold, as it'd "stabilize" behaviour on iOS that is vastly different from what we observe on Android. Currently we decided to delve into further research on how to mitigate platform discrepancies.

[t0maboro]

This one is currently on hold, as it'd "stabilize" behaviour on iOS that is vastly different from what we observe on Android. Currently we decided to delve into further research on how to mitigate platform discrepancies.

I created a follow-up PR with the guidance that should cover all possible cases #3464 . I added some explanation, why we should consider proceeding with this PR and how we could align the approach between platforms when specific conditions would be met

[t0maboro]

There is a weird effect with flex: 1 & fitToContents where the sheet when closed with gesture lags for a moment, before closing. Please see this video:

Screen.Recording.2025-12-08.at.12.34.30.mov
I have no idea whether it is related to these changes or not. But we need to investigate it.

The close animation, when the dimming view is clicked, works perfectly fine. Only gesture dismissal has this problem.

native bug, I put repro here: https://github.com/software-mansion/react-native-screens-labs/issues/705#issuecomment-3631346632

bug.mov

[kkafar]

Thanks for verifying the bug I reported.