Skip to main content
Version: v4 (Reanimated v2)

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;