@umituz/react-native-bottom-sheet 1.2.1 → 1.2.3

package/package.json

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

@@ -155,8 +155,14 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   ) => {
     const tokens = useAppDesignTokens();
     const sheetRef = React.useRef<GorhomBottomSheet>(null);
-    // Use centralized Reanimated ready check from animation package
-    const isMounted = useReanimatedReady();
+    // 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(() => {
@@ -216,36 +222,47 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     // Expose ref methods (must be before early return to maintain hook order)
     React.useImperativeHandle(ref, () => ({
       snapToIndex: (index: number) => {
-        if (isMounted) {
-          sheetRef.current?.snapToIndex(index);
+        if (isReanimatedReady && sheetRef.current) {
+          sheetRef.current.snapToIndex(index);
         }
       },
       snapToPosition: (position: string | number) => {
-        if (isMounted) {
-          sheetRef.current?.snapToPosition(position);
+        if (isReanimatedReady && sheetRef.current) {
+          sheetRef.current.snapToPosition(position);
         }
       },
       expand: () => {
-        if (isMounted) {
-          sheetRef.current?.expand();
+        if (isReanimatedReady && sheetRef.current) {
+          sheetRef.current.expand();
         }
       },
       collapse: () => {
-        if (isMounted) {
-          sheetRef.current?.collapse();
+        if (isReanimatedReady && sheetRef.current) {
+          sheetRef.current.collapse();
         }
       },
       close: () => {
-        if (isMounted) {
-          sheetRef.current?.close();
+        if (isReanimatedReady && sheetRef.current) {
+          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
+    // 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 (!isMounted) {
+    if (!isReanimatedReady) {
+      return null;
+    }
+
+    // Double-check: Ensure we have a valid config before rendering
+    // This prevents errors if snapPoints are invalid
+    if (!config.snapPoints || config.snapPoints.length === 0) {
       return null;
     }