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

package/package.json

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

@@ -161,23 +161,22 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     // @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;
+      // 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
-        frameId = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            setIsMounted(true);
+            requestAnimationFrame(() => {
+              setIsMounted(true);
+            });
           });
         });
-      }, 150); // Increased delay to ensure Reanimated is fully initialized
+      }, 300); // Increased delay to 300ms to ensure Reanimated is fully initialized
       
       return () => {
         clearTimeout(timer);
-        if (frameId) {
-          cancelAnimationFrame(frameId);
-        }
       };
     }, []);
 
@@ -185,31 +184,37 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     React.useImperativeHandle(ref, () => ({
       snapToIndex: (index: number) => {
         if (isMounted) {
-          sheetRef.current?.snapToIndex(index);
+        sheetRef.current?.snapToIndex(index);
         }
       },
       snapToPosition: (position: string | number) => {
         if (isMounted) {
-          sheetRef.current?.snapToPosition(position);
+        sheetRef.current?.snapToPosition(position);
         }
       },
       expand: () => {
         if (isMounted) {
-          sheetRef.current?.expand();
+        sheetRef.current?.expand();
         }
       },
       collapse: () => {
         if (isMounted) {
-          sheetRef.current?.collapse();
+        sheetRef.current?.collapse();
         }
       },
       close: () => {
         if (isMounted) {
-          sheetRef.current?.close();
+        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
     const config: BottomSheetConfig = useMemo(() => {
       if (customSnapPoints) {
@@ -265,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

@@ -163,23 +163,22 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
     // @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;
+      // 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
-        frameId = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            setIsMounted(true);
+            requestAnimationFrame(() => {
+              setIsMounted(true);
+            });
           });
         });
-      }, 150); // Increased delay to ensure Reanimated is fully initialized
+      }, 300); // Increased delay to 300ms to ensure Reanimated is fully initialized
       
       return () => {
         clearTimeout(timer);
-        if (frameId) {
-          cancelAnimationFrame(frameId);
-        }
       };
     }, []);
 
@@ -188,35 +187,46 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       present: () => {
         if (isMounted) {
           modalRef.current?.present();
+          // Snap to initial index after presenting
+          const initialIdx = initialIndex ?? config.initialIndex ?? 0;
+          setTimeout(() => {
+            modalRef.current?.snapToIndex(initialIdx);
+          }, 100);
         }
       },
       dismiss: () => {
         if (isMounted) {
-          modalRef.current?.dismiss();
+        modalRef.current?.dismiss();
         }
       },
       snapToIndex: (index: number) => {
         if (isMounted) {
-          modalRef.current?.snapToIndex(index);
+        modalRef.current?.snapToIndex(index);
         }
       },
       snapToPosition: (position: string | number) => {
         if (isMounted) {
-          modalRef.current?.snapToPosition(position);
+        modalRef.current?.snapToPosition(position);
         }
       },
       expand: () => {
         if (isMounted) {
-          modalRef.current?.expand();
+        modalRef.current?.expand();
         }
       },
       collapse: () => {
         if (isMounted) {
-          modalRef.current?.collapse();
+        modalRef.current?.collapse();
         }
       },
     }));
 
+    // 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) {
@@ -272,15 +282,10 @@ 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}
-        index={config.initialIndex ?? 0}
+        index={-1}
         snapPoints={config.snapPoints}
         enableDynamicSizing={config.enableDynamicSizing}
         backdropComponent={renderBackdrop}