@umituz/react-native-bottom-sheet 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -22,7 +22,7 @@
     "reanimated",
     "gesture-handler"
   ],
-  "author": "\u00dcmit UZ <umit@umituz.com>",
+  "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
     "@umituz/react-native-design-system": "latest",
@@ -47,7 +48,8 @@
     "react-native": "^0.74.0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-reanimated": "^3.10.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "zustand": "^5.0.8"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -90,9 +90,21 @@ export {
   type BottomSheetProps,
   type BottomSheetRef,
 } from './presentation/components/BottomSheet';
+export {
+  BottomSheetModal,
+  type BottomSheetModalProps,
+  type BottomSheetModalRef,
+} from './presentation/components/BottomSheetModal';
 
 // Presentation Hooks
 export {
   useBottomSheet,
   type UseBottomSheetReturn,
 } from './presentation/hooks/useBottomSheet';
+export {
+  useBottomSheetModal,
+  type UseBottomSheetModalReturn,
+} from './presentation/hooks/useBottomSheetModal';
+
+// Re-export BottomSheetModalProvider for convenience
+export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';

package/src/presentation/components/BottomSheet.tsx

@@ -56,6 +56,7 @@ export interface BottomSheetRef {
   close: () => void;
 }
 
+
 /**
  * Bottom sheet component props
  */
@@ -152,6 +153,26 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     ref
   ) => {
     const tokens = useAppDesignTokens();
+    const sheetRef = React.useRef<GorhomBottomSheet>(null);
+
+    // 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();
+      },
+    }));
 
     // Get configuration from preset or custom
     const config: BottomSheetConfig = useMemo(() => {
@@ -210,8 +231,8 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
 
     return (
       <GorhomBottomSheet
-        ref={ref as any}
-        index={config.initialIndex ?? 0}
+        ref={sheetRef}
+        index={-1}
         snapPoints={config.snapPoints}
         enableDynamicSizing={config.enableDynamicSizing}
         backdropComponent={renderBackdrop}

package/src/presentation/components/BottomSheetModal.tsx

@@ -0,0 +1,282 @@
+/**
+ * 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 { StyleSheet } from 'react-native';
+import {
+  BottomSheetModal as GorhomBottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import type {
+  BottomSheetConfig,
+  BottomSheetPreset,
+  SnapPoint,
+  KeyboardBehavior,
+} 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;
+}
+
+/**
+ * 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,
+    },
+    ref
+  ) => {
+    const tokens = useAppDesignTokens();
+    const modalRef = React.useRef<GorhomBottomSheetModal>(null);
+
+    // 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();
+      },
+    }));
+
+    // Get configuration from preset or custom
+    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
+    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
+    const handleSheetChange = useCallback(
+      (index: number) => {
+        onChange?.(index);
+        if (index === -1) {
+          onDismiss?.();
+        }
+      },
+      [onChange, onDismiss]
+    );
+
+    return (
+      <GorhomBottomSheetModal
+        ref={modalRef}
+        index={config.initialIndex ?? 0}
+        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: tokens.colors.surface },
+        ]}
+        handleIndicatorStyle={[
+          styles.handleIndicator,
+          { backgroundColor: tokens.colors.border },
+        ]}
+      >
+        <BottomSheetView style={styles.contentContainer}>
+          {children}
+        </BottomSheetView>
+      </GorhomBottomSheetModal>
+    );
+  }
+);
+
+BottomSheetModal.displayName = 'BottomSheetModal';
+
+const styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+});
+

package/src/presentation/hooks/useBottomSheetModal.ts

@@ -0,0 +1,134 @@
+/**
+ * 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>;
+
+  /**
+   * 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;
+
+  /**
+   * 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();
+  }, []);
+
+  /**
+   * 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,
+  };
+};
+