@umituz/react-native-bottom-sheet 1.1.10 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,6 +30,7 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
+    "@umituz/react-native-animation": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-design-system-theme": "*",
     "react": ">=18.2.0",
@@ -42,6 +43,7 @@
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
+    "@umituz/react-native-animation": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "react": "^18.2.0",

package/src/presentation/components/BottomSheet.tsx

@@ -29,7 +29,7 @@
  * ```
  */
 
-import React, { forwardRef, useCallback, useMemo, useEffect, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import GorhomBottomSheet, {
   BottomSheetView,
@@ -37,6 +37,7 @@ import GorhomBottomSheet, {
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useReanimatedReady } from '@umituz/react-native-animation';
 import type {
   BottomSheetConfig,
   BottomSheetPreset,
@@ -154,7 +155,8 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   ) => {
     const tokens = useAppDesignTokens();
     const sheetRef = React.useRef<GorhomBottomSheet>(null);
-    const [isMounted, setIsMounted] = useState(false);
+    // Use centralized Reanimated ready check from animation package
+    const isMounted = useReanimatedReady();
 
     // Get configuration from preset or custom (must be before useImperativeHandle)
     const config: BottomSheetConfig = useMemo(() => {
@@ -185,30 +187,6 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       enableDynamicSizing,
     ]);
 
-    // 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);
-            });
-          });
-        });
-      }, 500); // Increased delay to 500ms 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) =>

package/src/presentation/components/BottomSheetModal.tsx

@@ -30,7 +30,7 @@
  * ```
  */
 
-import React, { forwardRef, useCallback, useMemo, useEffect, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import {
   BottomSheetModal as GorhomBottomSheetModal,
@@ -39,6 +39,7 @@ import {
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useReanimatedReady } from '@umituz/react-native-animation';
 import type {
   BottomSheetConfig,
   BottomSheetPreset,
@@ -156,7 +157,8 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
   ) => {
     const tokens = useAppDesignTokens();
     const modalRef = React.useRef<GorhomBottomSheetModal>(null);
-    const [isMounted, setIsMounted] = useState(false);
+    // Use centralized Reanimated ready check from animation package
+    const isMounted = useReanimatedReady();
 
     // Get configuration from preset or custom (must be before useImperativeHandle)
     const config: BottomSheetConfig = useMemo(() => {
@@ -187,30 +189,6 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       enableDynamicSizing,
     ]);
 
-    // 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);
-            });
-          });
-        });
-      }, 500); // Increased delay to 500ms 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) =>
@@ -242,7 +220,12 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       present: () => {
         if (isMounted && modalRef.current) {
           // @gorhom/bottom-sheet's present() automatically opens from bottom to first snap point
-          modalRef.current.present();
+          // Use requestAnimationFrame to ensure the component is fully ready
+          requestAnimationFrame(() => {
+            if (modalRef.current) {
+              modalRef.current.present();
+            }
+          });
         }
       },
       dismiss: () => {

package/src/presentation/components/SafeBottomSheetModalProvider.tsx

@@ -16,8 +16,9 @@
  * ```
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { useReanimatedReady } from '@umituz/react-native-animation';
 
 interface SafeBottomSheetModalProviderProps {
   children: React.ReactNode;
@@ -32,27 +33,8 @@ interface SafeBottomSheetModalProviderProps {
 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);
-          });
-        });
-      });
-    }, 500); // Delay to ensure Reanimated is fully initialized
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
+  // Use centralized Reanimated ready check from animation package
+  const isReanimatedReady = useReanimatedReady();
 
   // Don't render BottomSheetModalProvider until Reanimated is ready
   if (!isReanimatedReady) {