Layout Degradation with True Sheet in React Navigation Stack on New Architecture

[timgcarlson]

Hey! My team has enjoyed working with True Sheet but unfortunately we encountered a blocking bug that is preventing us from enabling the New Architecture in our app with Expo 52. When using react-native-true-sheet in an Expo project with the New Architecture enabled and Expo Router (React Navigation), the layout and functionality of TrueSheet components degrade when navigating back and forth between screens pushed onto the navigation stack.

I created a basic reproduction app that shows this this issue happening: https://github.com/timgcarlson/true-sheet-new-arch

Steps to Reproduce

1. Clone and install the example app:

   git clone https://github.com/timgcarlson/true-sheet-new-arch.git  
   cd true-sheet-new-arch  
   npm install  
   npx expo run:ios

2. Push a view onto the stack by tapping the button on the main screen.
3. Observe that buttons are laid out as expected and TrueSheet components work properly.
4. Navigate back to the main screen.
5. Push the view back onto the stack by tapping the button again.

Expected Behavior

• Buttons should remain properly laid out on subsequent navigations.
• All TrueSheet components should remain tappable and functional.

Actual Behavior

• On subsequent navigations, the first button appears at the top of the screen and becomes non-functional.
• Repeating the repro steps results in the next button also breaking, one at a time.
• Commenting out the TrueSheet components in new-page.tsx (NewPageComponent) prevents the issue from occurring.
• Disabling the New Architecture ("newArchEnabled": false in app.json), deleting the iOS directory and rebuilding the app prevents the issue from occurring.

Let me know if you need additional information or if I can assist further with debugging.

Video of the issue

true-sheet-bug.mov

[ljukas]

This happens for me aswell which blocks any chance of upgrade to newArch for now. Will wait until this is fixed.

[lodev09]

I took a look at this and I'm lost. I couldn't figure out what's going on. 🤦‍♂️

I created PR #115 to add navigation example that demonstrates this issue and created issue at react-navigation. Hopefully they can shed more light on this one.

[wcastand]

same here, i was a bit lost as to what was causing the issue since it seemed to be random.
found out it was this lib. made an issue on react-native since i was lost if you want to check the video/img too just in case but guessing it won't add much info
facebook/react-native#48883

[lodev09]

Thanks @wcastand. Issues like this, specially in the native RN, is beyond me 🥹
Let's wait for a bit longer, hopefully someone from RN can take a look.

[believer]

We tested navigation instead of React Navigation and the issues persisted, which would indicate that the issue is not specifically with React Navigation.

We also did some testing using <Pressable> from react-native-gesture-handler, instead of the one from React Native, and it doesn't seem to break in styling.

If any of these could be any indication as to what is happening 😅

[lodev09]

@believer In the example I added on the repo, the layout issue is happening on the actual content of the sheet. But yeah, I agree, it has something to do in the native side of RN.

I'll move it there 😅

[Ahmedhamed77]

any solution so far ? I do enjoy this package and don't want to replace it ((

[FTCHD]

can confirm this is happening on RN 0.76.7 with expo router v4.

navigating back and forth between screens degrades the layout more on each turn.

more often than not issues start appearing only after opening a sheet for the first time.

[skaionedev]

Any updates or solutions ?