@umituz/react-native-bottom-sheet 1.2.2 → 1.2.4

package/package.json

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

@@ -155,11 +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
-    // CRITICAL: This must be true before GorhomBottomSheet is rendered
+    // 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
-    const isMounted = useReanimatedReady();
+    // 
+    // 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(() => {
@@ -219,38 +222,41 @@ 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();
         }
       },
     }));
 
-    // CRITICAL: Don't render GorhomBottomSheet until Reanimated is fully ready
-    // GorhomBottomSheet's internal hooks (useAnimatedLayout, useAnimatedDetents, etc.)
-    // access Reanimated's containerLayoutState.get during initialization
+    // 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;
     }
 

package/src/presentation/components/BottomSheetModal.tsx

@@ -218,14 +218,11 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
     // Expose ref methods (must be before early return to maintain hook order)
     React.useImperativeHandle(ref, () => ({
       present: () => {
+        // @gorhom/bottom-sheet's present() automatically opens from bottom to first snap point
+        // useReanimatedReady() ensures GorhomBottomSheetModal is only rendered when Reanimated is ready
+        // So we can safely call present() without additional delays
         if (isMounted && modalRef.current) {
-          // @gorhom/bottom-sheet's present() automatically opens from bottom to first snap point
-          // Use requestAnimationFrame to ensure the component is fully ready
-          requestAnimationFrame(() => {
-            if (modalRef.current) {
-              modalRef.current.present();
-            }
-          });
+          modalRef.current.present();
         }
       },
       dismiss: () => {