@umituz/react-native-bottom-sheet 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/BottomSheetModal.tsx

@@ -1,36 +1,4 @@
-/**
- * BottomSheetModal Component
- *
- * Modal version of bottom sheet using @gorhom/bottom-sheet.
- * Provides a clean, theme-aware API for modal bottom sheets.
- *
- * Features:
- * - Modal presentation (overlays entire screen)
- * - Snap point support (percentage, fixed, dynamic)
- * - Backdrop with tap-to-close
- * - Keyboard handling (interactive, fillParent, extend)
- * - Theme-aware colors
- * - Handle indicator
- * - Pan down to close
- * - Smooth animations with Reanimated v3
- *
- * Usage:
- * ```tsx
- * const { modalRef, present, dismiss } = useBottomSheetModal();
- *
- * <BottomSheetModal
- *   ref={modalRef}
- *   preset="medium"
- *   onDismiss={() => console.log('Dismissed')}
- * >
- *   <View>
- *     <Text>Modal Content</Text>
- *   </View>
- * </BottomSheetModal>
- * ```
- */
-
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import {
   BottomSheetModal as GorhomBottomSheetModal,
@@ -47,9 +15,6 @@ import type {
 } from '../../domain/entities/BottomSheet';
 import { BottomSheetUtils } from '../../domain/entities/BottomSheet';
 
-/**
- * Bottom sheet modal ref methods
- */
 export interface BottomSheetModalRef {
   present: () => void;
   dismiss: () => void;
@@ -59,215 +24,113 @@ export interface BottomSheetModalRef {
   collapse: () => void;
 }
 
-/**
- * Bottom sheet modal component props
- */
 export interface BottomSheetModalProps {
-  /**
-   * Bottom sheet content
-   */
   children: React.ReactNode;
-
-  /**
-   * Preset configuration (small, medium, large, full)
-   */
   preset?: BottomSheetPreset;
-
-  /**
-   * Custom snap points (overrides preset)
-   */
   snapPoints?: SnapPoint[];
-
-  /**
-   * Initial snap point index
-   */
   initialIndex?: number;
-
-  /**
-   * Enable backdrop
-   */
   enableBackdrop?: boolean;
-
-  /**
-   * Backdrop appears at this snap index
-   */
   backdropAppearsOnIndex?: number;
-
-  /**
-   * Backdrop disappears at this snap index
-   */
   backdropDisappearsOnIndex?: number;
-
-  /**
-   * Keyboard behavior strategy
-   */
   keyboardBehavior?: KeyboardBehavior;
-
-  /**
-   * Enable handle indicator
-   */
   enableHandleIndicator?: boolean;
-
-  /**
-   * Enable pan down to close
-   */
   enablePanDownToClose?: boolean;
-
-  /**
-   * Enable dynamic sizing
-   */
   enableDynamicSizing?: boolean;
-
-  /**
-   * Callback when sheet changes position
-   */
   onChange?: (index: number) => void;
-
-  /**
-   * Callback when sheet is dismissed
-   */
   onDismiss?: () => void;
-
-  /**
-   * Background color of the sheet
-   */
   backgroundColor?: string;
 }
 
-/**
- * Bottom Sheet Modal Component
- *
- * Modal version of bottom sheet for React Native.
- * Uses @gorhom/bottom-sheet with Reanimated v3.
- */
-export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>(
-  (
-    {
-      children,
-      preset = 'medium',
-      snapPoints: customSnapPoints,
-      initialIndex,
-      enableBackdrop = true,
-      backdropAppearsOnIndex,
-      backdropDisappearsOnIndex,
-      keyboardBehavior = 'interactive',
-      enableHandleIndicator = true,
-      enablePanDownToClose = true,
-      enableDynamicSizing = false,
-      onChange,
-      onDismiss,
-      backgroundColor,
+export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>((props, ref) => {
+  const {
+    children,
+    preset = 'medium',
+    snapPoints: customSnapPoints,
+    initialIndex,
+    enableBackdrop = true,
+    backdropAppearsOnIndex,
+    backdropDisappearsOnIndex,
+    keyboardBehavior = 'interactive',
+    enableHandleIndicator = true,
+    enablePanDownToClose = true,
+    enableDynamicSizing = false,
+    onChange,
+    onDismiss,
+    backgroundColor,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const modalRef = useRef<GorhomBottomSheetModal>(null);
+
+  const config: BottomSheetConfig = useMemo(() => {
+    if (customSnapPoints) {
+      return BottomSheetUtils.createConfig({
+        snapPoints: customSnapPoints,
+        initialIndex,
+        enableBackdrop,
+        backdropAppearsOnIndex,
+        backdropDisappearsOnIndex,
+        keyboardBehavior,
+        enableHandleIndicator,
+        enablePanDownToClose,
+        enableDynamicSizing,
+      });
+    }
+    return BottomSheetUtils.getPreset(preset);
+  }, [preset, customSnapPoints, initialIndex, enableBackdrop, backdropAppearsOnIndex, backdropDisappearsOnIndex, keyboardBehavior, enableHandleIndicator, enablePanDownToClose, enableDynamicSizing]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) =>
+      enableBackdrop ? (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
+          disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
+          opacity={0.5}
+          pressBehavior="close"
+        />
+      ) : null,
+    [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
+  );
+
+  const handleSheetChange = useCallback(
+    (index: number) => {
+      onChange?.(index);
+      if (index === -1) onDismiss?.();
     },
-    ref
-  ) => {
-    const tokens = useAppDesignTokens();
-    const modalRef = React.useRef<GorhomBottomSheetModal>(null);
-
-    // Get configuration from preset or custom (must be before useImperativeHandle)
-    const config: BottomSheetConfig = useMemo(() => {
-      if (customSnapPoints) {
-        return BottomSheetUtils.createConfig({
-          snapPoints: customSnapPoints,
-          initialIndex,
-          enableBackdrop,
-          backdropAppearsOnIndex,
-          backdropDisappearsOnIndex,
-          keyboardBehavior,
-          enableHandleIndicator,
-          enablePanDownToClose,
-          enableDynamicSizing,
-        });
-      }
-      return BottomSheetUtils.getPreset(preset);
-    }, [
-      preset,
-      customSnapPoints,
-      initialIndex,
-      enableBackdrop,
-      backdropAppearsOnIndex,
-      backdropDisappearsOnIndex,
-      keyboardBehavior,
-      enableHandleIndicator,
-      enablePanDownToClose,
-      enableDynamicSizing,
-    ]);
-
-    // Render backdrop component (must be before early return to maintain hook order)
-    const renderBackdrop = useCallback(
-      (props: BottomSheetBackdropProps) =>
-        enableBackdrop ? (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
-            disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
-            opacity={0.5}
-            pressBehavior="close"
-          />
-        ) : null,
-      [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
-    );
-
-    // Handle sheet changes (must be before early return to maintain hook order)
-    const handleSheetChange = useCallback(
-      (index: number) => {
-        onChange?.(index);
-        if (index === -1) {
-          onDismiss?.();
-        }
-      },
-      [onChange, onDismiss]
-    );
-
-    // Expose ref methods
-    React.useImperativeHandle(ref, () => ({
-      present: () => {
-        modalRef.current?.present();
-      },
-      dismiss: () => {
-        modalRef.current?.dismiss();
-      },
-      snapToIndex: (index: number) => {
-        modalRef.current?.snapToIndex(index);
-      },
-      snapToPosition: (position: string | number) => {
-        modalRef.current?.snapToPosition(position);
-      },
-      expand: () => {
-        modalRef.current?.expand();
-      },
-      collapse: () => {
-        modalRef.current?.collapse();
-      },
-    }), []);
-
-    return (
-      <GorhomBottomSheetModal
-        ref={modalRef}
-        index={-1}
-        snapPoints={config.snapPoints}
-        enableDynamicSizing={config.enableDynamicSizing}
-        backdropComponent={renderBackdrop}
-        keyboardBehavior={config.keyboardBehavior}
-        enableHandlePanningGesture={config.enableHandleIndicator}
-        enablePanDownToClose={config.enablePanDownToClose}
-        onChange={handleSheetChange}
-        onDismiss={onDismiss}
-        backgroundStyle={[
-          styles.background,
-          { backgroundColor: backgroundColor || tokens.colors.surface },
-        ]}
-        handleIndicatorStyle={[
-          styles.handleIndicator,
-          { backgroundColor: tokens.colors.border },
-        ]}
-      >
-        <BottomSheetView style={styles.contentContainer}>
-          {children}
-        </BottomSheetView>
-      </GorhomBottomSheetModal>
-    );
-  }
-);
+    [onChange, onDismiss]
+  );
+
+  useImperativeHandle(ref, () => ({
+    present: () => modalRef.current?.present(),
+    dismiss: () => modalRef.current?.dismiss(),
+    snapToIndex: (index: number) => modalRef.current?.snapToIndex(index),
+    snapToPosition: (pos: string | number) => modalRef.current?.snapToPosition(pos),
+    expand: () => modalRef.current?.expand(),
+    collapse: () => modalRef.current?.collapse(),
+  }));
+
+  return (
+    <GorhomBottomSheetModal
+      ref={modalRef}
+      index={-1}
+      snapPoints={config.snapPoints}
+      enableDynamicSizing={config.enableDynamicSizing}
+      backdropComponent={renderBackdrop}
+      keyboardBehavior={config.keyboardBehavior}
+      enableHandlePanningGesture={config.enableHandleIndicator}
+      enablePanDownToClose={config.enablePanDownToClose}
+      onChange={handleSheetChange}
+      onDismiss={onDismiss}
+      backgroundStyle={[styles.background, { backgroundColor: backgroundColor || tokens.colors.surface }]}
+      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
+    >
+      <BottomSheetView style={styles.contentContainer}>
+        {children}
+      </BottomSheetView>
+    </GorhomBottomSheetModal>
+  );
+});
 
 BottomSheetModal.displayName = 'BottomSheetModal';
 
@@ -285,4 +148,3 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-