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

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,43 @@
-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 { PortalHost } from 'react-native-teleport';
 
 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 PortalHostWrapper({
+  id,
+  width,
+  height,
+}: {
+  id: string;
+  width: number;
+  height: number;
+}) {
+  return (
+    <View style={{ flex: 1, width, height }}>
+      <PortalHost name={`bottomsheet-${id}`} style={{ width, height }} />
+    </View>
+  );
+}
 
 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 +55,66 @@ 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 }) => {
-  const content = useBottomSheetStore((state) => state.sheetsById[id]?.content);
+function QueueItem({
+  id,
+  groupId,
+  scaleConfig,
+}: {
+  id: string;
+  groupId: string;
+  scaleConfig?: ScaleConfig;
+}) {
+  const sheet = useBottomSheetStore((state) => state.sheetsById[id]);
 
   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>
+        {sheet?.usePortal ? (
+          <PortalHostWrapper id={id} width={width} height={height} />
+        ) : (
+          sheet?.content
+        )}
+      </Animated.View>
     </BottomSheetContext.Provider>
   );
-});
+}
 
 const useQueueIds = () => {
   const { groupId } = useBottomSheetManagerContext();
@@ -72,9 +128,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',

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

@@ -1,26 +1,33 @@
 import React, { type PropsWithChildren } from 'react';
+import { PortalProvider } from 'react-native-teleport';
 
 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 }}>
-      {children}
-    </BottomSheetManagerContext.Provider>
+    <PortalProvider>
+      <BottomSheetManagerContext.Provider key={id} value={value}>
+        {children}
+      </BottomSheetManagerContext.Provider>
+    </PortalProvider>
   );
 }
 
-export const BottomSheetManagerProvider = React.memo(
-  BottomSheetManagerProviderComp
-);
-
 export const useBottomSheetManagerContext =
   (): BottomSheetManagerContextValue => {
     const context = React.useContext(BottomSheetManagerContext);

package/src/BottomSheetPortal.tsx

@@ -0,0 +1,39 @@
+'use no memo';
+
+import React from 'react';
+import { Portal } from 'react-native-teleport';
+
+import { BottomSheetContext } from './BottomSheet.context';
+import { useBottomSheetStore } from './bottomSheet.store';
+import type { BottomSheetPortalId } from './portal.types';
+import { sheetRefs } from './refsMap';
+
+interface BottomSheetPortalProps {
+  id: BottomSheetPortalId;
+  children: React.ReactElement;
+}
+
+export function BottomSheetPortal({ id, children }: BottomSheetPortalProps) {
+  const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
+
+  // Only render when the sheet is active and using portal
+  if (!sheetState?.usePortal) {
+    return null;
+  }
+
+  // Get the ref that was created in useBottomSheetControl.open()
+  const ref = sheetRefs[id];
+
+  // Clone the child element to add the ref
+  // @ts-ignore - same pattern as useBottomSheetManager
+  const childWithRef = React.cloneElement(children, { ref });
+
+  // Wrap with BottomSheetContext so useBottomSheetState() works inside portal content
+  return (
+    <Portal hostName={`bottomsheet-${id}`}>
+      <BottomSheetContext.Provider value={{ id }}>
+        {childWithRef}
+      </BottomSheetContext.Provider>
+    </Portal>
+  );
+}

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);
+}