react-native-bottom-sheet-stack 1.0.2 → 1.0.3

package/lib/commonjs/useScaleAnimation.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScaleAnimatedStyle = useScaleAnimatedStyle;
+exports.useScaleDepth = useScaleDepth;
+var _compilerRuntime = require("react/compiler-runtime");
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _bottomSheet = require("./bottomSheet.store");
+const DEFAULT_CONFIG = {
+  scale: 0.92,
+  translateY: 10,
+  borderRadius: 12,
+  duration: 300
+};
+
+/**
+ * Returns the number of sheets with scaleBackground above a given element.
+ * For background wrapper, pass undefined as sheetId - returns 0 or 1 (binary).
+ * For sheets, returns the count of scaleBackground sheets above it.
+ * Uses shallow comparison internally for optimal re-renders.
+ */
+function useScaleDepth(groupId, sheetId) {
+  const $ = (0, _compilerRuntime.c)(3);
+  const prevDepthRef = (0, _react.useRef)(0);
+  let t0;
+  if ($[0] !== groupId || $[1] !== sheetId) {
+    t0 = state => {
+      const {
+        stackOrder,
+        sheetsById
+      } = state;
+      const startIndex = sheetId ? stackOrder.indexOf(sheetId) + 1 : 0;
+      if (sheetId && startIndex === 0) {
+        return prevDepthRef.current;
+      }
+      let depth = 0;
+      for (let i = startIndex; i < stackOrder.length; i++) {
+        const id = stackOrder[i];
+        const sheet = sheetsById[id];
+        if (sheet && sheet.groupId === groupId && sheet.scaleBackground && sheet.status !== "closing") {
+          depth++;
+          if (!sheetId) {
+            break;
+          }
+        }
+      }
+      prevDepthRef.current = depth;
+      return depth;
+    };
+    $[0] = groupId;
+    $[1] = sheetId;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const scaleDepthSelector = t0;
+  return (0, _bottomSheet.useBottomSheetStore)(scaleDepthSelector);
+}
+
+/**
+ * Returns animated style for scale effect based on depth.
+ * Uses power scaling: scale^depth for cascading effect.
+ */
+function useScaleAnimatedStyle(depth, config) {
+  const {
+    scale: t0,
+    translateY: t1,
+    borderRadius: t2,
+    duration: t3
+  } = config ?? {};
+  const scale = t0 === undefined ? DEFAULT_CONFIG.scale : t0;
+  const translateY = t1 === undefined ? DEFAULT_CONFIG.translateY : t1;
+  const borderRadius = t2 === undefined ? DEFAULT_CONFIG.borderRadius : t2;
+  const duration = t3 === undefined ? DEFAULT_CONFIG.duration : t3;
+  const progress = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withTiming)(depth, {
+    duration
+  }));
+  return (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const p = progress.value;
+    if (p === 0) {
+      return {
+        transform: [{
+          scale: 1
+        }, {
+          translateY: 0
+        }],
+        borderRadius: 0,
+        overflow: "visible"
+      };
+    }
+    const currentScale = Math.pow(scale, p);
+    const currentTranslateY = translateY * p;
+    const currentBorderRadius = Math.min(borderRadius * p, borderRadius);
+    return {
+      transform: [{
+        scale: currentScale
+      }, {
+        translateY: currentTranslateY
+      }],
+      borderRadius: currentBorderRadius,
+      overflow: "hidden"
+    };
+  });
+}
+//# sourceMappingURL=useScaleAnimation.js.map

package/lib/commonjs/useScaleAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","_bottomSheet","DEFAULT_CONFIG","scale","translateY","borderRadius","duration","useScaleDepth","groupId","sheetId","$","_compilerRuntime","c","prevDepthRef","useRef","t0","state","stackOrder","sheetsById","startIndex","indexOf","current","depth","i","length","id","sheet","scaleBackground","status","scaleDepthSelector","useBottomSheetStore","useScaleAnimatedStyle","config","t1","t2","t3","undefined","progress","useDerivedValue","withTiming","useAnimatedStyle","p","value","transform","overflow","currentScale","Math","pow","currentTranslateY","currentBorderRadius","min"],"sourceRoot":"../../src","sources":["useScaleAnimation.ts"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAF,OAAA;AAgBA,MAAMG,cAAqC,GAAG;EAC5CC,KAAK,EAAE,IAAI;EACXC,UAAU,EAAE,EAAE;EACdC,YAAY,EAAE,EAAE;EAChBC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACO,SAAAC,cAAAC,OAAA,EAAAC,OAAA;EAAA,MAAAC,CAAA,OAAAC,gBAAA,CAAAC,CAAA;EACL,MAAAC,YAAA,GAAqB,IAAAC,aAAM,EAAC,CAAC,CAAC;EAAC,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAAF,OAAA,IAAAE,CAAA,QAAAD,OAAA;IAEJM,EAAA,GAAAC,KAAA;MACzB;QAAAC,UAAA;QAAAC;MAAA,IAAmCF,KAAK;MAIxC,MAAAG,UAAA,GAAmBV,OAAO,GAAGQ,UAAU,CAAAG,OAAQ,CAACX,OAAO,CAAC,GAAG,CAAK,GAA7C,CAA6C;MAEhE,IAAIA,OAA2B,IAAhBU,UAAU,KAAK,CAAC;QAAA,OAEtBN,YAAY,CAAAQ,OAAQ;MAAA;MAG7B,IAAAC,KAAA,GAAY,CAAC;MACb,SAAAC,CAAA,GAAaJ,UAAU,EAAEI,CAAC,GAAGN,UAAU,CAAAO,MAgBtC,EAhB+CD,CAAC,EAAE;QACjD,MAAAE,EAAA,GAAWR,UAAU,CAACM,CAAC,CAAC;QACxB,MAAAG,KAAA,GAAcR,UAAU,CAACO,EAAE,CAAC;QAC5B,IACEC,KACyB,IAAzBA,KAAK,CAAAlB,OAAQ,KAAKA,OACG,IAArBkB,KAAK,CAAAC,eACqB,IAA1BD,KAAK,CAAAE,MAAO,KAAK,SAAS;UAE1BN,KAAK,EAAE;UAGP,IAAI,CAACb,OAAO;YACV;UAAM;QACP;MACF;MAGHI,YAAY,CAAAQ,OAAA,GAAWC,KAAH;MAAA,OACbA,KAAK;IAAA,CACb;IAAAZ,CAAA,MAAAF,OAAA;IAAAE,CAAA,MAAAD,OAAA;IAAAC,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAjCD,MAAAmB,kBAAA,GAA2Bd,EAiC1B;EAAC,OAEK,IAAAe,gCAAmB,EAACD,kBAAkB,CAAC;AAAA;;AAGhD;AACA;AACA;AACA;AACO,SAAAE,sBAAAT,KAAA,EAAAU,MAAA;EACL;IAAA7B,KAAA,EAAAY,EAAA;IAAAX,UAAA,EAAA6B,EAAA;IAAA5B,YAAA,EAAA6B,EAAA;IAAA5B,QAAA,EAAA6B;EAAA,IAKIH,MAAY,IAAZ,CAAW,CAAC;EAJd,MAAA7B,KAAA,GAAAY,EAA4B,KAA5BqB,SAA4B,GAApBlC,cAAc,CAAAC,KAAM,GAA5BY,EAA4B;EAC5B,MAAAX,UAAA,GAAA6B,EAAsC,KAAtCG,SAAsC,GAAzBlC,cAAc,CAAAE,UAAW,GAAtC6B,EAAsC;EACtC,MAAA5B,YAAA,GAAA6B,EAA0C,KAA1CE,SAA0C,GAA3BlC,cAAc,CAAAG,YAAa,GAA1C6B,EAA0C;EAC1C,MAAA5B,QAAA,GAAA6B,EAAkC,KAAlCC,SAAkC,GAAvBlC,cAAc,CAAAI,QAAS,GAAlC6B,EAAkC;EAGpC,MAAAE,QAAA,GAAiB,IAAAC,sCAAe,EAAC,MACxB,IAAAC,iCAAU,EAACjB,KAAK,EAAE;IAAAhB;EAAW,CAAC,CACtC,CAAC;EAAC,OAEI,IAAAkC,uCAAgB,EAAC;IACtB,MAAAC,CAAA,GAAUJ,QAAQ,CAAAK,KAAM;IAExB,IAAID,CAAC,KAAK,CAAC;MAAA,OACF;QAAAE,SAAA,EACM,CAAC;UAAAxC,KAAA,EAAS;QAAE,CAAC,EAAE;UAAAC,UAAA,EAAc;QAAE,CAAC,CAAC;QAAAC,YAAA,EAC9B,CAAC;QAAAuC,QAAA,EACL;MACZ,CAAC;IAAA;IAGH,MAAAC,YAAA,GAAqBC,IAAI,CAAAC,GAAI,CAAC5C,KAAK,EAAEsC,CAAC,CAAC;IACvC,MAAAO,iBAAA,GAA0B5C,UAAU,GAAGqC,CAAC;IACxC,MAAAQ,mBAAA,GAA4BH,IAAI,CAAAI,GAAI,CAAC7C,YAAY,GAAGoC,CAAC,EAAEpC,YAAY,CAAC;IAAC,OAE9D;MAAAsC,SAAA,EACM,CAAC;QAAAxC,KAAA,EAAS0C;MAAa,CAAC,EAAE;QAAAzC,UAAA,EAAc4C;MAAkB,CAAC,CAAC;MAAA3C,YAAA,EACzD4C,mBAAmB;MAAAL,QAAA,EACvB;IACZ,CAAC;EAAA,CACF,CAAC;AAAA","ignoreList":[]}

package/lib/typescript/example/src/App.d.ts

@@ -1,4 +1,2 @@
-import { type PropsWithChildren } from 'react';
 export default function App(): import("react/jsx-runtime").JSX.Element;
-export declare const Content: ({}: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=App.d.ts.map

package/lib/typescript/example/src/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../example/src/App.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAa3D,MAAM,CAAC,OAAO,UAAU,GAAG,4CAiB1B;AAmBD,eAAO,MAAM,OAAO,GAAI,IAAI,iBAAiB,4CAU5C,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../example/src/App.tsx"],"names":[],"mappings":"AAwBA,MAAM,CAAC,OAAO,UAAU,GAAG,4CAgB1B"}

package/lib/typescript/src/BottomSheetBackdrop.d.ts

@@ -0,0 +1,12 @@
+interface BottomSheetBackdropProps {
+    sheetId: string;
+    onPress?: () => void;
+}
+/**
+ * Custom backdrop component rendered separately from the scaled sheet content.
+ * This ensures the backdrop doesn't scale with the sheet.
+ * Opacity is interpolated from the bottom sheet's animatedIndex for smooth animation.
+ */
+export declare function BottomSheetBackdrop({ sheetId, onPress, }: BottomSheetBackdropProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BottomSheetBackdrop.d.ts.map

package/lib/typescript/src/BottomSheetBackdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetBackdrop.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetBackdrop.tsx"],"names":[],"mappings":"AASA,UAAU,wBAAwB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,GACR,EAAE,wBAAwB,2CA6B1B"}

package/lib/typescript/src/BottomSheetHost.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 declare function BottomSheetHostComp(): import("react/jsx-runtime").JSX.Element;
-export declare const BottomSheetHost: React.MemoExoticComponent<typeof BottomSheetHostComp>;
+export declare const BottomSheetHost: typeof BottomSheetHostComp;
 export {};
 //# sourceMappingURL=BottomSheetHost.d.ts.map

package/lib/typescript/src/BottomSheetHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetHost.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAUlD,iBAAS,mBAAmB,4CA0B3B;AAsCD,eAAO,MAAM,eAAe,uDAAkC,CAAC"}
+{"version":3,"file":"BottomSheetHost.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetHost.tsx"],"names":[],"mappings":"AAkBA,iBAAS,mBAAmB,4CA+B3B;AA4DD,eAAO,MAAM,eAAe,4BAAsB,CAAC"}

package/lib/typescript/src/BottomSheetManaged.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetManaged.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManaged.tsx"],"names":[],"mappings":"AAAA,OAA4B,EAI1B,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,MAAM,WAAW,cAAe,SAAQ,kBAAkB;CAAG;AAE7D,UAAU,uBAAwB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,kBAAkB,gGAuE9B,CAAC"}
+{"version":3,"file":"BottomSheetManaged.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManaged.tsx"],"names":[],"mappings":"AAAA,OAA4B,EAE1B,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,cAAe,SAAQ,kBAAkB;CAAG;AAE7D,UAAU,uBAAwB,SAAQ,gBAAgB;CAAG;AAK7D,eAAO,MAAM,kBAAkB,gGA8D9B,CAAC"}

package/lib/typescript/src/BottomSheetManager.context.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { ScaleConfig } from './useScaleAnimation';
 export interface BottomSheetManagerContextValue {
     groupId: string;
+    scaleConfig?: ScaleConfig;
 }
 export declare const BottomSheetManagerContext: React.Context<BottomSheetManagerContextValue | null>;
 //# sourceMappingURL=BottomSheetManager.context.d.ts.map

package/lib/typescript/src/BottomSheetManager.context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetManager.context.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,yBAAyB,sDAC4B,CAAC"}
+{"version":3,"file":"BottomSheetManager.context.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,yBAAyB,sDAC4B,CAAC"}

package/lib/typescript/src/BottomSheetManager.provider.d.ts

@@ -1,10 +1,11 @@
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type BottomSheetManagerContextValue } from './BottomSheetManager.context';
+import type { ScaleConfig } from './useScaleAnimation';
 interface ProviderProps extends PropsWithChildren {
     id: string;
+    scaleConfig?: ScaleConfig;
 }
-declare function BottomSheetManagerProviderComp({ id, children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare const BottomSheetManagerProvider: React.MemoExoticComponent<typeof BottomSheetManagerProviderComp>;
+export declare function BottomSheetManagerProvider({ id, scaleConfig, children, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare const useBottomSheetManagerContext: () => BottomSheetManagerContextValue;
 export declare const useMaybeBottomSheetManagerContext: () => BottomSheetManagerContextValue | null;
 export {};

package/lib/typescript/src/BottomSheetManager.provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetManager.provider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,8BAA8B,CAAC;AAEtC,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,iBAAS,8BAA8B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAMtE;AAED,eAAO,MAAM,0BAA0B,kEAEtC,CAAC;AAEF,eAAO,MAAM,4BAA4B,QACnC,8BASH,CAAC;AAEJ,eAAO,MAAM,iCAAiC,QACxC,8BAA8B,GAAG,IAOpC,CAAC"}
+{"version":3,"file":"BottomSheetManager.provider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.provider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,EAAE,EACF,WAAW,EACX,QAAQ,GACT,EAAE,aAAa,2CAQf;AAED,eAAO,MAAM,4BAA4B,QACnC,8BASH,CAAC;AAEJ,eAAO,MAAM,iCAAiC,QACxC,8BAA8B,GAAG,IAOpC,CAAC"}

package/lib/typescript/src/BottomSheetScaleView.d.ts

@@ -0,0 +1,18 @@
+import { type PropsWithChildren } from 'react';
+/**
+ * Wraps your app content with iOS-style scale animation when a bottom sheet
+ * with scaleBackground: true is open. Place your main content inside this
+ * component, but keep BottomSheetHost outside of it.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetManagerProvider id="default" scaleConfig={{ scale: 0.92 }}>
+ *   <BottomSheetScaleView>
+ *     <MainContent />
+ *   </BottomSheetScaleView>
+ *   <BottomSheetHost />
+ * </BottomSheetManagerProvider>
+ * ```
+ */
+export declare function BottomSheetScaleView({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomSheetScaleView.d.ts.map

package/lib/typescript/src/BottomSheetScaleView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetScaleView.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetScaleView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM3D;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAanE"}

package/lib/typescript/src/animatedRegistry.d.ts

@@ -0,0 +1,4 @@
+import { type SharedValue } from 'react-native-reanimated';
+export declare function getAnimatedIndex(sheetId: string): SharedValue<number>;
+export declare function cleanupAnimatedIndex(sheetId: string): void;
+//# sourceMappingURL=animatedRegistry.d.ts.map

package/lib/typescript/src/animatedRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animatedRegistry.d.ts","sourceRoot":"","sources":["../../../src/animatedRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQxE,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CASrE;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAE1D"}

package/lib/typescript/src/bottomSheet.store.d.ts

@@ -22,10 +22,11 @@ interface BottomSheetStoreActions {
     finishClosing(id: string): void;
     clearAll(): void;
 }
-export declare const useBottomSheetStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<BottomSheetStoreState & BottomSheetStoreActions>, "subscribe"> & {
+export type BottomSheetStore = BottomSheetStoreState & BottomSheetStoreActions;
+export declare const useBottomSheetStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<BottomSheetStore>, "subscribe"> & {
     subscribe: {
-        (listener: (selectedState: BottomSheetStoreState & BottomSheetStoreActions, previousSelectedState: BottomSheetStoreState & BottomSheetStoreActions) => void): () => void;
-        <U>(selector: (state: BottomSheetStoreState & BottomSheetStoreActions) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+        (listener: (selectedState: BottomSheetStore, previousSelectedState: BottomSheetStore) => void): () => void;
+        <U>(selector: (state: BottomSheetStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
             equalityFn?: ((a: U, b: U) => boolean) | undefined;
             fireImmediately?: boolean;
         } | undefined): () => void;

package/lib/typescript/src/bottomSheet.store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottomSheet.store.d.ts","sourceRoot":"","sources":["../../../src/bottomSheet.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAErD,UAAU,qBAAqB;IAC7B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;EAoI/B,CAAC"}
+{"version":3,"file":"bottomSheet.store.d.ts","sourceRoot":"","sources":["../../../src/bottomSheet.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAErD,UAAU,qBAAqB;IAC7B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,CAAC;AAE/E,eAAO,MAAM,mBAAmB;;;;;;;;EAkI/B,CAAC"}

package/lib/typescript/src/bottomSheetCoordinator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottomSheetCoordinator.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetCoordinator.ts"],"names":[],"mappings":"AAGA,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,cAiCzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM;+BAIpB,MAAM,WAAW,MAAM;;EA8B1D"}
+{"version":3,"file":"bottomSheetCoordinator.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetCoordinator.ts"],"names":[],"mappings":"AAGA,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,cAgCzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM;+BAIpB,MAAM,WAAW,MAAM;;EA8B1D"}

package/lib/typescript/src/index.d.ts

@@ -3,5 +3,6 @@ export { BottomSheetManagerProvider } from './BottomSheetManager.provider';
 export { useBottomSheetManager } from './useBottomSheetManager';
 export { useBottomSheetState } from './useBottomSheetState';
 export { BottomSheetManaged } from './BottomSheetManaged';
-export { ScaleBackgroundWrapper, type ScaleBackgroundConfig, } from './ScaleBackgroundWrapper';
+export { BottomSheetScaleView } from './BottomSheetScaleView';
+export { type ScaleConfig } from './useScaleAnimation';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,sBAAsB,EACtB,KAAK,qBAAqB,GAC3B,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/typescript/src/useBottomSheetManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,qBAAqB;;gBAmEzB,MAAM;+BA7CA,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;;;;;;;;;;;;;CAwDN,CAAC"}
+{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,qBAAqB;;gBA0Db,MAAM;+BArCd,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;;;;;;;;;;;;;CA8CJ,CAAC"}

package/lib/typescript/src/useBottomSheetState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBottomSheetState.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetState.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,wBAAgB,mBAAmB,IAAI;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAyBA"}
+{"version":3,"file":"useBottomSheetState.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetState.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,wBAAgB,mBAAmB,IAAI;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAsBA"}

package/lib/typescript/src/useScaleAnimation.d.ts

@@ -0,0 +1,43 @@
+export interface ScaleConfig {
+    /** Scale factor when sheet is open (default: 0.92) */
+    scale?: number;
+    /** Vertical translation when sheet is open (default: 10) */
+    translateY?: number;
+    /** Border radius when sheet is open (default: 12) */
+    borderRadius?: number;
+    /** Animation duration in ms (default: 300) */
+    duration?: number;
+}
+/**
+ * Returns the number of sheets with scaleBackground above a given element.
+ * For background wrapper, pass undefined as sheetId - returns 0 or 1 (binary).
+ * For sheets, returns the count of scaleBackground sheets above it.
+ * Uses shallow comparison internally for optimal re-renders.
+ */
+export declare function useScaleDepth(groupId: string, sheetId?: string): number;
+/**
+ * Returns animated style for scale effect based on depth.
+ * Uses power scaling: scale^depth for cascading effect.
+ */
+export declare function useScaleAnimatedStyle(depth: number, config?: ScaleConfig): {
+    transform: ({
+        scale: number;
+        translateY?: undefined;
+    } | {
+        translateY: number;
+        scale?: undefined;
+    })[];
+    borderRadius: number;
+    overflow: "visible";
+} | {
+    transform: ({
+        scale: number;
+        translateY?: undefined;
+    } | {
+        translateY: number;
+        scale?: undefined;
+    })[];
+    borderRadius: number;
+    overflow: "hidden";
+};
+//# sourceMappingURL=useScaleAnimation.d.ts.map

package/lib/typescript/src/useScaleAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScaleAnimation.d.ts","sourceRoot":"","sources":["../../../src/useScaleAnimation.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAuCvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;EAiCxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bottom-sheet-stack",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Bottom Sheet Stack Manager",
   "source": "./src/index.tsx",
   "main": "lib/commonjs/index.js",
@@ -38,6 +38,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@babel/cli": "^7.28.6",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
@@ -48,6 +49,7 @@
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
+    "babel-plugin-react-compiler": "^1.0.0",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^9.22.0",
@@ -121,7 +123,12 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
+      [
+        "commonjs",
+        {
+          "configFile": true
+        }
+      ],
       "typescript"
     ]
   },

package/src/BottomSheetBackdrop.tsx

@@ -0,0 +1,61 @@
+import { Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { getAnimatedIndex } from './animatedRegistry';
+import { useBottomSheetStore } from './bottomSheet.store';
+
+interface BottomSheetBackdropProps {
+  sheetId: string;
+  onPress?: () => void;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+/**
+ * Custom backdrop component rendered separately from the scaled sheet content.
+ * This ensures the backdrop doesn't scale with the sheet.
+ * Opacity is interpolated from the bottom sheet's animatedIndex for smooth animation.
+ */
+export function BottomSheetBackdrop({
+  sheetId,
+  onPress,
+}: BottomSheetBackdropProps) {
+  const status = useBottomSheetStore(
+    (state) => state.sheetsById[sheetId]?.status
+  );
+
+  const animatedIndex = getAnimatedIndex(sheetId);
+
+  const isVisible = status === 'opening' || status === 'open';
+
+  const animatedStyle = useAnimatedStyle(() => {
+    // Interpolate opacity based on animatedIndex
+    // -1 = closed, 0+ = open at snap point
+    const opacity = interpolate(
+      animatedIndex.value,
+      [-1, 0],
+      [0, 1],
+      Extrapolation.CLAMP
+    );
+
+    return { opacity };
+  });
+
+  return (
+    <AnimatedPressable
+      style={[styles.backdrop, animatedStyle]}
+      onPress={onPress}
+      pointerEvents={isVisible ? 'auto' : 'none'}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});

package/src/BottomSheetHost.tsx

@@ -1,18 +1,26 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import { shallow } from 'zustand/shallow';
+import { cleanupAnimatedIndex } from './animatedRegistry';
+import { BottomSheetBackdrop } from './BottomSheetBackdrop';
 import { BottomSheetContext } from './BottomSheet.context';
 import { useBottomSheetStore } from './bottomSheet.store';
 import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
 import { initBottomSheetCoordinator } from './bottomSheetCoordinator';
+import {
+  useScaleAnimatedStyle,
+  useScaleDepth,
+  type ScaleConfig,
+} from './useScaleAnimation';
 
 function BottomSheetHostComp() {
   const queueIds = useQueueIds();
   const clearAll = useBottomSheetStore((store) => store.clearAll);
 
-  const { groupId } = useBottomSheetManagerContext();
+  const { groupId, scaleConfig } = useBottomSheetManagerContext();
 
   useEffect(() => {
     const unsubscribe = initBottomSheetCoordinator(groupId);
@@ -30,35 +38,62 @@ function BottomSheetHostComp() {
   return (
     <>
       {queueIds.map((id) => (
-        <QueueItem key={id} id={id} />
+        <QueueItem
+          key={id}
+          id={id}
+          groupId={groupId}
+          scaleConfig={scaleConfig}
+        />
       ))}
     </>
   );
 }
 
-const QueueItem = React.memo(({ id }: { id: string }) => {
+function QueueItem({
+  id,
+  groupId,
+  scaleConfig,
+}: {
+  id: string;
+  groupId: string;
+  scaleConfig?: ScaleConfig;
+}) {
   const content = useBottomSheetStore((state) => state.sheetsById[id]?.content);
 
   const { width, height } = useSafeAreaFrame();
-  const value = useMemo(() => ({ id }), [id]);
+  const value = { id };
+
+  const scaleDepth = useScaleDepth(groupId, id);
+  const scaleStyle = useScaleAnimatedStyle(scaleDepth, scaleConfig);
+
+  // Cleanup animated index when sheet is unmounted
+  useEffect(() => {
+    return () => {
+      cleanupAnimatedIndex(id);
+    };
+  }, [id]);
 
   return (
     <BottomSheetContext.Provider value={value}>
-      <View
+      {/* Backdrop - rendered without scaling */}
+      <View style={[StyleSheet.absoluteFillObject, styles.backdropContainer]}>
+        <BottomSheetBackdrop sheetId={id} />
+      </View>
+
+      {/* Sheet content - rendered with scaling */}
+      <Animated.View
         style={[
           StyleSheet.absoluteFillObject,
           styles.container,
-          {
-            width,
-            height,
-          },
+          { width, height },
+          scaleStyle,
         ]}
       >
         {content}
-      </View>
+      </Animated.View>
     </BottomSheetContext.Provider>
   );
-});
+}
 
 const useQueueIds = () => {
   const { groupId } = useBottomSheetManagerContext();
@@ -72,9 +107,12 @@ const useQueueIds = () => {
   );
 };
 
-export const BottomSheetHost = React.memo(BottomSheetHostComp);
+export const BottomSheetHost = BottomSheetHostComp;
 
 const styles = StyleSheet.create({
+  backdropContainer: {
+    zIndex: 99_999_999,
+  },
   container: {
     zIndex: 100_000_000,
     pointerEvents: 'box-none',