@umituz/react-native-bottom-sheet 1.0.0

package/src/presentation/components/BottomSheet.tsx

@@ -0,0 +1,254 @@
+/**
+ * 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 { StyleSheet } from 'react-native';
+import GorhomBottomSheet, {
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type {
+  BottomSheetConfig,
+  BottomSheetPreset,
+  SnapPoint,
+  KeyboardBehavior,
+} 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();
+
+    // 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) {
+          onClose?.();
+        }
+      },
+      [onChange, onClose]
+    );
+
+    return (
+      <GorhomBottomSheet
+        ref={ref as any}
+        index={config.initialIndex ?? 0}
+        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';
+
+const styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+});

package/src/presentation/hooks/useBottomSheet.ts

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