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

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.1",
+  "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,39 +1,33 @@
-import React, {
-  Fragment,
-  useEffect,
-  useMemo,
-  type PropsWithChildren,
-} 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 { initBottomSheetCoordinator } from './bottomSheetCoordinator';
 import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
+import { initBottomSheetCoordinator } from './bottomSheetCoordinator';
+import {
+  useScaleAnimatedStyle,
+  useScaleDepth,
+  type ScaleConfig,
+} from './useScaleAnimation';
 
-initBottomSheetCoordinator();
-
-interface BottomSheetHostProps {
-  Container?: React.ComponentType<any>;
-}
-
-function BottomSheetHostComp({ Container = Fragment }: BottomSheetHostProps) {
-  const { bottomSheetsStack, clearAll } = useBottomSheetStore((store) => ({
-    bottomSheetsStack: store.stack,
-    clearAll: store.clearAll,
-  }));
+function BottomSheetHostComp() {
+  const queueIds = useQueueIds();
+  const clearAll = useBottomSheetStore((store) => store.clearAll);
 
-  const { width, height } = useSafeAreaFrame();
-  const { groupId } = useBottomSheetManagerContext();
+  const { groupId, scaleConfig } = useBottomSheetManagerContext();
 
-  const filteredQueue = useMemo(
-    () =>
-      bottomSheetsStack.filter(
-        (bottomSheet) => bottomSheet.groupId === groupId
-      ),
-    [bottomSheetsStack, groupId]
-  );
+  useEffect(() => {
+    const unsubscribe = initBottomSheetCoordinator(groupId);
+    return () => {
+      unsubscribe();
+    };
+  }, [groupId]);
 
   useEffect(() => {
     return () => {
@@ -43,38 +37,82 @@ function BottomSheetHostComp({ Container = Fragment }: BottomSheetHostProps) {
 
   return (
     <>
-      {filteredQueue.map(({ id, content }) => (
-        <BottomSheetContext.Provider key={id} value={{ id }}>
-          <Container>
-            <View
-              style={[
-                StyleSheet.absoluteFillObject,
-                styles.container,
-                {
-                  width,
-                  height,
-                },
-              ]}
-            >
-              <MemoizedContent id={id}>{content}</MemoizedContent>
-            </View>
-          </Container>
-        </BottomSheetContext.Provider>
+      {queueIds.map((id) => (
+        <QueueItem
+          key={id}
+          id={id}
+          groupId={groupId}
+          scaleConfig={scaleConfig}
+        />
       ))}
     </>
   );
 }
 
-const MemoizedContent = React.memo(
-  ({ children }: PropsWithChildren<{ id: string }>) => <>{children}</>,
-  (prevProps, nextProps) => {
-    return prevProps.id === nextProps.id;
-  }
-);
+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 = { 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}>
+      {/* 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 },
+          scaleStyle,
+        ]}
+      >
+        {content}
+      </Animated.View>
+    </BottomSheetContext.Provider>
+  );
+}
+
+const useQueueIds = () => {
+  const { groupId } = useBottomSheetManagerContext();
 
-export const BottomSheetHost = React.memo(BottomSheetHostComp);
+  return useBottomSheetStore(
+    (state) =>
+      state.stackOrder.filter(
+        (sheetId) => state.sheetsById[sheetId]?.groupId === groupId
+      ),
+    shallow
+  );
+};
+
+export const BottomSheetHost = BottomSheetHostComp;
 
 const styles = StyleSheet.create({
+  backdropContainer: {
+    zIndex: 99_999_999,
+  },
   container: {
     zIndex: 100_000_000,
     pointerEvents: 'box-none',

package/src/BottomSheetManaged.tsx

@@ -1,12 +1,11 @@
 import BottomSheetOriginal, {
-  BottomSheetBackdrop,
   useBottomSheetSpringConfigs,
-  type BottomSheetBackdropProps,
   type BottomSheetProps,
 } from '@gorhom/bottom-sheet';
 import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 
+import { getAnimatedIndex } from './animatedRegistry';
 import { createSheetEventHandlers } from './bottomSheetCoordinator';
 import { useBottomSheetState } from './useBottomSheetState';
 
@@ -14,6 +13,9 @@ export interface BottomSheetRef extends BottomSheetMethods {}
 
 interface BottomSheetManagedProps extends BottomSheetProps {}
 
+// Null backdrop - we render our own backdrop separately in BottomSheetHost
+const nullBackdrop = () => null;
+
 export const BottomSheetManaged = React.forwardRef<
   BottomSheetRef,
   BottomSheetManagedProps
@@ -24,35 +26,36 @@ export const BottomSheetManaged = React.forwardRef<
       onAnimate,
       onClose,
       enablePanDownToClose = true,
-      backdropComponent,
+      backdropComponent = nullBackdrop,
+      animatedIndex: externalAnimatedIndex,
       ...props
     },
     ref
   ) => {
     const { bottomSheetState } = useBottomSheetState();
 
-    const { handleAnimate, handleClose } = useMemo(
-      () => createSheetEventHandlers(bottomSheetState.id),
-      [bottomSheetState.id]
-    );
+    // Get or create shared animated index for this sheet
+    const animatedIndex =
+      externalAnimatedIndex ?? getAnimatedIndex(bottomSheetState.id);
 
-    const wrappedOnAnimate: BottomSheetProps['onAnimate'] = useCallback(
-      (
-        fromIndex: number,
-        toIndex: number,
-        fromPosition: number,
-        toPosition: number
-      ) => {
-        handleAnimate(fromIndex, toIndex);
-        onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
-      },
-      [handleAnimate, onAnimate]
+    const { handleAnimate, handleClose } = createSheetEventHandlers(
+      bottomSheetState.id
     );
 
-    const wrappedOnClose = useCallback(() => {
+    const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
+      fromIndex: number,
+      toIndex: number,
+      fromPosition: number,
+      toPosition: number
+    ) => {
+      handleAnimate(fromIndex, toIndex);
+      onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
+    };
+
+    const wrappedOnClose = () => {
       onClose?.();
       handleClose();
-    }, [handleClose, onClose]);
+    };
 
     const config = useBottomSheetSpringConfigs({
       stiffness: 400,
@@ -60,25 +63,15 @@ export const BottomSheetManaged = React.forwardRef<
       mass: 0.7,
     });
 
-    const renderBackdropComponent = useCallback(
-      (backdropProps: BottomSheetBackdropProps) => (
-        <BottomSheetBackdrop
-          {...backdropProps}
-          disappearsOnIndex={-1}
-          appearsOnIndex={0}
-        />
-      ),
-      []
-    );
-
     return (
       <BottomSheetOriginal
         animationConfigs={config}
         ref={ref}
         {...props}
+        animatedIndex={animatedIndex}
         onClose={wrappedOnClose}
         onAnimate={wrappedOnAnimate}
-        backdropComponent={backdropComponent || renderBackdropComponent}
+        backdropComponent={backdropComponent}
         enablePanDownToClose={enablePanDownToClose}
       >
         {children}

package/src/BottomSheetManager.context.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { ScaleConfig } from './useScaleAnimation';
 
 export interface BottomSheetManagerContextValue {
   groupId: string;
+  scaleConfig?: ScaleConfig;
 }
 
 export const BottomSheetManagerContext =

package/src/BottomSheetManager.provider.tsx

@@ -4,23 +4,27 @@ import {
   BottomSheetManagerContext,
   type BottomSheetManagerContextValue,
 } from './BottomSheetManager.context';
+import type { ScaleConfig } from './useScaleAnimation';
 
 interface ProviderProps extends PropsWithChildren {
   id: string;
+  scaleConfig?: ScaleConfig;
 }
 
-function BottomSheetManagerProviderComp({ id, children }: ProviderProps) {
+export function BottomSheetManagerProvider({
+  id,
+  scaleConfig,
+  children,
+}: ProviderProps) {
+  const value = { groupId: id, scaleConfig };
+
   return (
-    <BottomSheetManagerContext.Provider key={id} value={{ groupId: id }}>
+    <BottomSheetManagerContext.Provider key={id} value={value}>
       {children}
     </BottomSheetManagerContext.Provider>
   );
 }
 
-export const BottomSheetManagerProvider = React.memo(
-  BottomSheetManagerProviderComp
-);
-
 export const useBottomSheetManagerContext =
   (): BottomSheetManagerContextValue => {
     const context = React.useContext(BottomSheetManagerContext);

package/src/BottomSheetScaleView.tsx

@@ -0,0 +1,41 @@
+import { useContext, type PropsWithChildren } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { BottomSheetManagerContext } from './BottomSheetManager.context';
+import { useScaleAnimatedStyle, useScaleDepth } from './useScaleAnimation';
+
+/**
+ * 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 function BottomSheetScaleView({ children }: PropsWithChildren) {
+  const context = useContext(BottomSheetManagerContext);
+  const groupId = context?.groupId ?? 'default';
+  const scaleConfig = context?.scaleConfig;
+
+  const scaleDepth = useScaleDepth(groupId);
+  const animatedStyle = useScaleAnimatedStyle(scaleDepth, scaleConfig);
+
+  return (
+    <Animated.View style={[styles.container, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/animatedRegistry.ts

@@ -0,0 +1,22 @@
+import { makeMutable, type SharedValue } from 'react-native-reanimated';
+
+/**
+ * Registry for shared animated values per sheet.
+ * This allows backdrop to access the animatedIndex from the bottom sheet.
+ */
+const animatedIndexRegistry = new Map<string, SharedValue<number>>();
+
+export function getAnimatedIndex(sheetId: string): SharedValue<number> {
+  let animatedIndex = animatedIndexRegistry.get(sheetId);
+
+  if (!animatedIndex) {
+    animatedIndex = makeMutable(-1);
+    animatedIndexRegistry.set(sheetId, animatedIndex);
+  }
+
+  return animatedIndex;
+}
+
+export function cleanupAnimatedIndex(sheetId: string): void {
+  animatedIndexRegistry.delete(sheetId);
+}