Custom Backdrop

To add a backdrop to your sheet you will need to pass the prop backdropComponent to the BottomSheet component.

When you provide your own backdrop component, it will receive these animated props animatedIndex & animatedPosition that indicates the position and the index of the sheet.

You can extend your custom backdrop props interface with the provided BottomSheetBackdropProps interface to expose animatedIndex & animatedPosition into your own interface.

Example

Here is an example of a custom backdrop component:

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

const CustomBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
  // animated variables
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [0, 1],
      [0, 1],
      Extrapolate.CLAMP
    ),
  }));

  // styles
  const containerStyle = useMemo(
    () => [
      style,
      {
        backgroundColor: "#a8b5eb",
      },
      containerAnimatedStyle,
    ],
    [style, containerAnimatedStyle]
  );

  return <Animated.View style={containerStyle} />;
};

export default CustomBackdrop;