Controlled usage issues

[deniz-blue]

Sorry, I couldn't find a better issue name.

Continuing from gorhom/react-native-portal#61 (comment) @arekkubaczkowski

Here's my Sheet and then an example usage of it - I'm originally a web developer and kinda adopted my approaches from how Mantine does it

Also, I thought useId gives a stable id per component mount? Sheet is always mounted (even when sheet not shown) so the id should be constant for the duration of it being mounted, as far as I am aware.

Thanks for looking into this with me!

[arekkubaczkowski]

Hey @deniz-blue, I want to step back from the code, because the real issue is not a bug in your Sheet. It is that this library is the wrong tool for what you are trying to do, and no amount of fixing will make it feel right.

react-native-bottom-sheet-stack is a manager for a stack of sheets. Its job is to own which sheets are open, layer them, and handle push/back navigation between them, like a sheet opening another sheet, with iOS-style scaling. It is built to be the owner of the open/close state.

What you actually want is the opposite: one sheet that you own, controlled by your own open boolean, rendered right there in your JSX, like Mantine’s . That is a completely valid pattern. But to get it, you are wrapping a whole stack manager and then fighting it to give that ownership back to you: useId, effects syncing your boolean into the library, and the desync you ran into.

So you are doing a lot of work to neutralize the main thing this library is designed for, while getting none of its real benefits. The stacking and navigation features simply do not apply to this case.

What you were originally reaching for is simpler and already correct: a portal. react-native-portal, from the thread you came from, or react-native-teleport, which is what this library uses under the hood, lets you write your in place, keep it in your React tree so context still works, and teleport it to the top. Your boolean remains the single source of truth. No ids, no syncing, no manager.

So my honest recommendation is: drop this library for this use case and use a portal with your own sheet. Reach for bottom-sheet-stack only if you later need an actual stack of sheets with push/back navigation. That is the problem it solves, and for a single controlled sheet it is overkill and awkward.

Happy to point you at a minimal portal setup for your Sheet if that would help. 🙏

[deniz-blue]

Thank you! What you say does make sense. I would really appreciate if I could find an example of gorhom's (or any other bottom sheet that works across all platforms) mixed with the react-native-teleport library.