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;