Incorrect form sheet sizing during drag

[nikita-leonov]

Description

The form sheet while being dragged has a glitchy animation as it does not size itself properly to the bottom of the screen.

Steps to reproduce

1. Run the app from the provided link
2. Press Show Form Sheet
3. Drag the Form Sheet up fast, notice the sizing at the bottom is glitchy.

Video of the issue:
https://github.com/user-attachments/assets/60052cd9-5448-492b-a2e5-47864a308b54

Snack or a link to a repository

https://github.com/nikita-leonov/react-native-screens-form-sheet-bug

Screens version

3.34.0

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15 Pro

Acknowledgements

Yes

[kkafar]

Hey @nikita-leonov, thanks for reporting this issue.

I believe it is already solved with #2045.

You can try these changes out with latest react-native-screens version 4.0.0-beta.13.

If this is not the case let us know here, I'll reopen.

[nikita-leonov]

@kkafar what would be the right way to test react-native-screens given the project depends on navigation, native stacks, etc? As of now I just forced resolution through yarn to the latest beta. I could still reproduce this issue with blinking despite using beta 13. I updated the example project with beta 13 too.

[kkafar]

@nikita-leonov you need latest rc of react-navigation@v7 and latest beta of screens.

You will most likely experience sheets content being truncated (but not flickering) - you can workaround that with unstable_screenStyle: { backgroundColor: <color of your's sheet contents> }

[kkafar]

AFAIK react navigation team wants to port changes from react-native-screens@v4 to react-navigation@v6, however this won't happen before we both release stable versions 4 and 7 respectively.

[nikita-leonov]

Thanks for clarifying. 🙏 For the functionality I have in hand, content truncated and flickering would be equal severity issues as we have a component at the bottom of a sheet. Is there a ticket to follow regarding the truncation you mentioned above?

[kkafar]

@nikita-leonov we have this issue tracked on our internal board. If you want to do some kind of a footer - it might be hard to achieve in JS for some more time. Short story: flickering you described was caused by the fact that React's layout is asynchronous. When user drags the sheet up, the frame of sheet changes rapidly. We send this information from UI thread to JS (React state), React asynchronously recomputes the layout and mounts freshly computed frames on HostTree (UI thread). However the "freshly computed frames" are at this point already outdated, and too short, because while React was computing the layout the sheet was being continuously dragged up - thus flickering.

To get rid of this behaviour we disabled the React's layout of sheet contents when height of a component changes - yeah this is bad, but how do we do this better? Therefore it might be hard to implement any kind of "footer component" for the sheet. However, we do recognise that this is popular pattern thus unstable_sheetFooter has been introduced as a mean to workaround this issue. Note please, that at moment of writing this answer, unstable_sheetFooter is supported only on Android and not thoroughly tested. We plan on adding support for iOS too in upcoming weeks (this is actively in progress).

The silver bullet for the situation might be the possibility of synchronous React Native's layout that should be possible with new architecture, however this has not been researched yet.