🎉 True Sheet v3.0

[lodev09]

Hey everyone! 👋 I'm thrilled to share that React Native True Sheet v3.0 is now in beta and ready for testing! This is a huge milestone—v3.0 is completely rebuilt on React Native's New Architecture (Fabric).

I'd love your help in testing it out before release! You can try it now with yarn add @lodev09/react-native-true-sheet@beta. If you run into any issues or have feedback, drop a note on GitHub Issues.

Thanks you! 🙏

[marijang]

What happend with expo router bottom sheet modal? I see that they put it out in latest version. But this is great news that you decide to go with 3.0

[lodev09]

I think the problem is with react-native-screens to tied to react-navigation architecture. It was a bit hacky on expo-router's end (I was playing around with it before). They might push through with expo-ui bottom sheet instead.

[toadums]

Stoked to have truesheet back, sounds better than ever too! I was sad when you announced you'd stop supporting the lib and even more sad when expo pulled back on the declarative sheet

I switched from truesheet to rn-screens form sheet (via expo router) and the DX is awkward with little UX issues. Looking forward to trying v3 this week

[efstathiosntonas]

@lodev09 hi,

congrats on the v3!!

Couple questions:

1. Can you consider adding payload to the sheet where we can pass params?
2. Can you consider adding internal routing so we can chain multiple contents in a single sheet so we don't have to "tap something in the sheet -> close sheet -> open new sheet with more options specific to the button we pressed on step 1". Imagine this as a post options -> report post -> navigate to new route -> report reason a, report reason b etc. no need to close sheet and then open a new sheet with the reasons.

This is a routing example: https://rnas.vercel.app/guides/sheetrouter of react-native-actions-sheet that works perfectly.
This is a payload example: https://rnas.vercel.app/reference/usesheetpayload and https://rnas.vercel.app/guides/passingdata for the payload.

I truly believe that with these 2 additions this module will be a super duper complete solution!! 🥳

[lodev09]

TrueSheet is native component and this adds more complications to JS side, which I think is unnecessary. I think would be best is a separate "wrapper" package that manipulates data and use sheets as its view.

[efstathiosntonas]

I'll consider creating such wrapper, I guess you mean something like https://github.com/AppAndFlow/react-navigation-bottom-sheet that wraps gorhom's sheet, correct?

[marijang]

Can u add header component?
Same as footer.

I plan use your modal for select list. Much better then use stack screens:)

[lodev09]

Yes, header is natively supported:
https://sheet.lodev09.com/guides/header

[JerryBels]

FYI, installation instructions is currently a bit misleading - installing with npx expo install @lodev09/react-native-true-sheet gets 2.0.6 but the documentation is already upgraded to use V3, which means detents gets flagged by TS as a non-existing prop (rightfully).

Would you consider V3 to be prod-ready?

[lodev09]

almost ready. I'm still refining it a bit more :)

[lodev09]

Released! https://sheet.lodev09.com/blog/release-3-0

[lodev09]

Released! 🎉
https://sheet.lodev09.com/blog/release-3-0

[JerryBels]

Congrats! I migrated my whole app to it already, and have just one small issue to report. I have a popover component using a portal host (adapted from https://reactnativereusables.com/docs/components/popover) - can't get it to show on top of the Sheet.

[lodev09]

I think what's happening is the popover renders behind the sheet. If that popover has some "portal", put it inside the sheet so it will render in the content

[JerryBels]

I can confirm that this works. If anyone needs it, adding a portalhost insode the sheet and targeting that one allows the Dialogs, Popovers etc... To appear above the sheet as expected.

[jymaa]

Love the lib! I'm running into a issue. When a Sheet is displayed with the prop dismissible={false}. I can't use the back button on android. Which is a bit frustrating for the user. Is this the intended behavior? Or this is an issue?

[lodev09]

Yeah I think it's default behavior on android BottomSheetDialog. What you can do is capture backPress in js then manually dismiss

[jymaa]

Yeah, that's the first thing I've try but the BackHandler hardwareBackPress event is silent when the sheet is open and dismissible={false}.

I've try to dig a bit on the issue. It seems to be cause by TrueSheetViewController.kt and setCancelable which cause the back event to be silent.

I've added a PR, if you want to fix this #268