@umituz/react-native-bottom-sheet 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,7 +30,6 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
-    "@umituz/react-native-animation": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-design-system-theme": "*",
     "react": ">=18.2.0",
@@ -43,7 +42,6 @@
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
-    "@umituz/react-native-animation": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "react": "^18.2.0",

package/src/presentation/components/BottomSheet.tsx

@@ -37,7 +37,6 @@ import GorhomBottomSheet, {
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { useReanimatedReady } from '@umituz/react-native-animation';
 import type {
   BottomSheetConfig,
   BottomSheetPreset,
@@ -155,14 +154,6 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   ) => {
     const tokens = useAppDesignTokens();
     const sheetRef = React.useRef<GorhomBottomSheet>(null);
-    // CRITICAL: Use centralized Reanimated ready check from animation package
-    // This must be true before GorhomBottomSheet is rendered
-    // Otherwise, internal hooks (useAnimatedLayout) will access containerLayoutState.get
-    // before Reanimated is ready, causing "containerLayoutState.get is not a function" errors
-    // 
-    // MINIMAL FIX: Don't render GorhomBottomSheet at all until Reanimated is ready
-    // This prevents internal hooks from running before Reanimated is initialized
-    const isReanimatedReady = useReanimatedReady();
 
     // Get configuration from preset or custom (must be before useImperativeHandle)
     const config: BottomSheetConfig = useMemo(() => {
@@ -219,49 +210,26 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       [onChange, onClose]
     );
 
-    // Expose ref methods (must be before early return to maintain hook order)
+    // Expose ref methods
     React.useImperativeHandle(ref, () => ({
       snapToIndex: (index: number) => {
-        if (isReanimatedReady && sheetRef.current) {
-          sheetRef.current.snapToIndex(index);
-        }
+        sheetRef.current?.snapToIndex(index);
       },
       snapToPosition: (position: string | number) => {
-        if (isReanimatedReady && sheetRef.current) {
-          sheetRef.current.snapToPosition(position);
-        }
+        sheetRef.current?.snapToPosition(position);
       },
       expand: () => {
-        if (isReanimatedReady && sheetRef.current) {
-          sheetRef.current.expand();
-        }
+        sheetRef.current?.expand();
       },
       collapse: () => {
-        if (isReanimatedReady && sheetRef.current) {
-          sheetRef.current.collapse();
-        }
+        sheetRef.current?.collapse();
       },
       close: () => {
-        if (isReanimatedReady && sheetRef.current) {
-          sheetRef.current.close();
-        }
+        sheetRef.current?.close();
       },
-    }));
-
-    // MINIMAL FIX: Don't render GorhomBottomSheet at all until Reanimated is fully ready
-    // This is the root cause fix - if we don't render GorhomBottomSheet, its internal hooks
-    // (useAnimatedLayout, useAnimatedDetents, etc.) won't run, preventing the error
-    // 
-    // GorhomBottomSheet's internal hooks access Reanimated's containerLayoutState.get during initialization
-    // If we render before Reanimated is ready, we get "containerLayoutState.get is not a function" errors
-    // 
-    // IMPORTANT: All hooks must be called before this early return to maintain hook order
-    if (!isReanimatedReady) {
-      return null;
-    }
+    }), []);
 
-    // Double-check: Ensure we have a valid config before rendering
-    // This prevents errors if snapPoints are invalid
+    // Ensure valid config
     if (!config.snapPoints || config.snapPoints.length === 0) {
       return null;
     }

package/src/presentation/components/BottomSheetModal.tsx

@@ -39,7 +39,6 @@ import {
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { useReanimatedReady } from '@umituz/react-native-animation';
 import type {
   BottomSheetConfig,
   BottomSheetPreset,
@@ -157,8 +156,6 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
   ) => {
     const tokens = useAppDesignTokens();
     const modalRef = React.useRef<GorhomBottomSheetModal>(null);
-    // Use centralized Reanimated ready check from animation package
-    const isMounted = useReanimatedReady();
 
     // Get configuration from preset or custom (must be before useImperativeHandle)
     const config: BottomSheetConfig = useMemo(() => {
@@ -215,49 +212,27 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       [onChange, onDismiss]
     );
 
-    // Expose ref methods (must be before early return to maintain hook order)
+    // Expose ref methods
     React.useImperativeHandle(ref, () => ({
       present: () => {
-        // @gorhom/bottom-sheet's present() automatically opens from bottom to first snap point
-        // useReanimatedReady() ensures GorhomBottomSheetModal is only rendered when Reanimated is ready
-        // So we can safely call present() without additional delays
-        if (isMounted && modalRef.current) {
-          modalRef.current.present();
-        }
+        modalRef.current?.present();
       },
       dismiss: () => {
-        if (isMounted) {
         modalRef.current?.dismiss();
-        }
       },
       snapToIndex: (index: number) => {
-        if (isMounted) {
         modalRef.current?.snapToIndex(index);
-        }
       },
       snapToPosition: (position: string | number) => {
-        if (isMounted) {
         modalRef.current?.snapToPosition(position);
-        }
       },
       expand: () => {
-        if (isMounted) {
         modalRef.current?.expand();
-        }
       },
       collapse: () => {
-        if (isMounted) {
         modalRef.current?.collapse();
-        }
       },
-    }));
-
-    // Don't render until mounted to prevent early hook execution
-    // This ensures @gorhom/bottom-sheet's internal hooks don't run before Reanimated is ready
-    // IMPORTANT: All hooks must be called before this early return to maintain hook order
-    if (!isMounted) {
-      return null;
-    }
+    }), []);
 
     return (
       <GorhomBottomSheetModal

package/src/presentation/components/SafeBottomSheetModalProvider.tsx

@@ -18,7 +18,6 @@
 
 import React from 'react';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import { useReanimatedReady } from '@umituz/react-native-animation';
 
 interface SafeBottomSheetModalProviderProps {
   children: React.ReactNode;
@@ -27,20 +26,11 @@ interface SafeBottomSheetModalProviderProps {
 /**
  * SafeBottomSheetModalProvider
  *
- * Delays rendering of BottomSheetModalProvider until Reanimated is ready.
- * This prevents layoutState.get errors during initial render.
+ * Wrapper around BottomSheetModalProvider for consistency.
  */
 export const SafeBottomSheetModalProvider: React.FC<SafeBottomSheetModalProviderProps> = ({
   children,
 }) => {
-  // Use centralized Reanimated ready check from animation package
-  const isReanimatedReady = useReanimatedReady();
-
-  // Don't render BottomSheetModalProvider until Reanimated is ready
-  if (!isReanimatedReady) {
-    return <>{children}</>;
-  }
-
   return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
 };
 

package/src/presentation/hooks/useBottomSheet.ts

@@ -37,7 +37,7 @@ export interface UseBottomSheetReturn {
   /**
    * Ref to attach to BottomSheet component
    */
-  sheetRef: React.RefObject<BottomSheetRef>;
+  sheetRef: React.RefObject<BottomSheetRef | null>;
 
   /**
    * Open bottom sheet to initial index

package/src/presentation/hooks/useBottomSheetModal.ts

@@ -37,7 +37,7 @@ export interface UseBottomSheetModalReturn {
   /**
    * Ref to attach to BottomSheetModal component
    */
-  modalRef: React.RefObject<BottomSheetModalRef>;
+  modalRef: React.RefObject<BottomSheetModalRef | null>;
 
   /**
    * Present bottom sheet modal