stream-chat-react-native-core 9.2.0-beta.1 → 9.2.0-beta.3

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

@@ -19,6 +19,25 @@ import {
 } from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
+import { useNotificationApi } from '../../Notifications';
+
+const getErrorMessage = (error: unknown, fallback: string) =>
+  error instanceof Error && error.message ? error.message : fallback;
+
+const getNotificationError = (error: unknown): Error | undefined => {
+  if (error instanceof Error) return error;
+  if (typeof error === 'string') return new Error(error);
+  if (error && typeof error === 'object' && 'message' in error) {
+    const message = error.message;
+    if (typeof message === 'string') return new Error(message);
+  }
+  return undefined;
+};
+
+const getNotificationErrorOptions = (error: unknown) => {
+  const originalError = getNotificationError(error);
+  return originalError ? { originalError } : {};
+};
 
 export const useWithPortalKeyboardSafety = <T extends unknown[]>(
   callback: (...args: T) => void,
@@ -47,6 +66,7 @@ export const useMessageActionHandlers = ({
   Pick<MessageContextValue, 'message'> &
   Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
   const handleResendMessage = useStableCallback(() => retrySendMessage(message));
   const translatedMessage = useTranslatedMessage(message);
 
@@ -74,7 +94,24 @@ export const useMessageActionHandlers = ({
         { style: 'cancel', text: t('Cancel') },
         {
           onPress: async () => {
-            await deleteMessage(message);
+            try {
+              await deleteMessage(message);
+              addNotification({
+                message: t('Message deleted'),
+                options: { severity: 'success', type: 'api:message:delete:success' },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
+            } catch (error) {
+              addNotification({
+                message: getErrorMessage(error, t('Error deleting message')),
+                options: {
+                  ...getNotificationErrorOptions(error),
+                  severity: 'error',
+                  type: 'api:message:delete:failed',
+                },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
+            }
           },
           style: 'destructive',
           text: t('Delete'),
@@ -97,10 +134,39 @@ export const useMessageActionHandlers = ({
       return;
     }
 
-    if (isMuted) {
-      await client.unmuteUser(message.user.id);
-    } else {
-      await client.muteUser(message.user.id);
+    try {
+      if (isMuted) {
+        await client.unmuteUser(message.user.id);
+        addNotification({
+          message: t('{{ user }} has been unmuted', {
+            user: message.user?.name || message.user?.id,
+          }),
+          options: { severity: 'success', type: 'api:user:unmute:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      } else {
+        await client.muteUser(message.user.id);
+        addNotification({
+          message: t('{{ user }} has been muted', {
+            user: message.user?.name || message.user?.id,
+          }),
+          options: { severity: 'success', type: 'api:user:mute:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      }
+    } catch (error) {
+      addNotification({
+        message: getErrorMessage(
+          error,
+          isMuted ? t('Error unmuting a user ...') : t('Error muting a user ...'),
+        ),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: isMuted ? 'api:user:unmute:failed' : 'api:user:mute:failed',
+        },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     }
   });
 
@@ -118,11 +184,36 @@ export const useMessageActionHandlers = ({
   });
 
   const handleTogglePinMessage = useStableCallback(async () => {
-    const MessagePinnedHeaderStatus = message.pinned;
-    if (!MessagePinnedHeaderStatus) {
-      await client.pinMessage(message, null);
-    } else {
-      await client.unpinMessage(message);
+    const isPinned = !!message.pinned;
+    try {
+      if (!isPinned) {
+        await client.pinMessage(message, null);
+        addNotification({
+          message: t('Message pinned'),
+          options: { severity: 'success', type: 'api:message:pin:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      } else {
+        await client.unpinMessage(message);
+        addNotification({
+          message: t('Message unpinned'),
+          options: { severity: 'success', type: 'api:message:unpin:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      }
+    } catch (error) {
+      addNotification({
+        message: getErrorMessage(
+          error,
+          isPinned ? t('Error removing message pin') : t('Error pinning message'),
+        ),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: isPinned ? 'api:message:unpin:failed' : 'api:message:pin:failed',
+        },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     }
   });
 
@@ -143,15 +234,21 @@ export const useMessageActionHandlers = ({
           onPress: async () => {
             try {
               await client.flagMessage(message.id);
-              Alert.alert(t('Message flagged'), t('The message has been reported to a moderator.'));
+              addNotification({
+                message: t('Message has been successfully flagged'),
+                options: { severity: 'success', type: 'api:message:flag:success' },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
             } catch (error) {
-              console.log('Error flagging message:', error);
-              Alert.alert(
-                t('Cannot Flag Message'),
-                t(
-                  'Flag action failed either due to a network issue or the message is already flagged',
-                ),
-              );
+              addNotification({
+                message: getErrorMessage(error, t('Error adding flag')),
+                options: {
+                  ...getNotificationErrorOptions(error),
+                  severity: 'error',
+                  type: 'api:message:flag:failed',
+                },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
             }
           },
           text: t('Flag'),
@@ -167,13 +264,26 @@ export const useMessageActionHandlers = ({
     }
     try {
       await channel.markUnread({ message_id: message.id });
+      addNotification({
+        message: t('Message marked as unread'),
+        options: { severity: 'success', type: 'api:message:markUnread:success' },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     } catch (error) {
-      console.log('Error marking message as unread:', error);
-      Alert.alert(
-        t(
-          'Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.',
+      addNotification({
+        message: getErrorMessage(
+          error,
+          t(
+            'Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.',
+          ),
         ),
-      );
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:message:markUnread:failed',
+        },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     }
   });
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -50,7 +50,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';

package/src/components/MessageInput/MessageComposerLeadingView.tsx

@@ -9,7 +9,7 @@ import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
 import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 
 export const MessageComposerLeadingView = () => {
   const {

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -17,7 +17,7 @@ import { useMessageInputContext } from '../../contexts/messageInputContext/Messa
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 
 export const MessageInputHeaderView = () => {
   const {

package/src/components/MessageInput/MessageInputTrailingView.tsx

@@ -11,7 +11,7 @@ import { useMessageInputContext } from '../../contexts/messageInputContext/Messa
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 
 export const MessageInputTrailingView = () => {
   const {

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -2,13 +2,22 @@ import React, { useMemo } from 'react';
 
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
-type AttachmentRemoveControlProps = PressableProps;
+type AttachmentRemoveControlProps = PressableProps & {
+  accessibilityLabelKey?: string;
+  accessibilityLabelParams?: Record<string, unknown>;
+};
 
-export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProps) => {
+export const AttachmentRemoveControl = ({
+  accessibilityLabelKey = 'a11y/Remove attachment',
+  accessibilityLabelParams,
+  onPress,
+  ...rest
+}: AttachmentRemoveControlProps) => {
   const {
     theme: {
       semantics,
@@ -18,9 +27,15 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
     },
   } = useTheme();
   const styles = useStyles();
+  const translatedAccessibilityLabel = useA11yLabel(
+    accessibilityLabelKey,
+    accessibilityLabelParams,
+  );
 
   return (
     <Pressable
+      accessibilityLabel={translatedAccessibilityLabel}
+      accessibilityRole='button'
       hitSlop={15}
       onPress={onPress}
       style={({ pressed }) => [
@@ -31,6 +46,7 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
         dismiss,
       ]}
       testID='remove-upload-preview'
+      {...rest}
     >
       <NewClose
         height={16}

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -29,6 +29,7 @@ import { useComponentsContext } from '../../../../contexts/componentsContext/Com
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useLazyRef } from '../../../../hooks/useLazyRef';
 import { isSoundPackageAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
 
@@ -73,16 +74,6 @@ const ItemSeparatorComponent = () => {
   return <View style={[styles.itemSeparator, itemSeparator]} />;
 };
 
-const useLazyRef = <T,>(getInitialValue: () => T) => {
-  const ref = useRef<T | null>(null);
-
-  if (ref.current === null) {
-    ref.current = getInitialValue();
-  }
-
-  return ref as React.RefObject<T>;
-};
-
 const getIsAudioAttachmentPreview =
   (soundPackageAvailable: boolean) =>
   (

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -23,6 +23,7 @@ import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications';
 
 type AudioRecorderPropsWithContext = Pick<
   MessageInputContextValue,
@@ -59,6 +60,7 @@ const StopRecording = ({
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Stop voice recording'
       variant='destructive'
       type='outline'
       size='sm'
@@ -83,6 +85,7 @@ const UploadRecording = ({
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Send voice recording'
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
@@ -98,12 +101,20 @@ const DeleteRecording = ({
 }: {
   deleteVoiceRecordingHandler: () => Promise<void>;
 }) => {
-  const onDeleteVoiceRecording = () => {
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
+  const onDeleteVoiceRecording = async () => {
     NativeHandlers.triggerHaptic('impactMedium');
-    deleteVoiceRecordingHandler();
+    await deleteVoiceRecordingHandler();
+    addNotification({
+      message: t('Voice message deleted'),
+      options: { severity: 'info', type: 'audioRecording:cancel:success' },
+      origin: { emitter: 'AudioRecorder' },
+    });
   };
   return (
     <Button
+      accessibilityLabelKey='a11y/Delete voice recording'
       variant='secondary'
       type='outline'
       size='sm'

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Alert, Linking, StyleSheet } from 'react-native';
+import { Linking, StyleSheet } from 'react-native';
 
 import { Gesture, GestureDetector, State } from 'react-native-gesture-handler';
 import Animated, {
@@ -10,6 +10,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useActiveAudioPlayer } from '../../../../contexts/audioPlayerContext/AudioPlayerContext';
 import {
   MessageInputContextValue,
@@ -23,6 +24,7 @@ import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications';
 import { ButtonStylesConfig, useButtonStyles } from '../../../ui/Button/hooks/useButtonStyles';
 import { useMicPositionContext } from '../../contexts/MicPositionContext';
 
@@ -83,6 +85,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const pressed = useSharedValue(false);
 
   const { t } = useTranslationContext();
+  const startVoiceRecordingAccessibilityLabel = useA11yLabel('a11y/Start voice recording');
   const {
     theme: {
       messageComposer: { micButtonContainer },
@@ -90,6 +93,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     },
   } = useTheme();
   const buttonStyles = useButtonStyles(buttonStylesConfig);
+  const { addNotification } = useNotificationApi();
 
   const onPressHandler = useStableCallback(() => {
     if (handlePress) {
@@ -97,7 +101,14 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     }
     if (!recording) {
       NativeHandlers.triggerHaptic('notificationError');
-      Alert.alert(t('Hold to start recording.'));
+      addNotification({
+        message: 'Hold to record. Release to save.',
+        options: {
+          severity: 'info',
+          type: 'validation:audio:recording:hold-required',
+        },
+        origin: { emitter: 'AudioRecordingButton' },
+      });
     }
   });
 
@@ -113,18 +124,23 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       }
       const permissionsGranted = await startVoiceRecording();
       if (!permissionsGranted) {
-        Alert.alert(t('Please allow Audio permissions in settings.'), '', [
-          {
-            onPress: () => {
-              Linking.openSettings();
-            },
-            text: t('Open Settings'),
+        addNotification({
+          message: 'Please allow Audio permissions in settings.',
+          options: {
+            actions: [
+              {
+                handler: () => {
+                  Linking.openSettings();
+                },
+                label: t('Open Settings'),
+              },
+            ],
+            duration: 0,
+            severity: 'warning',
+            type: 'permission:audio:recording:blocked',
           },
-          {
-            text: t('Cancel'),
-            style: 'cancel',
-          },
-        ]);
+          origin: { emitter: 'AudioRecordingButton' },
+        });
         return;
       }
       NativeHandlers.triggerHaptic('impactHeavy');
@@ -238,7 +254,12 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
 
   return (
     <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
-      <Animated.View style={[styles.container, animatedStyle, micButtonContainer]}>
+      <Animated.View
+        accessibilityLabel={startVoiceRecordingAccessibilityLabel}
+        accessibilityRole='button'
+        accessible
+        style={[styles.container, animatedStyle, micButtonContainer]}
+      >
         <Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
       </Animated.View>
     </GestureDetector>

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -10,6 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
+import { useAttachmentPickerState } from '../../../../hooks/useAttachmentPickerState';
 import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
@@ -18,6 +19,7 @@ type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttach
     disabled?: boolean;
     /** Function that opens attachment options bottom sheet */
     handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
+    isAttachmentPickerOpen?: boolean;
   } & { toggleAttachmentPicker: () => void };
 
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
@@ -25,6 +27,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
     disabled = false,
     handleAttachButtonPress,
     handleOnPress,
+    isAttachmentPickerOpen = false,
     toggleAttachmentPicker,
   } = props;
 
@@ -45,6 +48,9 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
 
   return (
     <Button
+      accessibilityLabelKey={
+        isAttachmentPickerOpen ? 'a11y/Close attachments' : 'a11y/Add attachment'
+      }
       variant='secondary'
       type='outline'
       size='lg'
@@ -61,15 +67,17 @@ const areEqual = (
   prevProps: AttachButtonPropsWithContext,
   nextProps: AttachButtonPropsWithContext,
 ) => {
-  const { handleOnPress: prevHandleOnPress } = prevProps;
-  const { handleOnPress: nextHandleOnPress } = nextProps;
+  const { handleOnPress: prevHandleOnPress, isAttachmentPickerOpen: prevIsAttachmentPickerOpen } =
+    prevProps;
+  const { handleOnPress: nextHandleOnPress, isAttachmentPickerOpen: nextIsAttachmentPickerOpen } =
+    nextProps;
 
   const handleOnPressEqual = prevHandleOnPress === nextHandleOnPress;
   if (!handleOnPressEqual) {
     return false;
   }
 
-  return true;
+  return prevIsAttachmentPickerOpen === nextIsAttachmentPickerOpen;
 };
 
 const MemoizedAttachButton = React.memo(
@@ -86,6 +94,7 @@ export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
   const { inputBoxRef, handleAttachButtonPress, openAttachmentPicker } = useMessageInputContext();
   const { attachmentPickerStore } = useAttachmentPickerContext();
+  const { selectedPicker } = useAttachmentPickerState();
 
   const toggleAttachmentPicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
@@ -100,6 +109,7 @@ export const AttachButton = (props: AttachButtonProps) => {
       {...{
         disableAttachmentPicker,
         handleAttachButtonPress,
+        isAttachmentPickerOpen: !!selectedPicker,
         toggleAttachmentPicker,
       }}
       {...props}

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -26,6 +26,7 @@ export const EditButton = (props: EditButtonProps) => {
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Save edited message'
       variant='primary'
       type='solid'
       LeadingIcon={Tick}

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -26,6 +26,7 @@ export const SendButton = (props: SendButtonProps) => {
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Send message'
       variant='primary'
       type='solid'
       disabled={disabled}

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -22,7 +22,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { transitions } from '../../../../utils/transitions';
+import { transitions } from '../../../../utils/animations/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 

package/src/components/MessageList/MessageFlashList.tsx

@@ -14,6 +14,7 @@ import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
+import { useScrollToBottomAccessibilityAction } from './hooks/useScrollToBottomAccessibilityAction';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
 import { useTypingUsers } from './hooks/useTypingUsers';
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
@@ -57,7 +58,7 @@ import { useStableCallback, useStateStore } from '../../hooks';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -297,6 +298,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
+    NotificationList,
     ScrollToBottomButton,
     StickyHeader,
     TypingIndicator,
@@ -920,6 +922,19 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     });
   });
 
+  const scrollToBottomUnreadCount =
+    scrollToBottomButtonVisible && !threadList ? channel?.countUnread() : undefined;
+  const {
+    accessibilityActions: messageListAccessibilityActions,
+    onAccessibilityAction: messageListOnAccessibilityAction,
+  } = useScrollToBottomAccessibilityAction({
+    accessibilityActions: additionalFlashListProps?.accessibilityActions,
+    onAccessibilityAction: additionalFlashListProps?.onAccessibilityAction,
+    onScrollToBottom: goToNewMessages,
+    unreadCount: scrollToBottomUnreadCount,
+    visible: scrollToBottomButtonVisible,
+  });
+
   const dismissImagePicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
       attachmentPickerStore.setSelectedPicker(undefined);
@@ -1072,10 +1087,17 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             testID='message-flash-list'
             viewabilityConfig={flatListViewabilityConfig}
             {...additionalFlashListPropsExcludingStyle}
+            accessibilityActions={messageListAccessibilityActions}
+            onAccessibilityAction={messageListOnAccessibilityAction}
           />
         </MessageListItemProvider>
       )}
-      <View style={styles.stickyHeaderContainer}>
+      <View
+        accessibilityElementsHidden
+        accessible={false}
+        importantForAccessibility='no-hide-descendants'
+        style={styles.stickyHeaderContainer}
+      >
         {messageListLengthAfterUpdate && StickyHeader ? (
           <StickyHeader date={stickyHeaderDate} />
         ) : null}
@@ -1094,7 +1116,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         <ScrollToBottomButton
           onPress={goToNewMessages}
           showNotification={scrollToBottomButtonVisible}
-          unreadCount={threadList ? 0 : channel?.countUnread()}
+          unreadCount={scrollToBottomUnreadCount}
         />
       </Animated.View>
       <NetworkDownIndicator />
@@ -1106,6 +1128,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </View>
       ) : null}
+      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
 };