@umituz/react-native-bottom-sheet 1.1.6 → 1.1.7

package/package.json

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

@@ -211,7 +211,33 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       };
     }, []);
 
-    // Expose ref methods
+    // Render backdrop component (must be before early return to maintain hook order)
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) =>
+        enableBackdrop ? (
+          <BottomSheetBackdrop
+            {...props}
+            appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
+            disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
+            opacity={0.5}
+            pressBehavior="close"
+          />
+        ) : null,
+      [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
+    );
+
+    // Handle sheet changes (must be before early return to maintain hook order)
+    const handleSheetChange = useCallback(
+      (index: number) => {
+        onChange?.(index);
+        if (index === -1) {
+          onDismiss?.();
+        }
+      },
+      [onChange, onDismiss]
+    );
+
+    // Expose ref methods (must be before early return to maintain hook order)
     React.useImperativeHandle(ref, () => ({
       present: () => {
         if (isMounted && modalRef.current) {
@@ -248,36 +274,11 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
 
     // 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
+    // IMPORTANT: All hooks must be called before this early return to maintain hook order
     if (!isMounted) {
       return null;
     }
 
-    // Render backdrop component
-    const renderBackdrop = useCallback(
-      (props: BottomSheetBackdropProps) =>
-        enableBackdrop ? (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
-            disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
-            opacity={0.5}
-            pressBehavior="close"
-          />
-        ) : null,
-      [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
-    );
-
-    // Handle sheet changes
-    const handleSheetChange = useCallback(
-      (index: number) => {
-        onChange?.(index);
-        if (index === -1) {
-          onDismiss?.();
-        }
-      },
-      [onChange, onDismiss]
-    );
-
     return (
       <GorhomBottomSheetModal
         ref={modalRef}