Inconsistent auto-resizing when changing TrueSheet content height

[SickanK]

Description The TrueSheet component doesn't consistently auto-resize when changing its internal content height and immediately presenting it. The sheet sometimes fails to adjust to the correct height when switching between different content heights.

Steps to Reproduce

1. Create a TrueSheet component with auto-resizing enabled
2. Inside the sheet, implement content that can be in three states:
   • State A: Render a View with height 0pt (default state when sheet is closed)
   • State B: Render a View with height 200pt
   • State C: Render a View with height 100pt
3. Start with the sheet closed (State A)
4. Switch to State B or C
5. Immediately present the sheet after changing the state
6. Close the sheet (returning to State A)
7. Switch to either State B or C
8. Immediately present the sheet again
9. Observe that the sheet often fails to resize to the correct height of the new content

Reproduction Repository A minimal reproduction of this issue can be found at: https://github.com/SickanK/react-native-true-sheet-resize

Environment

• react-native-true-sheet version: 0.12.4
• React Native version: 0.74.3
• Platform: Android

Additional Notes

• The TrueSheet in the reproduction is configured with sizes=['auto', 'large']
• The expected behavior is for the sheet to correctly auto-resize to the new content height when presented

Please let me know if there is a work-around to this. Another solution is to be able to manually run a resize update method. It would allow for using react-native-reanimated for updating the internal content height on the ui thread.

[lodev09]

I was able to replicate this issue.. It's a race condition.. Not really much I can do however :/

The issue is that the sheet presented with the initial 0 height. But when the content size changed, the sheet didn't finished presenting yet so it didn't update the content.

I will leave it to the developer to handle this case. You can either:

1. Make sure the content is already up-to-date before you present the sheet (via .present()).
2. Update the content after presenting. Use onPresent event. The sheet will automatically resize gracefully.

Thanks for testing it though!

[lodev09]

Just a thought... if your content changes sizes dynamically everytime, try to avoid auto size and just use ['medium', 'large'].

When it comes to auto resizing, the sheet needs the content height "before" it presents so there's a lot of work there to get the correct size.

[SickanK]

How hard would it be to add support for dynamically changing the sizes array? So e.g. for state A I'd set sizes to ["30%"] and for state B I'd change it to ["60%"]. That'd probably be optimal for my use case as I need precise height which I can calculate beforehand.

[lodev09]

You can do that... the flow is similar though, the sheet has to be hidden or shown first before you do anything on the sizes

[SickanK]

Thanks for the response!

Unfortunately, I've encountered difficulties using the onPresent method for resizing the sheet as suggested. Neither medium/large options nor using auto and updating the content have worked for me. I've updated the reproduction repository to reflect my current implementation. I might be missing something obvious here, but I'd really appreciate if you could take a quick look when you get a chance.