BottomSheetBackdrop very slow + layout shift (Expo 52 + RN 0.76.5) FIX

[PaddaSecurity]

When upgrading to Expo 52 + RN 0.76.5 -> the BottomSheetBackdrop component causes a layout shift for the bottom sheet modal + has become sluggish.

So I just made my own - no it's not ARIA compliant and such, no it doesn't do everything the main supported one does, but for your apps if you want to add that you can! Just a starting point and hey... it works :)

Make a new component (call it whatever you want, I called it "custom-bottom-sheet-backdrop.tsx") and paste this in.

import { StyleProp } from 'react-native'

import Animated, {
  Extrapolation,
  interpolate,
  runOnJS,
  SharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated'

import { GestureDetector, Gesture } from 'react-native-gesture-handler'
import { ViewStyle } from 'react-native'
import { useBottomSheet } from '@gorhom/bottom-sheet'
import { useMemo } from 'react'

export const CustomBackdrop = ({
  animatedIndex,
  style,
}: {
  animatedIndex: SharedValue<number>
  style: StyleProp<ViewStyle>
}) => {
  const { close } = useBottomSheet()

  const tapHandler = useMemo(
    () =>
      Gesture.Tap().onEnd(() => {
        runOnJS(close)()
      }),
    [close],
  )

  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [-1, 0],
      [0, 0.5],
      Extrapolation.CLAMP,
    ),
  }))

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

  return (
    <GestureDetector gesture={tapHandler}>
      <Animated.View style={containerStyle} />
    </GestureDetector>
  )
}

And you would use it like this:

<BottomSheet
          ref={bottomSheetRef}
          // Need this otherwise the sheet won't show up :(
          enableDynamicSizing={false}
          index={-1}
          snapPoints={['55%']}
          enablePanDownToClose
          backdropComponent={props => (
            <CustomBackdrop {...props} style={props.style} />
          )}
        >
<View> {/* Your Content */}</View>
</BottomSheet>

Now it should be just as fast and smooth as it was before all the upgrades.

Hope this helps someone!

[rmmgc]

Can also confirm that using custom Backdrop implementation gives fewer frame drops compared to default one.