[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

[Ikecruz]

adding enableDynamicSizing={false} to the bottom sheet

fixed it for me

[rochajulian]

Are you guys still running into this? I'm not sure what happened but the animation seems relatively smooth now.

[kospaa]

Still having this issue on the latest version

[gorhom]

the sample provided is not working.

Error: GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.

[Noitham]

Hey @gorhom, I can see it's been marked as completed, do you need a reproducible example or has the issue been fixed?

[vladcos]

Can confirm serious jittering after upgrading to the new architecture. Downgrading until I have time after work hours to provide a repro.

[Fraank98]

Still having this issue on the latest version

[grantmcconnaughey]

I am, too. I can confirm that removing the custom backdrop, or creating a new custom backdrop component, fixed the issue for me.

Using this custom backdrop (copied form Bluesky's social-app) seems to fix the issue:

import React, { useMemo } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedStyle
} from 'react-native-reanimated';
import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';

/**
 * This is a custom backdrop that seems to have less lag when used vs. rendering a default backdrop.
 * Copied from Bluesky's custom backdrop in their social-app repo.
 */
export function createCustomBackdrop(
  onClose?: (() => void) | undefined
): React.FC<BottomSheetBackdropProps> {
  const CustomBackdrop = ({
    animatedIndex,
    style
  }: BottomSheetBackdropProps) => {
    // animated variables
    const opacity = useAnimatedStyle(() => ({
      opacity: interpolate(
        animatedIndex.value, // current snap index
        [-1, 0], // input range
        [0, 0.5], // output range
        Extrapolation.CLAMP
      )
    }));

    const containerStyle = useMemo(
      () => [style, { backgroundColor: '#000' }, opacity],
      [style, opacity]
    );

    return (
      <TouchableWithoutFeedback
        onPress={onClose}
        accessibilityLabel="Close bottom drawer"
        accessibilityHint=""
        onAccessibilityEscape={() => {
          if (onClose !== undefined) {
            onClose();
          }
        }}
      >
        <Animated.View style={containerStyle} />
      </TouchableWithoutFeedback>
    );
  };
  return CustomBackdrop;
}

[iam047]

also having this issue +1

[Fraank98]

@iam047 just remove the custom backdrop or create a new custom backdrop component.

[iam047]

@Fraank98 thanks! The first time I tried, it didn’t seem to work—maybe due to caching. But after trying again and refreshing, the issue was gone.

[elisjoaquim]

Using a different backdrop instead of the one provided by the library resolves the issue.

[kospaa]

I am using a custom backdrop and it does not fix the issue. Removing completely the background fix de issue though.

[IvanYeromenko]

Same issue

[IvanYeromenko]

@gorhom Why you closed this issue?
It lages with new arch for both iOS and Android.
There are no specific examples, you can just turn off and turn on the new arch.
You will see the difference.