@umituz/react-native-bottom-sheet 1.1.0 → 1.1.2

package/package.json

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

@@ -29,7 +29,7 @@
  * ```
  */
 
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo, useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import GorhomBottomSheet, {
   BottomSheetView,
@@ -154,23 +154,59 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   ) => {
     const tokens = useAppDesignTokens();
     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 combination of setTimeout and requestAnimationFrame
+      // to ensure Reanimated is fully initialized before rendering
+      let frameId: number;
+      const timer = setTimeout(() => {
+        // Use multiple animation frames to ensure Reanimated worklets are ready
+        frameId = requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsMounted(true);
+          });
+        });
+      }, 150); // Increased delay to ensure Reanimated is fully initialized
+      
+      return () => {
+        clearTimeout(timer);
+        if (frameId) {
+          cancelAnimationFrame(frameId);
+        }
+      };
+    }, []);
 
     // Expose ref methods
     React.useImperativeHandle(ref, () => ({
       snapToIndex: (index: number) => {
-        sheetRef.current?.snapToIndex(index);
+        if (isMounted) {
+          sheetRef.current?.snapToIndex(index);
+        }
       },
       snapToPosition: (position: string | number) => {
-        sheetRef.current?.snapToPosition(position);
+        if (isMounted) {
+          sheetRef.current?.snapToPosition(position);
+        }
       },
       expand: () => {
-        sheetRef.current?.expand();
+        if (isMounted) {
+          sheetRef.current?.expand();
+        }
       },
       collapse: () => {
-        sheetRef.current?.collapse();
+        if (isMounted) {
+          sheetRef.current?.collapse();
+        }
       },
       close: () => {
-        sheetRef.current?.close();
+        if (isMounted) {
+          sheetRef.current?.close();
+        }
       },
     }));
 
@@ -229,6 +265,11 @@ 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

@@ -30,7 +30,7 @@
  * ```
  */
 
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo, useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import {
   BottomSheetModal as GorhomBottomSheetModal,
@@ -156,26 +156,64 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
   ) => {
     const tokens = useAppDesignTokens();
     const modalRef = React.useRef<GorhomBottomSheetModal>(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 combination of setTimeout and requestAnimationFrame
+      // to ensure Reanimated is fully initialized before rendering
+      let frameId: number;
+      const timer = setTimeout(() => {
+        // Use multiple animation frames to ensure Reanimated worklets are ready
+        frameId = requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsMounted(true);
+          });
+        });
+      }, 150); // Increased delay to ensure Reanimated is fully initialized
+      
+      return () => {
+        clearTimeout(timer);
+        if (frameId) {
+          cancelAnimationFrame(frameId);
+        }
+      };
+    }, []);
 
     // Expose ref methods
     React.useImperativeHandle(ref, () => ({
       present: () => {
-        modalRef.current?.present();
+        if (isMounted) {
+          modalRef.current?.present();
+        }
       },
       dismiss: () => {
-        modalRef.current?.dismiss();
+        if (isMounted) {
+          modalRef.current?.dismiss();
+        }
       },
       snapToIndex: (index: number) => {
-        modalRef.current?.snapToIndex(index);
+        if (isMounted) {
+          modalRef.current?.snapToIndex(index);
+        }
       },
       snapToPosition: (position: string | number) => {
-        modalRef.current?.snapToPosition(position);
+        if (isMounted) {
+          modalRef.current?.snapToPosition(position);
+        }
       },
       expand: () => {
-        modalRef.current?.expand();
+        if (isMounted) {
+          modalRef.current?.expand();
+        }
       },
       collapse: () => {
-        modalRef.current?.collapse();
+        if (isMounted) {
+          modalRef.current?.collapse();
+        }
       },
     }));
 
@@ -234,6 +272,11 @@ 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}