@umituz/react-native-bottom-sheet 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/BottomSheet.tsx

@@ -158,12 +158,26 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
 
     // Ensure component is mounted after Reanimated is ready
     // This prevents layoutState.get errors during initial render
+    // @gorhom/bottom-sheet uses useAnimatedDetents which accesses layoutState.get
+    // during initialization, so we need to wait for Reanimated to be fully ready
     useEffect(() => {
-      // Use requestAnimationFrame to ensure Reanimated is initialized
-      const timer = requestAnimationFrame(() => {
-        setIsMounted(true);
-      });
-      return () => cancelAnimationFrame(timer);
+      // Use a longer delay to ensure Reanimated is fully initialized
+      // This is critical because @gorhom/bottom-sheet's internal hooks
+      // access layoutState.get immediately when the component renders
+      const timer = setTimeout(() => {
+        // Use multiple animation frames to ensure Reanimated worklets are ready
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              setIsMounted(true);
+            });
+          });
+        });
+      }, 300); // Increased delay to 300ms to ensure Reanimated is fully initialized
+      
+      return () => {
+        clearTimeout(timer);
+      };
     }, []);
 
     // Expose ref methods
@@ -195,6 +209,12 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       },
     }));
 
+    // Don't compute config or callbacks until mounted to prevent early hook execution
+    // This ensures @gorhom/bottom-sheet's internal hooks don't run before Reanimated is ready
+    if (!isMounted) {
+      return null;
+    }
+
     // Get configuration from preset or custom
     const config: BottomSheetConfig = useMemo(() => {
       if (customSnapPoints) {
@@ -250,11 +270,6 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       [onChange, onClose]
     );
 
-    // Don't render until Reanimated is ready to prevent layoutState errors
-    if (!isMounted) {
-      return null;
-    }
-
     return (
       <GorhomBottomSheet
         ref={sheetRef}

package/src/presentation/components/BottomSheetModal.tsx

@@ -160,12 +160,26 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
 
     // Ensure component is mounted after Reanimated is ready
     // This prevents layoutState.get errors during initial render
+    // @gorhom/bottom-sheet uses useAnimatedDetents which accesses layoutState.get
+    // during initialization, so we need to wait for Reanimated to be fully ready
     useEffect(() => {
-      // Use requestAnimationFrame to ensure Reanimated is initialized
-      const timer = requestAnimationFrame(() => {
-        setIsMounted(true);
-      });
-      return () => cancelAnimationFrame(timer);
+      // Use a longer delay to ensure Reanimated is fully initialized
+      // This is critical because @gorhom/bottom-sheet's internal hooks
+      // access layoutState.get immediately when the component renders
+      const timer = setTimeout(() => {
+        // Use multiple animation frames to ensure Reanimated worklets are ready
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              setIsMounted(true);
+            });
+          });
+        });
+      }, 300); // Increased delay to 300ms to ensure Reanimated is fully initialized
+      
+      return () => {
+        clearTimeout(timer);
+      };
     }, []);
 
     // Expose ref methods
@@ -202,6 +216,12 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       },
     }));
 
+    // Don't compute config or callbacks until mounted to prevent early hook execution
+    // This ensures @gorhom/bottom-sheet's internal hooks don't run before Reanimated is ready
+    if (!isMounted) {
+      return null;
+    }
+
     // Get configuration from preset or custom
     const config: BottomSheetConfig = useMemo(() => {
       if (customSnapPoints) {
@@ -257,11 +277,6 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       [onChange, onDismiss]
     );
 
-    // Don't render until Reanimated is ready to prevent layoutState errors
-    if (!isMounted) {
-      return null;
-    }
-
     return (
       <GorhomBottomSheetModal
         ref={modalRef}