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

package/package.json

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

@@ -158,6 +158,35 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
     const modalRef = React.useRef<GorhomBottomSheetModal>(null);
     const [isMounted, setIsMounted] = useState(false);
 
+    // Get configuration from preset or custom (must be before useImperativeHandle)
+    const config: BottomSheetConfig = useMemo(() => {
+      if (customSnapPoints) {
+        return BottomSheetUtils.createConfig({
+          snapPoints: customSnapPoints,
+          initialIndex,
+          enableBackdrop,
+          backdropAppearsOnIndex,
+          backdropDisappearsOnIndex,
+          keyboardBehavior,
+          enableHandleIndicator,
+          enablePanDownToClose,
+          enableDynamicSizing,
+        });
+      }
+      return BottomSheetUtils.getPreset(preset);
+    }, [
+      preset,
+      customSnapPoints,
+      initialIndex,
+      enableBackdrop,
+      backdropAppearsOnIndex,
+      backdropDisappearsOnIndex,
+      keyboardBehavior,
+      enableHandleIndicator,
+      enablePanDownToClose,
+      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
@@ -182,16 +211,38 @@ 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?.present();
-          // Snap to initial index after presenting
-          const initialIdx = initialIndex ?? config.initialIndex ?? 0;
-          setTimeout(() => {
-            modalRef.current?.snapToIndex(initialIdx);
-          }, 100);
+        if (isMounted && modalRef.current) {
+          // @gorhom/bottom-sheet's present() automatically opens from bottom to first snap point
+          modalRef.current.present();
         }
       },
       dismiss: () => {
@@ -223,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}