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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.3.4",
-  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
+  "version": "1.4.0",
+  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, smooth animations, and advanced filtering capabilities",
   "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'"
@@ -16,7 +16,9 @@
     "bottom-sheet",
     "modal",
     "sheet",
-    "overlay"
+    "overlay",
+    "filter",
+    "filtering"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -26,20 +28,30 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4.6.0",
-    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system": "2.0.16",
+    "@umituz/react-native-localization": "latest",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0"
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "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",
+    "@umituz/react-native-localization": "^3.5.25",
+    "@umituz/react-native-storage": "^2.4.5",
+    "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",
     "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^5.6.2",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

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/domain/entities/Filter.ts

@@ -0,0 +1,48 @@
+/**
+ * Domain - Filter Entities
+ */
+
+export interface FilterOption {
+    id: string;
+    label: string;
+    icon?: string;
+    type?: string;
+    count?: number;
+}
+
+export interface FilterCategory {
+    id: string;
+    title: string;
+    options: FilterOption[];
+    multiSelect?: boolean;
+}
+
+export class FilterUtils {
+    static hasActiveFilter(selectedIds: string[], defaultId: string = "all"): boolean {
+        if (selectedIds.length === 0) return false;
+        if (selectedIds.length === 1 && selectedIds[0] === defaultId) return false;
+        return true;
+    }
+
+    static toggleFilter(
+        selectedIds: string[],
+        filterId: string,
+        multiSelect: boolean = false,
+        defaultId: string = "all"
+    ): string[] {
+        if (filterId === defaultId) {
+            return [defaultId];
+        }
+
+        if (multiSelect) {
+            const newIds = selectedIds.filter((id) => id !== defaultId);
+            if (newIds.includes(filterId)) {
+                const filtered = newIds.filter((id) => id !== filterId);
+                return filtered.length === 0 ? [defaultId] : filtered;
+            }
+            return [...newIds, filterId];
+        }
+
+        return [filterId];
+    }
+}

package/src/index.ts

@@ -4,3 +4,9 @@ export * from './presentation/components/SafeBottomSheetModalProvider';
 export * from './presentation/hooks/useBottomSheet';
 export * from './presentation/hooks/useBottomSheetModal';
 export * from './domain/entities/BottomSheet';
+
+// Filter exports
+export * from './domain/entities/Filter';
+export * from './presentation/components/filter/FilterSheet';
+export * from './presentation/components/filter/FilterBottomSheet';
+export * from './presentation/hooks/useListFilters';

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

@@ -9,38 +9,11 @@ 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';
 
-export interface BottomSheetModalRef {
-  present: () => void;
-  dismiss: () => void;
-  snapToIndex: (index: number) => void;
-  snapToPosition: (position: string | number) => void;
-  expand: () => void;
-  collapse: () => void;
-}
-
-export interface BottomSheetModalProps {
-  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;
-  onDismiss?: () => void;
-  backgroundColor?: string;
-}
-
 export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>((props, ref) => {
   const {
     children,
@@ -148,3 +121,4 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
+

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>
+);