@umituz/react-native-bottom-sheet 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "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/index.ts

@@ -108,3 +108,8 @@ export {
 
 // Re-export BottomSheetModalProvider for convenience
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+// Safe provider that ensures Reanimated is ready before rendering
+export {
+  SafeBottomSheetModalProvider,
+} from './presentation/components/SafeBottomSheetModalProvider';

package/src/presentation/components/BottomSheet.tsx

@@ -156,66 +156,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     const sheetRef = React.useRef<GorhomBottomSheet>(null);
     const [isMounted, setIsMounted] = useState(false);
 
-    // 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 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
-    React.useImperativeHandle(ref, () => ({
-      snapToIndex: (index: number) => {
-        if (isMounted) {
-        sheetRef.current?.snapToIndex(index);
-        }
-      },
-      snapToPosition: (position: string | number) => {
-        if (isMounted) {
-        sheetRef.current?.snapToPosition(position);
-        }
-      },
-      expand: () => {
-        if (isMounted) {
-        sheetRef.current?.expand();
-        }
-      },
-      collapse: () => {
-        if (isMounted) {
-        sheetRef.current?.collapse();
-        }
-      },
-      close: () => {
-        if (isMounted) {
-        sheetRef.current?.close();
-        }
-      },
-    }));
-
-    // 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
+    // Get configuration from preset or custom (must be before useImperativeHandle)
     const config: BottomSheetConfig = useMemo(() => {
       if (customSnapPoints) {
         return BottomSheetUtils.createConfig({
@@ -244,7 +185,31 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       enableDynamicSizing,
     ]);
 
-    // Render backdrop component
+    // 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 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);
+      };
+    }, []);
+
+    // Render backdrop component (must be before early return to maintain hook order)
     const renderBackdrop = useCallback(
       (props: BottomSheetBackdropProps) =>
         enableBackdrop ? (
@@ -259,7 +224,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
     );
 
-    // Handle sheet changes
+    // Handle sheet changes (must be before early return to maintain hook order)
     const handleSheetChange = useCallback(
       (index: number) => {
         onChange?.(index);
@@ -270,6 +235,42 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       [onChange, onClose]
     );
 
+    // Expose ref methods (must be before early return to maintain hook order)
+    React.useImperativeHandle(ref, () => ({
+      snapToIndex: (index: number) => {
+        if (isMounted) {
+          sheetRef.current?.snapToIndex(index);
+        }
+      },
+      snapToPosition: (position: string | number) => {
+        if (isMounted) {
+          sheetRef.current?.snapToPosition(position);
+        }
+      },
+      expand: () => {
+        if (isMounted) {
+          sheetRef.current?.expand();
+        }
+      },
+      collapse: () => {
+        if (isMounted) {
+          sheetRef.current?.collapse();
+        }
+      },
+      close: () => {
+        if (isMounted) {
+          sheetRef.current?.close();
+        }
+      },
+    }));
+
+    // 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 (
       <GorhomBottomSheet
         ref={sheetRef}

package/src/presentation/components/BottomSheetModal.tsx

@@ -211,7 +211,33 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       };
     }, []);
 
-    // Expose ref methods
+    // 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) {
+          onDismiss?.();
+        }
+      },
+      [onChange, onDismiss]
+    );
+
+    // Expose ref methods (must be before early return to maintain hook order)
     React.useImperativeHandle(ref, () => ({
       present: () => {
         if (isMounted && modalRef.current) {
@@ -248,36 +274,11 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
 
     // 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;
     }
 
-    // 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}

package/src/presentation/components/SafeBottomSheetModalProvider.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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, { useState, useEffect } from 'react';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+interface SafeBottomSheetModalProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * SafeBottomSheetModalProvider
+ *
+ * Delays rendering of BottomSheetModalProvider until Reanimated is ready.
+ * This prevents layoutState.get errors during initial render.
+ */
+export const SafeBottomSheetModalProvider: React.FC<SafeBottomSheetModalProviderProps> = ({
+  children,
+}) => {
+  const [isReanimatedReady, setIsReanimatedReady] = useState(false);
+
+  useEffect(() => {
+    // Wait for Reanimated to be fully initialized
+    // @gorhom/bottom-sheet uses useAnimatedDetents which accesses layoutState.get
+    // during initialization, so we need to wait for Reanimated to be fully ready
+    const timer = setTimeout(() => {
+      // Use multiple animation frames to ensure Reanimated worklets are ready
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsReanimatedReady(true);
+          });
+        });
+      });
+    }, 300); // Delay to ensure Reanimated is fully initialized
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  // Don't render BottomSheetModalProvider until Reanimated is ready
+  if (!isReanimatedReady) {
+    return <>{children}</>;
+  }
+
+  return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
+};
+