[Bug]: Laggy and doesn't fully open with new architecture

[aldebout]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

I just switched from expo 50 / RN 0.74 / old architecture to expo 52 / RN 0.76 / new architecture. The library upgrade went without problems but when I switched to the new architecture, most bottom sheets are laggy or don't fully open the first time I mount them on iOS simulator (I haven't tested on a real device yet).

First video is with expo 52 and old architecture, second and third videos are with expo 52 and new architecture.
The event sheets are dynamically sized, and the location ones have fixed snap points.

I'm wondering if other people are experiencing similar issues? I've looked at a bunch of threads and some comments hint at similar problems with Fabric, but I haven't found one that fit exactly this case.

oldarch.mp4

newarch.mp4

newarchmenu.mp4

Reproduction steps

At this point I don't know how to properly repro, I just added newArchEnabled: true to app.config.ts, rebuilt and the issue appeared. I've tried switching again and the problem disappears on the old arch + rebuild.

I've also tried removing Sentry in case it was the problem but it does not seem to make a difference. Other potentially conflicting libraries: nativewind, tanstack query with useQuery hooks in the bottom sheets (wrapped through trpc).

I added a straight link to the snack template with this lib and RNR bumped to the latest version and expo switched to 52. It looks janky to me but honestly with snack it's impossible to tell.

Reproduction sample

https://snack.expo.dev/@alexdb/bottom-sheet---issue-reproduction-template

Relevant log output

No response

[blaemmle]

Hey I have the same issue.

[juan-vilas]

same issue here, it's laggy if using the new architecture

[garrettwesley]

Same issue here, laggy with expo v52 and new architecture.

[r3dm4n]

Same issue after upgrading to expo52 and the new architecture. it's very slow

[garrettwesley]

I was able to fix the lag by specifying a custom backdropComponent prop. I copied most of the default BottomSheetBackdrop besides some unnecessary code for my purposes, and specifically removed the flex: 1 line here which caused me a lot of lag. I instead use StyleSheet.absoluteFill in the containerStyle return array.

[dkahdwk]

same issue

[aldebout]

I was able to fix the lag by specifying a custom backdropComponent prop. I copied most of the default BottomSheetBackdrop besides some unnecessary code for my purposes, and specifically removed the flex: 1 line here which caused me a lot of lag. I instead use StyleSheet.absoluteFill in the containerStyle return array.

@garrettwesley thank you, this might make finding the root cause easier! For what it's worth, I already use a custom backdrop component everywhere:

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const CustomBackdrop = ({ style }: BottomSheetBackdropProps) => {
  const { close } = useBottomSheet();
  return (
    <AnimatedPressable
      onPress={() => close()}
      entering={FadeIn.duration(50)}
      exiting={FadeOut.duration(20)}
      style={[style, { backgroundColor: "rgba(0, 0, 0, 0.4)" }]}
    />
  );
};

and this is my base modal (so adding the custom backdrop and top inset, I handle bottom inset through bottom padding in the scrollables and/or footer):

export const BottomSheetModal = forwardRef<
  NBottomSheetModal,
  BottomSheetModalProps
>(({ ...props }, ref) => {
  const insets = useSafeAreaInsets();
  return (
    <NBottomSheetModal
      ref={ref}
      backdropComponent={CustomBackdrop}
      topInset={insets.top}
      {...props}
    />
  );
});

Everyone that's commenting "same", please add a thumbs up on the first comment, it makes life easier for everyone :)

[shuo-hiwintech]

+1

[shuo-hiwintech]

I was quickly repeating opening closing BottomSheetModal on Android and the app would be unresponsive.

"react-native": "0.76.2",
"@gorhom/bottom-sheet": "^5.0.6",
"react-native-gesture-handler": "^2.21.2",
"react-native-reanimated": "^3.16.2",

[aeokay]

The same issue with Bottom Sheet Modal

[rochajulian]

For what it's worth, I was having a similar issue and I was able to fix it by using React Native's View component rather than Gorhom's BottomSheetView component. I have a BSMTemplate component that does use the BottomSheetView and all of the instances of it use View to wrap its contents. This only seemed to make the BSM come up when called but it did not fix the laggyness.

[gunnartorfis]

Can confim that by removing the backdropComponent, the lagging stops.

[bikoevD]

Actually, it's not only this library that lags. Almost any pop-up modal in the new architecture and expo 52 experiences significant lag.
For example:

• @marceloterreiro/flash-calendar
• custom modal that slides out from below via reanimated

Also, in many places my layout broke.
Unfortunately, this makes the new architecture not very usable right now.

[DMyashkov]

Same here at least for the lag part even though it seem like other animations in reanimated also have the same aggresive jitter at the end of the animation.

[rileysay]

Yeah my modal is stuttering near end of open animation