@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheet/types.d.ts

@@ -0,0 +1,358 @@
+import type React from 'react';
+import type { Insets, StyleProp, View, ViewStyle } from 'react-native';
+import type { PanGesture } from 'react-native-gesture-handler';
+import type {
+  AnimateStyle,
+  ReduceMotion,
+  SharedValue,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  ANIMATION_SOURCE,
+  KEYBOARD_BEHAVIOR,
+  KEYBOARD_BLUR_BEHAVIOR,
+  KEYBOARD_INPUT_MODE,
+  SNAP_POINT_TYPE,
+} from '../../constants';
+import type {
+  ContainerLayoutState,
+  GestureEventsHandlersHookType,
+  NullableAccessibilityProps,
+} from '../../types';
+import type { BottomSheetBackdropProps } from '../bottomSheetBackdrop';
+import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
+import type { BottomSheetFooterProps } from '../bottomSheetFooter';
+import type { BottomSheetHandleProps } from '../bottomSheetHandle';
+
+export interface BottomSheetProps
+  extends BottomSheetAnimationConfigs,
+    Partial<BottomSheetGestureProps>,
+    Omit<NullableAccessibilityProps, 'accessibilityHint'> {
+  //#region configuration
+  /**
+   * Initial snap point index, provide `-1` to initiate bottom sheet in closed state.
+   * @type number
+   * @default 0
+   */
+  index?: number;
+  /**
+   * Points for the bottom sheet to snap to. It accepts array of number, string or mix.
+   * String values should be a percentage.
+   *
+   * ⚠️ This prop is required unless you set `enableDynamicSizing` to `true`.
+   * @example
+   * snapPoints={[200, 500]}
+   * snapPoints={[200, '%50']}
+   * snapPoints={['%100']}
+   * @type Array<string | number>
+   */
+  snapPoints?: Array<string | number> | SharedValue<Array<string | number>>;
+  /**
+   * Defines how violently sheet has to be stopped while over dragging.
+   * @type number
+   * @default 2.5
+   */
+  overDragResistanceFactor?: number;
+  /**
+   * Defines whether the bottom sheet is attached to the bottom or no.
+   * @type boolean
+   * @default false
+   */
+  detached?: boolean;
+  /**
+   * Enable content panning gesture interaction.
+   * @type boolean
+   * @default true
+   */
+  enableContentPanningGesture?: boolean;
+  /**
+   * Enable handle panning gesture interaction.
+   * @type boolean
+   * @default true
+   */
+  enableHandlePanningGesture?: boolean;
+  /**
+   * Enable over drag for the sheet.
+   * @type boolean
+   * @default true
+   */
+  enableOverDrag?: boolean;
+  /**
+   * Enable pan down gesture to close the sheet.
+   * @type boolean
+   * @default false
+   */
+  enablePanDownToClose?: boolean;
+  /**
+   * Enable dynamic sizing for content view and scrollable content size.
+   * @type boolean
+   * @default true
+   */
+  enableDynamicSizing?: boolean;
+  /**
+   * To start the sheet closed and snap to initial index when it's mounted.
+   * @type boolean
+   * @default true
+   */
+  animateOnMount?: boolean;
+  /**
+   * To override the user reduce motion setting.
+   * - `ReduceMotion.System`: if the `Reduce motion` accessibility setting is enabled on the device, disable the animation.
+   * - `ReduceMotion.Always`: disable the animation, even if `Reduce motion` accessibility setting is not enabled.
+   * - `ReduceMotion.Never`: enable the animation, even if `Reduce motion` accessibility setting is enabled.
+   * @type ReduceMotion
+   * @see https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility
+   * @default ReduceMotion.System
+   */
+  overrideReduceMotion?: ReduceMotion;
+  //#endregion
+
+  //#region layout
+  /**
+   * Container height helps to calculate the internal sheet layouts,
+   * if `containerHeight` not provided, the library internally will calculate it,
+   * however this will cause an extra re-rendering.
+   * @type number | SharedValue<number>;
+   * @deprecated please use `containerLayoutState` instead.
+   */
+  containerHeight?: number | SharedValue<number>;
+  /**
+   * Container offset helps to accurately detect container offsets.
+   * @type SharedValue<number>;
+   * @deprecated please use `containerLayoutState` instead.
+   */
+  containerOffset?: SharedValue<Required<Insets>>;
+  /**
+   * Container layout state, this is used to calculate the container height and offsets.
+   * If not provided, the library will use the default container layout state.
+   * @type SharedValue<ContainerLayoutState>
+   * @default undefined
+   */
+  containerLayoutState?: SharedValue<ContainerLayoutState>;
+  /**
+   * Top inset value helps to calculate percentage snap points values,
+   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or
+   * from `react-native-safe-area-context` hook `useSafeArea`.
+   * @type number
+   * @default 0
+   */
+  topInset?: number;
+  /**
+   * Bottom inset value helps to calculate percentage snap points values,
+   * usually comes from `react-native-safe-area-context` hook `useSafeArea`.
+   * @type number
+   * @default 0
+   */
+  bottomInset?: number;
+  /**
+   * Max dynamic content size height to limit the bottom sheet height
+   * from exceeding a provided size.
+   * @type number
+   * @default container height
+   */
+  maxDynamicContentSize?: number;
+  //#endregion
+
+  //#region keyboard
+  /**
+   * Defines the keyboard appearance behavior.
+   * @enum
+   * - `interactive`: offset the sheet by the size of the keyboard.
+   * - `extend`: extend the sheet to its maximum snap point.
+   * - `fillParent`: extend the sheet to fill parent.
+   * @type `interactive` | `extend` | `fillParent`
+   * @default interactive
+   */
+  keyboardBehavior?: keyof typeof KEYBOARD_BEHAVIOR;
+  /**
+   * Defines the keyboard blur behavior.
+   * - `none`: do nothing.
+   * - `restore`: restore sheet position.
+   */
+  keyboardBlurBehavior?: keyof typeof KEYBOARD_BLUR_BEHAVIOR;
+  /**
+   * Enable blurring the keyboard when user start to drag the bottom sheet.
+   * @default false
+   */
+  enableBlurKeyboardOnGesture?: boolean;
+  /**
+   * Defines keyboard input mode for Android only.
+   * @link {https://developer.android.com/guide/topics/manifest/activity-element#wsoft}
+   * @type `adjustPan` | `adjustResize`
+   * @default `adjustPan`
+   */
+  android_keyboardInputMode?: keyof typeof KEYBOARD_INPUT_MODE;
+
+  //#endregion
+
+  //#region styles
+  /**
+   * View style to be applied to the container.
+   * @type ViewStyle
+   * @default undefined
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * View style to be applied to the sheet container component,
+   * it also could be an Animated Style.
+   * @type AnimateStyle<ViewStyle>
+   * @default undefined
+   */
+  style?: StyleProp<
+    AnimateStyle<
+      Omit<
+        ViewStyle,
+        | 'flexDirection'
+        | 'position'
+        | 'top'
+        | 'left'
+        | 'bottom'
+        | 'right'
+        | 'opacity'
+        | 'transform'
+      >
+    >
+  >;
+  /**
+   * View style to be applied to the background component.
+   * @type ViewStyle
+   * @default undefined
+   */
+  backgroundStyle?: StyleProp<
+    Omit<ViewStyle, 'position' | 'top' | 'left' | 'bottom' | 'right'>
+  >;
+  /**
+   * View style to be applied to the handle component.
+   * @type ViewStyle
+   * @default undefined
+   */
+  handleStyle?: StyleProp<ViewStyle>;
+  /**
+   * View style to be applied to the handle indicator component.
+   * @type ViewStyle
+   * @default undefined
+   */
+  handleIndicatorStyle?: StyleProp<ViewStyle>;
+  //#endregion
+
+  /**
+   * Custom hook to provide pan gesture events handler, which will allow advance and
+   * customize handling for pan gesture.
+   * @warning this is an experimental feature and the hook signature can change without a major version bump.
+   * @type GestureEventsHandlersHookType
+   * @default useGestureEventsHandlersDefault
+   */
+  gestureEventsHandlersHook?: GestureEventsHandlersHookType;
+
+  //#region animated nodes
+  /**
+   * Animated value to be used as a callback of the position node internally.
+   * @type SharedValue<number>
+   */
+  animatedPosition?: SharedValue<number>;
+  /**
+   * Animated value to be used as a callback for the position index node internally.
+   * @type SharedValue<number>
+   */
+  animatedIndex?: SharedValue<number>;
+  //#endregion
+
+  //#region callbacks
+  /**
+   * Callback when the sheet position changed to a provided point.
+   *
+   * @type (index: number) => void;
+   */
+  onChange?: (index: number, position: number, type: SNAP_POINT_TYPE) => void;
+  /**
+   * Callback when the sheet close.
+   *
+   * @type () => void;
+   */
+  onClose?: () => void;
+  /**
+   * Callback when the sheet about to animate to a new position.
+   *
+   * @type (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
+   */
+  onAnimate?: (
+    fromIndex: number,
+    toIndex: number,
+    fromPosition: number,
+    toPosition: number
+  ) => void;
+  //#endregion
+
+  //#region components
+  /**
+   * Component to be placed as a sheet handle.
+   * @see {BottomSheetHandleProps}
+   * @type React.FC\<BottomSheetHandleProps\>
+   */
+  handleComponent?: React.FC<BottomSheetHandleProps> | null;
+
+  /**
+   * Component to be placed as a sheet backdrop.
+   * @see {BottomSheetBackdropProps}
+   * @type React.FC\<BottomSheetBackdropProps\>
+   * @default undefined
+   */
+  backdropComponent?: React.FC<BottomSheetBackdropProps>;
+  /**
+   * Component to be placed as a background.
+   * @see {BottomSheetBackgroundProps}
+   * @type React.FC\<BottomSheetBackgroundProps\>
+   */
+  backgroundComponent?: React.FC<BottomSheetBackgroundProps> | null;
+  /**
+   * Component to be placed as a footer.
+   * @see {BottomSheetFooterProps}
+   * @type React.FC\<BottomSheetFooterProps\>
+   */
+  footerComponent?: React.FC<BottomSheetFooterProps>;
+  /**
+   * A scrollable node or normal view.
+   * @type React.ReactNode
+   */
+  children: React.ReactNode;
+  //#endregion
+
+  //#region private
+  /**
+   * An indicator whether if the sheet running in a modal.
+   * @type boolean
+   */
+  $modal?: boolean;
+  //#endregion
+}
+
+export interface BottomSheetAnimationConfigs {
+  /**
+   * Animation configs, this could be created by:
+   * - `useBottomSheetSpringConfigs`
+   * - `useBottomSheetTimingConfigs`
+   * @type WithSpringConfig | WithTimingConfig
+   */
+  animationConfigs?: WithSpringConfig | WithTimingConfig;
+}
+
+export type AnimateToPositionType = (
+  position: number,
+  source: ANIMATION_SOURCE,
+  velocity?: number,
+  configs?: WithTimingConfig | WithSpringConfig
+) => void;
+
+export type BottomSheetGestureProps = {
+  activeOffsetX: Parameters<PanGesture['activeOffsetX']>[0];
+  activeOffsetY: Parameters<PanGesture['activeOffsetY']>[0];
+
+  failOffsetY: Parameters<PanGesture['failOffsetY']>[0];
+  failOffsetX: Parameters<PanGesture['failOffsetX']>[0];
+
+  simultaneousHandlers: Parameters<
+    PanGesture['simultaneousWithExternalGesture']
+  >[0];
+  waitFor: Parameters<PanGesture['requireExternalGestureToFail']>[0];
+};

package/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -0,0 +1,165 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { ViewProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useAnimatedReaction,
+  runOnJS,
+  Extrapolation,
+} from 'react-native-reanimated';
+import { useBottomSheet } from '../../hooks';
+import {
+  DEFAULT_ACCESSIBILITY_HINT,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_APPEARS_ON_INDEX,
+  DEFAULT_DISAPPEARS_ON_INDEX,
+  DEFAULT_ENABLE_TOUCH_THROUGH,
+  DEFAULT_OPACITY,
+  DEFAULT_PRESS_BEHAVIOR,
+} from './constants';
+import { styles } from './styles';
+import type { BottomSheetDefaultBackdropProps } from './types';
+
+const BottomSheetBackdropComponent = ({
+  animatedIndex,
+  opacity: _providedOpacity,
+  appearsOnIndex: _providedAppearsOnIndex,
+  disappearsOnIndex: _providedDisappearsOnIndex,
+  enableTouchThrough: _providedEnableTouchThrough,
+  pressBehavior = DEFAULT_PRESS_BEHAVIOR,
+  onPress,
+  style,
+  children,
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
+  accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint: _providedAccessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
+}: BottomSheetDefaultBackdropProps) => {
+  //#region hooks
+  const { snapToIndex, close } = useBottomSheet();
+  const isMounted = useRef(false);
+  //#endregion
+
+  //#region defaults
+  const opacity = _providedOpacity ?? DEFAULT_OPACITY;
+  const appearsOnIndex = _providedAppearsOnIndex ?? DEFAULT_APPEARS_ON_INDEX;
+  const disappearsOnIndex =
+    _providedDisappearsOnIndex ?? DEFAULT_DISAPPEARS_ON_INDEX;
+  const enableTouchThrough =
+    _providedEnableTouchThrough ?? DEFAULT_ENABLE_TOUCH_THROUGH;
+  //#endregion
+
+  //#region variables
+  const [pointerEvents, setPointerEvents] = useState<
+    ViewProps['pointerEvents']
+  >(enableTouchThrough ? 'none' : 'auto');
+  //#endregion
+
+  //#region callbacks
+  const handleOnPress = useCallback(() => {
+    onPress?.();
+
+    if (pressBehavior === 'close') {
+      close();
+    } else if (pressBehavior === 'collapse') {
+      snapToIndex(disappearsOnIndex as number);
+    } else if (typeof pressBehavior === 'number') {
+      snapToIndex(pressBehavior);
+    }
+  }, [snapToIndex, close, disappearsOnIndex, pressBehavior, onPress]);
+  const handleContainerTouchability = useCallback(
+    (shouldDisableTouchability: boolean) => {
+      isMounted.current &&
+        setPointerEvents(shouldDisableTouchability ? 'none' : 'auto');
+    },
+    []
+  );
+  //#endregion
+
+  //#region tap gesture
+  const tapHandler = useMemo(() => {
+    const gesture = Gesture.Tap().onEnd(() => {
+      runOnJS(handleOnPress)();
+    });
+    return gesture;
+  }, [handleOnPress]);
+  //#endregion
+
+  //#region styles
+  const containerAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(
+        animatedIndex.value,
+        [-1, disappearsOnIndex, appearsOnIndex],
+        [0, 0, opacity],
+        Extrapolation.CLAMP
+      ),
+    }),
+    [animatedIndex, appearsOnIndex, disappearsOnIndex, opacity]
+  );
+  const containerStyle = useMemo(
+    () => [styles.backdrop, style, containerAnimatedStyle],
+    [style, containerAnimatedStyle]
+  );
+  //#endregion
+
+  //#region effects
+  useAnimatedReaction(
+    () => animatedIndex.value <= disappearsOnIndex,
+    (shouldDisableTouchability, previous) => {
+      if (shouldDisableTouchability === previous) {
+        return;
+      }
+      runOnJS(handleContainerTouchability)(shouldDisableTouchability);
+    },
+    [disappearsOnIndex]
+  );
+
+  // addressing updating the state after unmounting.
+  // [link](https://github.com/gorhom/react-native-bottom-sheet/issues/1376)
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  //#endregion
+
+  const AnimatedView = (
+    <Animated.View
+      style={containerStyle}
+      pointerEvents={pointerEvents}
+      accessible={_providedAccessible ?? undefined}
+      accessibilityRole={_providedAccessibilityRole ?? undefined}
+      accessibilityLabel={_providedAccessibilityLabel ?? undefined}
+      accessibilityHint={
+        _providedAccessibilityHint
+          ? _providedAccessibilityHint
+          : `Tap to ${
+              typeof pressBehavior === 'string' ? pressBehavior : 'move'
+            } the Bottom Sheet`
+      }
+    >
+      {children}
+    </Animated.View>
+  );
+
+  return pressBehavior !== 'none' ? (
+    <GestureDetector gesture={tapHandler}>{AnimatedView}</GestureDetector>
+  ) : (
+    AnimatedView
+  );
+};
+
+export const BottomSheetBackdrop = memo(BottomSheetBackdropComponent);
+BottomSheetBackdrop.displayName = 'BottomSheetBackdrop';

package/src/components/bottomSheetBackdrop/constants.ts

@@ -0,0 +1,22 @@
+const DEFAULT_OPACITY = 0.5;
+const DEFAULT_APPEARS_ON_INDEX = 1;
+const DEFAULT_DISAPPEARS_ON_INDEX = 0;
+const DEFAULT_ENABLE_TOUCH_THROUGH = false;
+const DEFAULT_PRESS_BEHAVIOR = 'close' as const;
+
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_ROLE = 'button';
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet backdrop';
+const DEFAULT_ACCESSIBILITY_HINT = 'Tap to close the bottom sheet';
+
+export {
+  DEFAULT_OPACITY,
+  DEFAULT_APPEARS_ON_INDEX,
+  DEFAULT_DISAPPEARS_ON_INDEX,
+  DEFAULT_ENABLE_TOUCH_THROUGH,
+  DEFAULT_PRESS_BEHAVIOR,
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
+};

package/src/components/bottomSheetBackdrop/index.ts

@@ -0,0 +1,2 @@
+export { BottomSheetBackdrop } from './BottomSheetBackdrop';
+export type { BottomSheetBackdropProps } from './types';

package/src/components/bottomSheetBackdrop/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'black',
+  },
+});

package/src/components/bottomSheetBackdrop/types.d.ts

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
+import type { BottomSheetProps } from '../bottomSheet/types';
+
+export interface BottomSheetBackdropProps
+  extends Pick<ViewProps, 'style'>,
+    BottomSheetVariables {}
+
+export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;
+
+export interface BottomSheetDefaultBackdropProps
+  extends BottomSheetBackdropProps,
+    NullableAccessibilityProps {
+  /**
+   * Backdrop opacity.
+   * @type number
+   * @default 0.5
+   */
+  opacity?: number;
+  /**
+   * Snap point index when backdrop will appears on.
+   * @type number
+   * @default 1
+   */
+  appearsOnIndex?: number;
+  /**
+   * Snap point index when backdrop will disappears on.
+   * @type number
+   * @default 0
+   */
+  disappearsOnIndex?: number;
+  /**
+   * Enable touch through backdrop component.
+   * @type boolean
+   * @default false
+   */
+  enableTouchThrough?: boolean;
+  /**
+   * What should happen when user press backdrop?
+   * @type BackdropPressBehavior
+   * @default 'close'
+   */
+  pressBehavior?: BackdropPressBehavior;
+
+  /**
+   * Function which will be executed on pressing backdrop component
+   * @type {Function}
+   */
+  onPress?: () => void;
+  /**
+   * Child component that will be rendered on backdrop.
+   */
+  children?: ReactNode | ReactNode[];
+}

package/src/components/bottomSheetBackground/BottomSheetBackground.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { styles } from './styles';
+import type { BottomSheetBackgroundProps } from './types';
+
+const BottomSheetBackgroundComponent = ({
+  pointerEvents,
+  style,
+}: BottomSheetBackgroundProps) => (
+  <View
+    pointerEvents={pointerEvents}
+    accessible={true}
+    accessibilityRole="adjustable"
+    accessibilityLabel="Bottom Sheet"
+    style={[styles.background, style]}
+  />
+);
+
+export const BottomSheetBackground = memo(BottomSheetBackgroundComponent);
+BottomSheetBackground.displayName = 'BottomSheetBackground';

package/src/components/bottomSheetBackground/BottomSheetBackgroundContainer.tsx

@@ -0,0 +1,35 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { BottomSheetBackground } from './BottomSheetBackground';
+import { styles } from './styles';
+import type { BottomSheetBackgroundContainerProps } from './types';
+
+const BottomSheetBackgroundContainerComponent = ({
+  animatedIndex,
+  animatedPosition,
+  backgroundComponent: _providedBackgroundComponent,
+  backgroundStyle: _providedBackgroundStyle,
+}: BottomSheetBackgroundContainerProps) => {
+  //#region style
+  const backgroundStyle = useMemo(
+    () => StyleSheet.flatten([styles.container, _providedBackgroundStyle]),
+    [_providedBackgroundStyle]
+  );
+  //#endregion
+
+  const BackgroundComponent =
+    _providedBackgroundComponent ?? BottomSheetBackground;
+  return (
+    <BackgroundComponent
+      pointerEvents="none"
+      animatedIndex={animatedIndex}
+      animatedPosition={animatedPosition}
+      style={backgroundStyle}
+    />
+  );
+};
+
+export const BottomSheetBackgroundContainer = memo(
+  BottomSheetBackgroundContainerComponent
+);
+BottomSheetBackgroundContainer.displayName = 'BottomSheetBackgroundContainer';

package/src/components/bottomSheetBackground/index.ts

@@ -0,0 +1,2 @@
+export { BottomSheetBackgroundContainer } from './BottomSheetBackgroundContainer';
+export type { BottomSheetBackgroundProps } from './types';

package/src/components/bottomSheetBackground/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: StyleSheet.absoluteFillObject,
+  background: {
+    backgroundColor: 'white',
+    borderRadius: 15,
+  },
+});

package/src/components/bottomSheetBackground/types.d.ts

@@ -0,0 +1,12 @@
+import type { ViewProps } from 'react-native';
+import type { BottomSheetVariables } from '../../types';
+import type { BottomSheetProps } from '../bottomSheet';
+export interface BottomSheetBackgroundProps
+  extends Pick<ViewProps, 'pointerEvents' | 'style'>,
+    BottomSheetVariables {}
+
+export type BottomSheetBackgroundContainerProps = Pick<
+  BottomSheetProps,
+  'backgroundComponent' | 'backgroundStyle'
+> &
+  BottomSheetBackgroundProps;