@umituz/react-native-bottom-sheet 1.3.3 → 1.3.5

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
-    "lint": "echo 'Lint passed'",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4.6.0",
-    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system": "2.0.16",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.0.0",
@@ -34,8 +34,13 @@
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@umituz/react-native-design-system": "latest",
     "@types/react": "~19.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
+    "@umituz/react-native-design-system": "2.0.16",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-native": "^5.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.0.0",

package/src/domain/entities/BottomSheet.ts

@@ -1,9 +1,7 @@
-import { Dimensions } from 'react-native';
+import React from 'react';
 
 export type SnapPoint = string | number;
-
 export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full' | 'custom';
-
 export type KeyboardBehavior = 'interactive' | 'extend' | 'fillParent';
 
 export interface BottomSheetConfig {
@@ -18,6 +16,65 @@ export interface BottomSheetConfig {
     enableDynamicSizing?: boolean;
 }
 
+export interface BottomSheetRef {
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+    close: () => void;
+}
+
+export interface BottomSheetModalRef {
+    present: () => void;
+    dismiss: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+export interface BottomSheetProps {
+    children: React.ReactNode;
+    preset?: BottomSheetPreset;
+    snapPoints?: SnapPoint[];
+    initialIndex?: number;
+    enableBackdrop?: boolean;
+    backdropAppearsOnIndex?: number;
+    backdropDisappearsOnIndex?: number;
+    keyboardBehavior?: KeyboardBehavior;
+    enableHandleIndicator?: boolean;
+    enablePanDownToClose?: boolean;
+    enableDynamicSizing?: boolean;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+}
+
+export interface BottomSheetModalProps extends Omit<BottomSheetProps, 'onClose'> {
+    onDismiss?: () => void;
+    backgroundColor?: string;
+}
+
+export interface UseBottomSheetReturn {
+    sheetRef: React.RefObject<BottomSheetRef | null>;
+    open: () => void;
+    close: () => void;
+    expand: () => void;
+    collapse: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+}
+
+export interface UseBottomSheetModalReturn {
+    modalRef: React.RefObject<BottomSheetModalRef | null>;
+    present: () => void;
+    dismiss: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+
 export const BottomSheetUtils = {
     getPreset: (preset: BottomSheetPreset): BottomSheetConfig => {
         switch (preset) {

package/src/presentation/components/BottomSheet.tsx

@@ -1,35 +1,4 @@
-/**
- * Bottom Sheet Component
- *
- * Main bottom sheet wrapper using @gorhom/bottom-sheet library.
- * Provides a clean, theme-aware API for bottom sheets across the app.
- *
- * Features:
- * - 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 sheetRef = useRef<BottomSheetRef>(null);
- *
- * <BottomSheet
- *   ref={sheetRef}
- *   preset="medium"
- *   onClose={() => console.log('Closed')}
- * >
- *   <View>
- *     <Text>Bottom Sheet Content</Text>
- *   </View>
- * </BottomSheet>
- * ```
- */
-
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import GorhomBottomSheet, {
   BottomSheetView,
@@ -39,228 +8,100 @@ import GorhomBottomSheet, {
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import type {
   BottomSheetConfig,
-  BottomSheetPreset,
-  SnapPoint,
-  KeyboardBehavior,
+  BottomSheetRef,
+  BottomSheetProps,
 } from '../../domain/entities/BottomSheet';
 import { BottomSheetUtils } from '../../domain/entities/BottomSheet';
 
-/**
- * Bottom sheet ref methods
- */
-export interface BottomSheetRef {
-  snapToIndex: (index: number) => void;
-  snapToPosition: (position: string | number) => void;
-  expand: () => void;
-  collapse: () => void;
-  close: () => void;
-}
-
-
-/**
- * Bottom sheet component props
- */
-export interface BottomSheetProps {
-  /**
-   * 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 closes
-   */
-  onClose?: () => void;
-}
-
-/**
- * Bottom Sheet Component
- *
- * Modern, performant bottom sheet for React Native.
- * Uses @gorhom/bottom-sheet with Reanimated v3.
- */
-export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
-  (
-    {
-      children,
-      preset = 'medium',
-      snapPoints: customSnapPoints,
-      initialIndex,
-      enableBackdrop = true,
-      backdropAppearsOnIndex,
-      backdropDisappearsOnIndex,
-      keyboardBehavior = 'interactive',
-      enableHandleIndicator = true,
-      enablePanDownToClose = true,
-      enableDynamicSizing = false,
-      onChange,
-      onClose,
-    },
-    ref
-  ) => {
-    const tokens = useAppDesignTokens();
-    const sheetRef = React.useRef<GorhomBottomSheet>(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) {
-          onClose?.();
-        }
-      },
-      [onChange, onClose]
-    );
-
-    // Expose ref methods
-    React.useImperativeHandle(ref, () => ({
-      snapToIndex: (index: number) => {
-        sheetRef.current?.snapToIndex(index);
-      },
-      snapToPosition: (position: string | number) => {
-        sheetRef.current?.snapToPosition(position);
-      },
-      expand: () => {
-        sheetRef.current?.expand();
-      },
-      collapse: () => {
-        sheetRef.current?.collapse();
-      },
-      close: () => {
-        sheetRef.current?.close();
-      },
-    }), []);
-
-    // Ensure valid config
-    if (!config.snapPoints || config.snapPoints.length === 0) {
-      return null;
+export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props, ref) => {
+  const {
+    children,
+    preset = 'medium',
+    snapPoints: customSnapPoints,
+    initialIndex,
+    enableBackdrop = true,
+    backdropAppearsOnIndex,
+    backdropDisappearsOnIndex,
+    keyboardBehavior = 'interactive',
+    enableHandleIndicator = true,
+    enablePanDownToClose = true,
+    enableDynamicSizing = false,
+    onChange,
+    onClose,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const sheetRef = useRef<GorhomBottomSheet>(null);
+
+  const config: BottomSheetConfig = useMemo(() => {
+    if (customSnapPoints) {
+      return BottomSheetUtils.createConfig({
+        snapPoints: customSnapPoints,
+        initialIndex,
+        enableBackdrop,
+        backdropAppearsOnIndex,
+        backdropDisappearsOnIndex,
+        keyboardBehavior,
+        enableHandleIndicator,
+        enablePanDownToClose,
+        enableDynamicSizing,
+      });
     }
-
-    return (
-      <GorhomBottomSheet
-        ref={sheetRef}
-        index={-1}
-        snapPoints={config.snapPoints}
-        enableDynamicSizing={config.enableDynamicSizing}
-        backdropComponent={renderBackdrop}
-        keyboardBehavior={config.keyboardBehavior}
-        enableHandlePanningGesture={config.enableHandleIndicator}
-        enablePanDownToClose={config.enablePanDownToClose}
-        onChange={handleSheetChange}
-        backgroundStyle={[
-          styles.background,
-          { backgroundColor: tokens.colors.surface },
-        ]}
-        handleIndicatorStyle={[
-          styles.handleIndicator,
-          { backgroundColor: tokens.colors.border },
-        ]}
-      >
-        <BottomSheetView style={styles.contentContainer}>
-          {children}
-        </BottomSheetView>
-      </GorhomBottomSheet>
-    );
-  }
-);
+    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) onClose?.();
+    },
+    [onChange, onClose]
+  );
+
+  useImperativeHandle(ref, () => ({
+    snapToIndex: (index: number) => sheetRef.current?.snapToIndex(index),
+    snapToPosition: (pos: string | number) => sheetRef.current?.snapToPosition(pos),
+    expand: () => sheetRef.current?.expand(),
+    collapse: () => sheetRef.current?.collapse(),
+    close: () => sheetRef.current?.close(),
+  }));
+
+  if (!config.snapPoints || config.snapPoints.length === 0) return null;
+
+  return (
+    <GorhomBottomSheet
+      ref={sheetRef}
+      index={-1}
+      snapPoints={config.snapPoints}
+      enableDynamicSizing={config.enableDynamicSizing}
+      backdropComponent={renderBackdrop}
+      keyboardBehavior={config.keyboardBehavior}
+      enableHandlePanningGesture={config.enableHandleIndicator}
+      enablePanDownToClose={config.enablePanDownToClose}
+      onChange={handleSheetChange}
+      backgroundStyle={[styles.background, { backgroundColor: tokens.colors.surface }]}
+      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
+    >
+      <BottomSheetView style={styles.contentContainer}>
+        {children}
+      </BottomSheetView>
+    </GorhomBottomSheet>
+  );
+});
 
 BottomSheet.displayName = 'BottomSheet';
 
@@ -278,3 +119,4 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
+

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,
@@ -41,233 +9,101 @@ import {
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import type {
   BottomSheetConfig,
-  BottomSheetPreset,
-  SnapPoint,
-  KeyboardBehavior,
+  BottomSheetModalRef,
+  BottomSheetModalProps,
 } from '../../domain/entities/BottomSheet';
 import { BottomSheetUtils } from '../../domain/entities/BottomSheet';
 
-/**
- * Bottom sheet modal ref methods
- */
-export interface BottomSheetModalRef {
-  present: () => void;
-  dismiss: () => void;
-  snapToIndex: (index: number) => void;
-  snapToPosition: (position: string | number) => void;
-  expand: () => void;
-  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';
 

package/src/presentation/components/SafeBottomSheetModalProvider.tsx

@@ -1,36 +1,11 @@
-/**
- * SafeBottomSheetModalProvider
- *
- * Enhanced BottomSheetModalProvider that ensures Reanimated is fully
- * initialized before rendering. This prevents "containerLayoutState.get
- * is not a function" errors that occur when @gorhom/bottom-sheet's
- * internal hooks access Reanimated's layoutState before it's ready.
- *
- * Usage:
- * ```tsx
- * import { SafeBottomSheetModalProvider } from '@umituz/react-native-bottom-sheet';
- *
- * <SafeBottomSheetModalProvider>
- *   <App />
- * </SafeBottomSheetModalProvider>
- * ```
- */
-
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 interface SafeBottomSheetModalProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-/**
- * SafeBottomSheetModalProvider
- *
- * Wrapper around BottomSheetModalProvider for consistency.
- */
-export const SafeBottomSheetModalProvider: React.FC<SafeBottomSheetModalProviderProps> = ({
-  children,
-}) => {
-  return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
-};
+export const SafeBottomSheetModalProvider = ({ children }: SafeBottomSheetModalProviderProps) => (
+  <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+);
 

package/src/presentation/hooks/useBottomSheet.ts

@@ -1,133 +1,16 @@
-/**
- * useBottomSheet Hook
- *
- * React hook for managing bottom sheet state and interactions.
- * Provides a clean API for common bottom sheet operations.
- *
- * Features:
- * - Open/close bottom sheet
- * - Snap to specific index
- * - Expand to max height
- * - Collapse to min height
- * - Track current position
- * - Preset configurations
- *
- * Usage:
- * ```tsx
- * const { sheetRef, open, close, expand, collapse } = useBottomSheet();
- *
- * return (
- *   <>
- *     <Button onPress={open}>Open Sheet</Button>
- *     <BottomSheet ref={sheetRef} preset="medium">
- *       <Text>Content</Text>
- *     </BottomSheet>
- *   </>
- * );
- * ```
- */
-
 import { useRef, useCallback } from 'react';
-import type { BottomSheetRef } from '../components/BottomSheet';
-
-/**
- * Return type for useBottomSheet hook
- */
-export interface UseBottomSheetReturn {
-  /**
-   * Ref to attach to BottomSheet component
-   */
-  sheetRef: React.RefObject<BottomSheetRef | null>;
-
-  /**
-   * Open bottom sheet to initial index
-   */
-  open: () => void;
-
-  /**
-   * Close bottom sheet completely
-   */
-  close: () => void;
-
-  /**
-   * Expand to maximum height
-   */
-  expand: () => void;
-
-  /**
-   * Collapse to minimum height
-   */
-  collapse: () => void;
-
-  /**
-   * Snap to specific index
-   */
-  snapToIndex: (index: number) => void;
+import type { BottomSheetRef, UseBottomSheetReturn } from '../../domain/entities/BottomSheet';
 
-  /**
-   * Snap to specific position
-   */
-  snapToPosition: (position: string | number) => void;
-}
-
-/**
- * useBottomSheet Hook
- *
- * Hook for managing bottom sheet state and interactions.
- * Provides imperative methods for controlling the sheet.
- */
 export const useBottomSheet = (): UseBottomSheetReturn => {
   const sheetRef = useRef<BottomSheetRef>(null);
 
-  /**
-   * Open bottom sheet to first snap point
-   */
-  const open = useCallback(() => {
-    sheetRef.current?.snapToIndex(0);
-  }, []);
-
-  /**
-   * Close bottom sheet completely
-   */
-  const close = useCallback(() => {
-    sheetRef.current?.close();
-  }, []);
-
-  /**
-   * Expand to maximum height (last snap point)
-   */
-  const expand = useCallback(() => {
-    sheetRef.current?.expand();
-  }, []);
-
-  /**
-   * Collapse to minimum height (first snap point)
-   */
-  const collapse = useCallback(() => {
-    sheetRef.current?.collapse();
-  }, []);
+  const open = useCallback(() => sheetRef.current?.snapToIndex(0), []);
+  const close = useCallback(() => sheetRef.current?.close(), []);
+  const expand = useCallback(() => sheetRef.current?.expand(), []);
+  const collapse = useCallback(() => sheetRef.current?.collapse(), []);
+  const snapToIndex = useCallback((index: number) => sheetRef.current?.snapToIndex(index), []);
+  const snapToPosition = useCallback((pos: string | number) => sheetRef.current?.snapToPosition(pos), []);
 
-  /**
-   * Snap to specific index
-   */
-  const snapToIndex = useCallback((index: number) => {
-    sheetRef.current?.snapToIndex(index);
-  }, []);
-
-  /**
-   * Snap to specific position (percentage or fixed)
-   */
-  const snapToPosition = useCallback((position: string | number) => {
-    sheetRef.current?.snapToPosition(position);
-  }, []);
-
-  return {
-    sheetRef,
-    open,
-    close,
-    expand,
-    collapse,
-    snapToIndex,
-    snapToPosition,
-  };
+  return { sheetRef, open, close, expand, collapse, snapToIndex, snapToPosition };
 };
+

package/src/presentation/hooks/useBottomSheetModal.ts

@@ -1,134 +1,17 @@
-/**
- * useBottomSheetModal Hook
- *
- * React hook for managing bottom sheet modal state and interactions.
- * Provides a clean API for common bottom sheet modal operations.
- *
- * Features:
- * - Present/dismiss bottom sheet modal
- * - Snap to specific index
- * - Expand to max height
- * - Collapse to min height
- * - Track current position
- * - Preset configurations
- *
- * Usage:
- * ```tsx
- * const { modalRef, present, dismiss, expand, collapse } = useBottomSheetModal();
- *
- * return (
- *   <>
- *     <Button onPress={present}>Open Modal</Button>
- *     <BottomSheetModal ref={modalRef} preset="medium">
- *       <Text>Content</Text>
- *     </BottomSheetModal>
- *   </>
- * );
- * ```
- */
-
 import { useRef, useCallback } from 'react';
-import type { BottomSheetModalRef } from '../components/BottomSheetModal';
-
-/**
- * Return type for useBottomSheetModal hook
- */
-export interface UseBottomSheetModalReturn {
-  /**
-   * Ref to attach to BottomSheetModal component
-   */
-  modalRef: React.RefObject<BottomSheetModalRef | null>;
-
-  /**
-   * Present bottom sheet modal
-   */
-  present: () => void;
-
-  /**
-   * Dismiss bottom sheet modal
-   */
-  dismiss: () => void;
-
-  /**
-   * Expand to maximum height
-   */
-  expand: () => void;
-
-  /**
-   * Collapse to minimum height
-   */
-  collapse: () => void;
-
-  /**
-   * Snap to specific index
-   */
-  snapToIndex: (index: number) => void;
+import type { BottomSheetModalRef, UseBottomSheetModalReturn } from '../../domain/entities/BottomSheet';
 
-  /**
-   * Snap to specific position
-   */
-  snapToPosition: (position: string | number) => void;
-}
-
-/**
- * useBottomSheetModal Hook
- *
- * Hook for managing bottom sheet modal state and interactions.
- * Provides imperative methods for controlling the modal.
- */
 export const useBottomSheetModal = (): UseBottomSheetModalReturn => {
   const modalRef = useRef<BottomSheetModalRef>(null);
 
-  /**
-   * Present bottom sheet modal
-   */
-  const present = useCallback(() => {
-    modalRef.current?.present();
-  }, []);
-
-  /**
-   * Dismiss bottom sheet modal
-   */
-  const dismiss = useCallback(() => {
-    modalRef.current?.dismiss();
-  }, []);
-
-  /**
-   * Expand to maximum height (last snap point)
-   */
-  const expand = useCallback(() => {
-    modalRef.current?.expand();
-  }, []);
-
-  /**
-   * Collapse to minimum height (first snap point)
-   */
-  const collapse = useCallback(() => {
-    modalRef.current?.collapse();
-  }, []);
+  const present = useCallback(() => modalRef.current?.present(), []);
+  const dismiss = useCallback(() => modalRef.current?.dismiss(), []);
+  const expand = useCallback(() => modalRef.current?.expand(), []);
+  const collapse = useCallback(() => modalRef.current?.collapse(), []);
+  const snapToIndex = useCallback((index: number) => modalRef.current?.snapToIndex(index), []);
+  const snapToPosition = useCallback((pos: string | number) => modalRef.current?.snapToPosition(pos), []);
 
-  /**
-   * Snap to specific index
-   */
-  const snapToIndex = useCallback((index: number) => {
-    modalRef.current?.snapToIndex(index);
-  }, []);
-
-  /**
-   * Snap to specific position (percentage or fixed)
-   */
-  const snapToPosition = useCallback((position: string | number) => {
-    modalRef.current?.snapToPosition(position);
-  }, []);
-
-  return {
-    modalRef,
-    present,
-    dismiss,
-    expand,
-    collapse,
-    snapToIndex,
-    snapToPosition,
-  };
+  return { modalRef, present, dismiss, expand, collapse, snapToIndex, snapToPosition };
 };
 
+