Custom Background

To override the default background, you will need to pass the prop backgroundComponent to the BottomSheet component.

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

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

Example

Here is an example of a custom background component:

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

const CustomBackground: React.FC<BottomSheetBackgroundProps> = ({
  style,
  animatedIndex,
}) => {
  //#region styles
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    // @ts-ignore
    backgroundColor: interpolateColor(
      animatedIndex.value,
      [0, 1],
      ["#ffffff", "#a8b5eb"]
    ),
  }));
  const containerStyle = useMemo(
    () => [style, containerAnimatedStyle],
    [style, containerAnimatedStyle]
  );
  //#endregion

  // render
  return <Animated.View pointerEvents="none" style={containerStyle} />;
};

export default CustomBackground;