@swmansion/react-native-bottom-sheet 0.10.2 → 0.12.0

package/src/BottomSheet.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import BottomSheetSurfaceNativeComponent from './BottomSheetSurfaceNativeComponent';
 import { Portal } from './BottomSheetProvider';
 import { type Detent } from './bottomSheetUtils';
 export type { Detent, DetentValue } from './bottomSheetUtils';
@@ -13,8 +14,20 @@ export { programmatic } from './bottomSheetUtils';
  * Props for the inline bottom-sheet component.
  */
 export interface BottomSheetProps {
-  /** Sheet contents, including any background or scrollable content. */
+  /** Sheet contents, including any scrollable content. */
   children: ReactNode;
+  /**
+   * Optional visual surface (background) rendered behind the content. The
+   * library sizes and positions the surface natively to cover the full sheet,
+   * independently of the content, so a shrinking content height never exposes
+   * blank space. Put a background View here instead of inside `children` when
+   * you want that shrink-safe behavior. When omitted, behavior is unchanged.
+   *
+   * Give the surface element a filling style such as `StyleSheet.absoluteFill`:
+   * it is mounted in a full-size host, so a surface sized only by its own
+   * content would collapse and not show.
+   */
+  surface?: ReactNode;
   /** Additional style applied to the native sheet host view. */
   style?: StyleProp<ViewStyle>;
   /** Snap points for the sheet. Defaults to `[0, 'content']`. */
@@ -39,11 +52,26 @@ export interface BottomSheetProps {
   disableScrollableNegotiation?: boolean;
   /** Scrim color used by `ModalBottomSheet`. */
   scrimColor?: string;
+  /**
+   * Scrim opacities per detent, indexed to match `detents`. Each value in 0–1
+   * scales the scrim color’s alpha at the detent of the same index, and the
+   * opacity is linearly interpolated as the sheet is dragged between detents.
+   * A shorter array than `detents` reuses its last value for any remaining
+   * detents.
+   *
+   * The default maps each detent to 0 when it is closed and 1 otherwise,
+   * so the scrim is transparent at any closed detent and fully opaque at every
+   * open one; e.g., `[0, 'content']` defaults to `[0, 1]`, and all-open detents
+   * default to a constant opaque scrim. Pass one value per detent—e.g.,
+   * `[0, 0.5, 1]`—to keep the scrim deepening across every detent.
+   */
+  scrimOpacities?: number[];
 }
 
 /** Native bottom sheet that renders inline within the current screen layout. */
 export const BottomSheet = ({
   children,
+  surface,
   style,
   detents = [0, 'content'],
   index,
@@ -54,6 +82,7 @@ export const BottomSheet = ({
   modal = false,
   disableScrollableNegotiation = false,
   scrimColor,
+  scrimOpacities,
 }: BottomSheetProps) => {
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
@@ -82,6 +111,12 @@ export const BottomSheet = ({
     ? resolveDetentValue(detents[clampedIndex])
     : 0;
   const isCollapsed = selectedDetentValue === 0;
+  // Default the scrim opacity per detent: transparent at any closed detent,
+  // fully opaque at every open one. Mapping each detent independently keeps
+  // this correct regardless of the order detents are passed in.
+  const resolvedScrimOpacity =
+    scrimOpacities ??
+    detents.map((detent) => (resolveDetentValue(detent) === 0 ? 0 : 1));
   const handleIndexChange = (event: { nativeEvent: { index: number } }) => {
     onIndexChange?.(event.nativeEvent.index);
   };
@@ -124,10 +159,20 @@ export const BottomSheet = ({
           modal={modal}
           disableScrollableNegotiation={disableScrollableNegotiation}
           scrimColor={scrimColor}
+          scrimOpacities={resolvedScrimOpacity}
           onIndexChange={handleIndexChange}
           onSettle={handleSettle}
           onPositionChange={handlePositionChange}
         >
+          {surface != null && (
+            <BottomSheetSurfaceNativeComponent
+              collapsable={false}
+              pointerEvents="box-none"
+              style={StyleSheet.absoluteFill}
+            >
+              {surface}
+            </BottomSheetSurfaceNativeComponent>
+          )}
           <View collapsable={false} style={{ flex: 1, maxHeight }}>
             {children}
             <View collapsable={false} pointerEvents="none" />

package/src/BottomSheetNativeComponent.ts

@@ -19,6 +19,7 @@ export interface NativeProps extends ViewProps {
   modal: boolean;
   disableScrollableNegotiation?: boolean;
   scrimColor?: ColorValue;
+  scrimOpacities?: ReadonlyArray<CodegenTypes.Double>;
   onIndexChange?: CodegenTypes.DirectEventHandler<
     Readonly<{ index: CodegenTypes.Int32 }>
   >;

package/src/BottomSheetSurfaceNativeComponent.ts

@@ -0,0 +1,9 @@
+import { codegenNativeComponent, type ViewProps } from 'react-native';
+
+// The visual surface that sits behind the sheet content. It carries no props of
+// its own: the library identifies it by component type and owns its geometry,
+// sizing it to cover the full sheet so a content shrink never exposes blank
+// space. Its React children provide the visual appearance only.
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('BottomSheetSurfaceView');

package/src/ModalBottomSheet.tsx

@@ -1,8 +1,10 @@
 import { BottomSheet, type BottomSheetProps } from './BottomSheet';
 
 /** Props for the modal bottom-sheet variant rendered through the provider portal. */
-export interface ModalBottomSheetProps
-  extends Omit<BottomSheetProps, 'modal'> {}
+export interface ModalBottomSheetProps extends Omit<
+  BottomSheetProps,
+  'modal'
+> {}
 
 /** Bottom sheet presented above the current UI with a scrim. */
 export const ModalBottomSheet = (props: ModalBottomSheetProps) => (