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

package/src/useScaleAnimation.ts

@@ -0,0 +1,114 @@
+import { useRef } from 'react';
+import {
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  useBottomSheetStore,
+  type BottomSheetStore,
+} from './bottomSheet.store';
+
+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;
+}
+
+const DEFAULT_CONFIG: Required<ScaleConfig> = {
+  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.
+ */
+export function useScaleDepth(groupId: string, sheetId?: string): number {
+  const prevDepthRef = useRef(0);
+
+  const scaleDepthSelector = (state: BottomSheetStore) => {
+    const { stackOrder, sheetsById } = state;
+
+    // For background: check if ANY scaleBackground sheet is active (binary 0/1)
+    // For a sheet: count scaleBackground sheets above it in the stack
+    const startIndex = sheetId ? stackOrder.indexOf(sheetId) + 1 : 0;
+
+    if (sheetId && startIndex === 0) {
+      // Sheet not found in stack, return previous value to avoid flicker
+      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++;
+        // For background wrapper (no sheetId), we only need to know if there's at least one
+        // Don't accumulate - background scales once, sheets below scale cumulatively
+        if (!sheetId) {
+          break;
+        }
+      }
+    }
+
+    prevDepthRef.current = depth;
+    return depth;
+  };
+
+  return useBottomSheetStore(scaleDepthSelector);
+}
+
+/**
+ * Returns animated style for scale effect based on depth.
+ * Uses power scaling: scale^depth for cascading effect.
+ */
+export function useScaleAnimatedStyle(depth: number, config?: ScaleConfig) {
+  const {
+    scale = DEFAULT_CONFIG.scale,
+    translateY = DEFAULT_CONFIG.translateY,
+    borderRadius = DEFAULT_CONFIG.borderRadius,
+    duration = DEFAULT_CONFIG.duration,
+  } = config ?? {};
+
+  const progress = useDerivedValue(() => {
+    return withTiming(depth, { duration });
+  });
+
+  return 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',
+    };
+  });
+}

package/lib/commonjs/ScaleBackgroundWrapper.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ScaleBackgroundWrapper = ScaleBackgroundWrapper;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _BottomSheetManager = require("./BottomSheetManager.context");
-var _bottomSheet = require("./bottomSheet.store");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * Wraps content with iOS-style scale animation when a bottom sheet with
- * scaleBackground: true is open. Place your main content inside this wrapper,
- * but keep BottomSheetHost outside of it.
- *
- * @example
- * ```tsx
- * <BottomSheetManagerProvider id="default">
- *   <ScaleBackgroundWrapper config={{ scale: 0.92 }}>
- *     <MainContent />
- *   </ScaleBackgroundWrapper>
- *   <BottomSheetHost />
- * </BottomSheetManagerProvider>
- * ```
- */
-function ScaleBackgroundWrapper({
-  children,
-  config
-}) {
-  const context = (0, _react.useContext)(_BottomSheetManager.BottomSheetManagerContext);
-  const groupId = context?.groupId ?? 'default';
-  const {
-    scale = 0.92,
-    translateY = 10,
-    borderRadius = 12,
-    duration = 300
-  } = config ?? {};
-  const hasActiveScaleSheet = (0, _bottomSheet.useBottomSheetStore)(state => state.stackOrder.some(id => {
-    const sheet = state.sheetsById[id];
-    return sheet?.groupId === groupId && sheet?.scaleBackground && sheet?.status !== 'closing';
-  }));
-  const animationProgress = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withTiming)(hasActiveScaleSheet ? 1 : 0, {
-    duration
-  }));
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const progress = animationProgress.value;
-    return {
-      transform: [{
-        scale: (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [1, scale])
-      }, {
-        translateY: (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [0, translateY])
-      }],
-      borderRadius: (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [0, borderRadius]),
-      overflow: progress > 0 ? 'hidden' : 'visible'
-    };
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    style: [styles.scaleWrapper, animatedStyle],
-    children: children
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  scaleWrapper: {
-    flex: 1
-  }
-});
-//# sourceMappingURL=ScaleBackgroundWrapper.js.map

package/lib/commonjs/ScaleBackgroundWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_BottomSheetManager","_bottomSheet","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScaleBackgroundWrapper","children","config","context","useContext","BottomSheetManagerContext","groupId","scale","translateY","borderRadius","duration","hasActiveScaleSheet","useBottomSheetStore","state","stackOrder","some","id","sheet","sheetsById","scaleBackground","status","animationProgress","useDerivedValue","withTiming","animatedStyle","useAnimatedStyle","progress","value","transform","interpolate","overflow","jsx","View","style","styles","scaleWrapper","StyleSheet","create","flex"],"sourceRoot":"../../src","sources":["ScaleBackgroundWrapper.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,32 +0,0 @@
-import { type PropsWithChildren } from 'react';
-export interface ScaleBackgroundConfig {
-    /** 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;
-}
-interface ScaleBackgroundWrapperProps extends PropsWithChildren {
-    config?: ScaleBackgroundConfig;
-}
-/**
- * Wraps content with iOS-style scale animation when a bottom sheet with
- * scaleBackground: true is open. Place your main content inside this wrapper,
- * but keep BottomSheetHost outside of it.
- *
- * @example
- * ```tsx
- * <BottomSheetManagerProvider id="default">
- *   <ScaleBackgroundWrapper config={{ scale: 0.92 }}>
- *     <MainContent />
- *   </ScaleBackgroundWrapper>
- *   <BottomSheetHost />
- * </BottomSheetManagerProvider>
- * ```
- */
-export declare function ScaleBackgroundWrapper({ children, config, }: ScaleBackgroundWrapperProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ScaleBackgroundWrapper.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScaleBackgroundWrapper.d.ts","sourceRoot":"","sources":["../../../src/ScaleBackgroundWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAW3D,MAAM,WAAW,qBAAqB;IACpC,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;AAED,UAAU,2BAA4B,SAAQ,iBAAiB;IAC7D,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,MAAM,GACP,EAAE,2BAA2B,2CA8C7B"}

package/src/ScaleBackgroundWrapper.tsx

@@ -1,97 +0,0 @@
-import { useContext, type PropsWithChildren } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { BottomSheetManagerContext } from './BottomSheetManager.context';
-import { useBottomSheetStore } from './bottomSheet.store';
-
-export interface ScaleBackgroundConfig {
-  /** 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;
-}
-
-interface ScaleBackgroundWrapperProps extends PropsWithChildren {
-  config?: ScaleBackgroundConfig;
-}
-
-/**
- * Wraps content with iOS-style scale animation when a bottom sheet with
- * scaleBackground: true is open. Place your main content inside this wrapper,
- * but keep BottomSheetHost outside of it.
- *
- * @example
- * ```tsx
- * <BottomSheetManagerProvider id="default">
- *   <ScaleBackgroundWrapper config={{ scale: 0.92 }}>
- *     <MainContent />
- *   </ScaleBackgroundWrapper>
- *   <BottomSheetHost />
- * </BottomSheetManagerProvider>
- * ```
- */
-export function ScaleBackgroundWrapper({
-  children,
-  config,
-}: ScaleBackgroundWrapperProps) {
-  const context = useContext(BottomSheetManagerContext);
-  const groupId = context?.groupId ?? 'default';
-
-  const {
-    scale = 0.92,
-    translateY = 10,
-    borderRadius = 12,
-    duration = 300,
-  } = config ?? {};
-
-  const hasActiveScaleSheet = useBottomSheetStore((state) =>
-    state.stackOrder.some((id) => {
-      const sheet = state.sheetsById[id];
-      return (
-        sheet?.groupId === groupId &&
-        sheet?.scaleBackground &&
-        sheet?.status !== 'closing'
-      );
-    })
-  );
-
-  const animationProgress = useDerivedValue(() =>
-    withTiming(hasActiveScaleSheet ? 1 : 0, {
-      duration,
-    })
-  );
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const progress = animationProgress.value;
-
-    return {
-      transform: [
-        { scale: interpolate(progress, [0, 1], [1, scale]) },
-        { translateY: interpolate(progress, [0, 1], [0, translateY]) },
-      ],
-      borderRadius: interpolate(progress, [0, 1], [0, borderRadius]),
-      overflow: progress > 0 ? ('hidden' as const) : ('visible' as const),
-    };
-  });
-
-  return (
-    <Animated.View style={[styles.scaleWrapper, animatedStyle]}>
-      {children}
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  scaleWrapper: {
-    flex: 1,
-  },
-});