stream-chat-react-native-core 9.3.1 → 9.4.0-beta.1

package/src/components/ChannelDetails/hooks/useUserActivityStatus.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+import type { UserResponse } from 'stream-chat';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../utils/i18n/getDateString';
+
+/**
+ * Returns the localized presence status string for a user:
+ *   - `t('Online')` when `user.online === true`
+ *   - `t('timestamp/UserActivityStatus')` (e.g. "Last seen 10 minutes ago") when offline
+ *     with a valid `last_active`
+ *   - `t('Offline')` otherwise (including `user === undefined` or an unparseable date)
+ *
+ * The relative time is produced through the shared `getDateString` + translation-key
+ * pipeline used by message timestamps, so the format follows the configured locale.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useUserActivityStatus = (user?: UserResponse): string => {
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  return useMemo(() => {
+    if (user?.online) return t('Online');
+
+    if (user?.last_active) {
+      const lastSeen = getDateString({
+        date: user.last_active,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/UserActivityStatus',
+      });
+      if (typeof lastSeen === 'string') {
+        return lastSeen;
+      }
+    }
+
+    return t('Offline');
+  }, [t, tDateTimeParser, user?.last_active, user?.online]);
+};

package/src/components/ChannelDetails/index.ts

@@ -0,0 +1,3 @@
+export * from './ChannelDetails';
+export * from './components';
+export * from './hooks';

package/src/components/ChannelList/hooks/index.ts

@@ -1,11 +1,5 @@
 export * from './listeners/useChannelUpdated';
-export * from './useChannelActionItems';
-export * from './useChannelActionItemsById';
-export * from './useChannelActions';
-export * from './useChannelMembershipState';
 export * from './useChannelMembersState';
-export * from './useChannelMuteActive';
 export * from './useChannelOnlineMemberCount';
-export * from './useIsDirectChat';
 export * from './useMutedChannels';
 export * from './useMutedUsers';

package/src/components/ChannelList/hooks/useMutedUsers.ts

@@ -1,13 +1,19 @@
 import { Channel, EventTypes, Mute, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
-import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+import { useSyncClientEvents } from '../../../hooks/useSyncClientEvents';
 
-const selector = (_channel: Channel, client: StreamChat) => client.mutedUsers;
+const selector = (client: StreamChat) => client.mutedUsers;
 const keys: EventTypes[] = ['health.check', 'notification.mutes_updated'];
-export function useMutedUsers(channel: Channel): Array<Mute>;
-export function useMutedUsers(channel?: Channel): Array<Mute> | undefined;
-export function useMutedUsers(channel?: Channel) {
+
+export function useMutedUsers(): Array<Mute>;
+/**
+ *
+ * @param @deprecated _channel - This parameter is deprecated because it is no longer necessary. It is kept for backwards compatibility only.
+ * @returns
+ */
+export function useMutedUsers(_channel: Channel): Array<Mute> | undefined;
+export function useMutedUsers(_channel?: Channel): Array<Mute> {
   const { client } = useChatContext();
-  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+  return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });
 }

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -8,20 +8,19 @@ import type { Channel } from 'stream-chat';
 
 import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import type { ChannelActionItem } from '../../hooks/actions/useChannelActionItems';
+import { useChannelMuteActive } from '../../hooks/useChannelMuteActive';
+import { useIsDirectChat } from '../../hooks/useIsDirectChat';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { primitives } from '../../theme';
-import type { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelMembersState } from '../ChannelList/hooks/useChannelMembersState';
-import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive';
 import { useChannelOnlineMemberCount } from '../ChannelList/hooks/useChannelOnlineMemberCount';
-import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
 import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 import { StreamBottomSheetModalFlatList } from '../UIComponents/StreamBottomSheetModalFlatList';
 
@@ -40,9 +39,7 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const memberCount = useMemo(() => Object.keys(members).length, [members]);
   const onlineCount = useChannelOnlineMemberCount(channel);
   const isDirectChat = useIsDirectChat(channel);
-  const { muted: channelMuted } = useIsChannelMuted(channel);
-  const directChatUserMuted = useChannelMuteActive(channel);
-  const muted = isDirectChat ? directChatUserMuted : channelMuted;
+  const muted = useChannelMuteActive(channel);
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -1,19 +1,19 @@
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { type ColorValue, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
 import type { Channel } from 'stream-chat';
 
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
-
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { MenuPointHorizontal, Mute, Sound } from '../../icons';
-import type { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActions } from '../ChannelList/hooks/useChannelActions';
+import type {
+  ChannelActionItem,
+  GetChannelActionItems,
+} from '../../hooks/actions/useChannelActionItems';
+import { useChannelActionItems } from '../../hooks/actions/useChannelActionItems';
+import { MenuPointHorizontal } from '../../icons';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
   RightActions,
@@ -41,12 +41,15 @@ export const ChannelSwipableWrapper = ({
 }>) => {
   const { ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent } = useComponentsContext();
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const { muteChannel, unmuteChannel } = useChannelActions(channel);
   const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
   const sheetItems = useMemo(
     () => channelActionItems.filter((item) => item.placement !== 'swipe'),
     [channelActionItems],
   );
+  const swipeItems = useMemo(
+    () => channelActionItems.filter((item) => item.placement !== 'sheet'),
+    [channelActionItems],
+  );
   const swipableRegistry = useSwipeRegistryContext();
 
   const {
@@ -54,19 +57,6 @@ export const ChannelSwipableWrapper = ({
   } = useTheme();
   const styles = useStyles();
 
-  const channelMuteState = useIsChannelMuted(channel);
-  const channelMuteActive = channelMuteState.muted;
-
-  const Icon = useCallback(
-    () =>
-      channelMuteActive ? (
-        <Sound width={20} height={20} stroke={semantics.textOnAccent} />
-      ) : (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
-      ),
-    [channelMuteActive, semantics.textOnAccent],
-  );
-
   const swipableActions = useMemo<SwipableActionItem[]>(() => {
     const items: SwipableActionItem[] = [
       {
@@ -77,15 +67,16 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    items.push({
-      id: 'mute',
-      action: () => {
-        const action = channelMuteActive ? unmuteChannel : muteChannel;
-        action();
-        swipableRegistry?.closeAll();
-      },
-      Content: Icon,
-      contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+    swipeItems.forEach((item) => {
+      items.push({
+        id: item.id,
+        action: () => {
+          item.action();
+          swipableRegistry?.closeAll();
+        },
+        Content: createSwipeContent(item, semantics.textOnAccent),
+        contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+      });
     });
 
     return items;
@@ -93,11 +84,9 @@ export const ChannelSwipableWrapper = ({
     styles.contentContainerStyle,
     styles.elipsis,
     styles.standard,
-    channelMuteActive,
-    muteChannel,
-    unmuteChannel,
-    Icon,
+    swipeItems,
     swipableRegistry,
+    semantics.textOnAccent,
   ]);
 
   const renderRightActions = useCallback(
@@ -129,6 +118,11 @@ export const ChannelSwipableWrapper = ({
   );
 };
 
+const createSwipeContent = (item: ChannelActionItem, color: ColorValue) => {
+  const SwipeContent = () => <item.Icon fill={color} stroke={color} />;
+  return SwipeContent;
+};
+
 const useStyles = () => {
   const {
     theme: { semantics },

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -6,7 +6,7 @@ import type { Channel } from 'stream-chat';
 
 import { ThemeProvider, defaultTheme } from '../../../contexts';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
-import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
 import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet';
 import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -5,12 +5,10 @@ import { act, render } from '@testing-library/react-native';
 import type { Channel } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
-import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
-import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
-import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../../hooks/actions/useChannelActionItems';
 import { SwipableWrapper } from '../../UIComponents/SwipableWrapper';
 import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
-import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
 
 const rightActionsProbe = {
   items: [] as Array<{ action: () => void; id: string }>,
@@ -73,49 +71,30 @@ describe('ChannelSwipableWrapper', () => {
     rightActionsProbe.items = [];
   });
 
-  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
-    const muteChannel = jest.fn();
-    const unmuteChannel = jest.fn();
+  it('renders the swipe mute action from useChannelActionItems and keeps muteUser in the sheet', () => {
     const customBottomSheet = jest.fn(() => null);
-    const items: ChannelActionItem[] = [
-      {
-        Icon: () => null,
-        action: jest.fn(),
-        id: 'mute',
-        label: 'Mute User',
-        placement: 'sheet',
-        type: 'standard',
-      },
-      {
-        Icon: () => null,
-        action: jest.fn(),
-        id: 'archive',
-        label: 'Archive Chat',
-        placement: 'sheet',
-        type: 'standard',
-      },
-    ];
-
-    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
-      archive: jest.fn(),
-      blockUser: jest.fn(),
-      deleteChannel: jest.fn(),
-      leave: jest.fn(),
-      muteChannel,
-      muteUser: jest.fn(),
-      pin: jest.fn(),
-      unarchive: jest.fn(),
-      unblockUser: jest.fn(),
-      unmuteChannel,
-      unmuteUser: jest.fn(),
-      unpin: jest.fn(),
-    });
-    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
-    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
-      createdAt: null,
-      expiresAt: null,
-      muted: false,
-    });
+    const muteAction = jest.fn();
+    const muteUserAction = jest.fn();
+    const muteItem: ChannelActionItem = {
+      Icon: () => null,
+      action: muteAction,
+      id: 'mute',
+      label: 'Mute Chat',
+      placement: 'swipe',
+      type: 'standard',
+    };
+    const muteUserItem: ChannelActionItem = {
+      Icon: () => null,
+      action: muteUserAction,
+      id: 'muteUser',
+      label: 'Mute User',
+      placement: 'sheet',
+      type: 'standard',
+    };
+
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, muteUserItem]);
 
     render(
       <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
@@ -128,7 +107,7 @@ describe('ChannelSwipableWrapper', () => {
     expect(customBottomSheet).toHaveBeenCalledWith(
       expect.objectContaining({
         channel,
-        items,
+        items: [muteUserItem],
       }),
       undefined,
     );
@@ -138,52 +117,34 @@ describe('ChannelSwipableWrapper', () => {
       rightActionsProbe.items[1].action();
     });
 
-    expect(muteChannel).toHaveBeenCalledTimes(1);
-    expect(unmuteChannel).not.toHaveBeenCalled();
+    expect(muteAction).toHaveBeenCalledTimes(1);
+    expect(muteUserAction).not.toHaveBeenCalled();
   });
 
-  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
-    const muteChannel = jest.fn();
+  it('removes swipe-only items from the sheet and keeps both-placed items in both surfaces', () => {
     const customBottomSheet = jest.fn(() => null);
-    const muteItem = {
+    const muteAction = jest.fn();
+    const archiveAction = jest.fn();
+    const muteItem: ChannelActionItem = {
       Icon: () => null,
-      action: jest.fn(),
+      action: muteAction,
       id: 'mute',
       label: 'Mute Group',
       placement: 'swipe',
       type: 'standard',
-    } as const satisfies ChannelActionItem;
-    const archiveItem = {
+    };
+    const archiveItem: ChannelActionItem = {
       Icon: () => null,
-      action: jest.fn(),
+      action: archiveAction,
       id: 'archive',
       label: 'Archive Group',
       placement: 'both',
       type: 'standard',
-    } as const satisfies ChannelActionItem;
-
-    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
-      archive: jest.fn(),
-      blockUser: jest.fn(),
-      deleteChannel: jest.fn(),
-      leave: jest.fn(),
-      muteChannel,
-      muteUser: jest.fn(),
-      pin: jest.fn(),
-      unarchive: jest.fn(),
-      unblockUser: jest.fn(),
-      unmuteChannel: jest.fn(),
-      unmuteUser: jest.fn(),
-      unpin: jest.fn(),
-    });
+    };
+
     jest
       .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
       .mockReturnValue([muteItem, archiveItem]);
-    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
-      createdAt: null,
-      expiresAt: null,
-      muted: false,
-    });
 
     render(
       <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
@@ -200,12 +161,16 @@ describe('ChannelSwipableWrapper', () => {
       }),
       undefined,
     );
-    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual([
+      'openSheet',
+      'mute',
+      'archive',
+    ]);
 
     act(() => {
       rightActionsProbe.items[1].action();
     });
 
-    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(muteAction).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -4,6 +4,8 @@ import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelName } from '../../../hooks/useChannelName';
+import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 
 const getMemberName = (member: ChannelMemberResponse) =>
   member.user?.name || member.user?.id || 'Unknown User';
@@ -12,8 +14,8 @@ export const useChannelPreviewDisplayName = (channel?: Channel) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const currentUserId = client?.userID;
-  const members = channel?.state?.members;
-  const channelName = channel?.data?.name;
+  const members = useChannelMembersState(channel);
+  const channelName = useChannelName(channel);
 
   const displayName = useMemo(() => {
     if (channelName) {

package/src/components/Message/hooks/useUserMuteActive.ts

@@ -1,12 +1,11 @@
 import { UserResponse } from 'stream-chat';
 
-import { useChannelContext, useChatContext } from '../../../contexts';
+import { useChatContext } from '../../../contexts';
 import { useMutedUsers } from '../../ChannelList/hooks/useMutedUsers';
 
 export const useUserMuteActive = (user: UserResponse | null | undefined) => {
   const { client } = useChatContext();
-  const { channel } = useChannelContext();
-  const mutedUsers = useMutedUsers(channel);
+  const mutedUsers = useMutedUsers();
 
   if (!user) {
     return false;

package/src/components/Notifications/notificationTarget.ts

@@ -1,6 +1,12 @@
 import type { Notification } from 'stream-chat';
 
-const NOTIFICATION_TARGET_PANELS = ['channel', 'thread', 'channel-list', 'thread-list'] as const;
+const NOTIFICATION_TARGET_PANELS = [
+  'channel',
+  'thread',
+  'channel-list',
+  'thread-list',
+  'channel-details',
+] as const;
 const NOTIFICATION_TARGET_TAG_PREFIX = 'target:' as const;
 
 /** Built-in SDK surfaces that can host snackbar notifications. */

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -48,7 +48,7 @@ import { useAccessibilityAnnouncer } from '../Accessibility/useAccessibilityAnno
 
 export type BottomSheetModalProps = {
   /**
-   * Function to call when the modal is closed.
+   * Function to call when the modal is closed or dismissed.
    * @returns void
    */
   onClose: () => void;
@@ -129,6 +129,14 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
   const wasVisibleRef = useRef(false);
 
   const [renderContent, setRenderContent] = useState(!lazy);
+  // We keep the underlying RN `<Modal>` mounted while it dismisses so we can
+  // listen for its `onDismiss` (iOS) and only then run the consumer's
+  // close-finished callback. Without this, callbacks that present another
+  // native modal (e.g. `UIImagePickerController` for camera capture) can race
+  // the still-dismissing view controller and crash with "Application tried to
+  // present modal view controller on top of itself" on iOS.
+  const [isDismissing, setIsDismissing] = useState(false);
+  const pendingCloseCallbackRef = useRef<(() => void) | undefined>(undefined);
 
   const showContent = useStableCallback(() => {
     if (lazy) {
@@ -166,15 +174,37 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     );
   });
 
-  const finishClose = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
+  const handleNativeModalDismiss = useStableCallback(() => {
+    const callback = pendingCloseCallbackRef.current;
+    pendingCloseCallbackRef.current = undefined;
     onClose();
-    if (closeAnimationFinishedCallback) {
-      Platform.OS === 'ios'
-        ? closeAnimationFinishedCallback()
-        : setTimeout(() => closeAnimationFinishedCallback(), 100);
-    }
+    callback?.();
   });
 
+  const finishClose = useStableCallback(
+    ({
+      closeAnimationFinishedCallback,
+      shouldDismiss,
+    }: {
+      closeAnimationFinishedCallback?: () => void;
+      shouldDismiss?: boolean;
+    }) => {
+      pendingCloseCallbackRef.current = closeAnimationFinishedCallback;
+      if (Platform.OS !== 'ios') {
+        // RN's `Modal.onDismiss` is iOS-only, so synthesize the same signal on
+        // other platforms after a short delay that gives the Dialog time to
+        // detach. Matches the previous Android behavior.
+        setTimeout(handleNativeModalDismiss, 100);
+      } else {
+        if (shouldDismiss) {
+          setIsDismissing(true);
+          return;
+        }
+        handleNativeModalDismiss();
+      }
+    },
+  );
+
   const closeFromGesture = useStableCallback(() => {
     requestAnimationFrame(() => {
       isOpen.value = false;
@@ -192,23 +222,39 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     });
   });
 
-  const close = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
-    if (!visible || !isOpen.value) {
-      return;
-    }
+  const closeInternal = useStableCallback(
+    ({
+      closeAnimationFinishedCallback,
+      shouldDismiss,
+    }: {
+      closeAnimationFinishedCallback?: () => void;
+      shouldDismiss?: boolean;
+    }) => {
+      if (!visible || !isOpen.value) {
+        return;
+      }
 
-    isOpen.value = false;
-    isOpening.value = false;
+      isOpen.value = false;
+      isOpening.value = false;
 
-    sheetTranslateY.value = withTiming(
-      maxHeight,
-      { duration: 250, easing: Easing.out(Easing.cubic) },
-      (finished) => {
-        if (finished) {
-          runOnJS(finishClose)(closeAnimationFinishedCallback);
-        }
-      },
-    );
+      sheetTranslateY.value = withTiming(
+        maxHeight,
+        { duration: 250, easing: Easing.out(Easing.cubic) },
+        (finished) => {
+          if (finished) {
+            runOnJS(finishClose)({ closeAnimationFinishedCallback, shouldDismiss });
+          }
+        },
+      );
+    },
+  );
+
+  const close = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
+    closeInternal({ closeAnimationFinishedCallback });
+  });
+
+  const dismiss = useStableCallback((dismissFinishedCallback?: () => void) => {
+    closeInternal({ closeAnimationFinishedCallback: dismissFinishedCallback, shouldDismiss: true });
   });
 
   // modal opening layout effect - we make sure to only show the content
@@ -531,15 +577,21 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const bottomSheetModalContextValue = useMemo(
     () => ({
+      dismiss,
       close,
       currentSnapIndex,
       topSnapIndex,
     }),
-    [close, currentSnapIndex, topSnapIndex],
+    [dismiss, close, currentSnapIndex, topSnapIndex],
   );
 
   return (
-    <Modal onRequestClose={onClose} transparent visible={visible}>
+    <Modal
+      onDismiss={handleNativeModalDismiss}
+      onRequestClose={onClose}
+      transparent
+      visible={visible && !isDismissing}
+    >
       <GestureHandlerRootView style={styles.sheetContentContainer}>
         <View style={[styles.overlay, overlayTheme]}>
           <Animated.View