stream-chat-react-native-core 9.12.1 → 10.0.0-beta.1

package/src/components/MessageList/hooks/useMessageListLiveState.ts

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from 'react';
+import { AppState } from 'react-native';
+
+import type { Channel, EventPayload, LocalMessage, MessagePaginator, Thread } from 'stream-chat';
+
+import { useStableCallback } from '../../../hooks';
+import type { MarkReadFunctionOptions } from '../../Channel/Channel';
+
+const hasReadLastMessage = (channel: Channel, userId: string) => {
+  const latestMessageIdInChannel = channel.messagePaginator.state
+    .getLatestValue()
+    .items?.at(-1)?.id;
+  const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
+  return latestMessageIdInChannel === lastReadMessageIdServer;
+};
+
+type UseMessageListLiveStateParams = {
+  channel: Channel;
+  markRead: (options?: MarkReadFunctionOptions) => void;
+  /** The list's paginator: the channel's, or the open thread's in a thread list. */
+  paginator: MessagePaginator | undefined;
+  /** The thread this list renders, if it is a thread's reply list. */
+  thread: Thread | undefined;
+  userId: string | undefined;
+};
+
+/**
+ * Tells `paginator` whether the user is viewing its latest messages: the app is in the foreground,
+ * the newest messages are loaded, and the newest one is on screen. While that holds, `stream-chat`
+ * does not count an incoming message as unread (`messagePaginator.isViewingLive`).
+ *
+ * A channel list also marks the channel read when a message arrives in that state. A thread list
+ * leaves the channel's flags alone: the channel list underneath it keeps reporting its own.
+ *
+ * @param params.channel The channel the list belongs to.
+ * @param params.markRead Marks the channel read.
+ * @param params.paginator The list's paginator.
+ * @param params.thread The thread this list renders, if any.
+ * @param params.userId The current user's ID.
+ * @returns A callback the list calls with the messages currently on screen.
+ */
+export const useMessageListLiveState = ({
+  channel,
+  markRead,
+  paginator,
+  thread,
+  userId,
+}: UseMessageListLiveStateParams) => {
+  const [isAppActive, setIsAppActive] = useState(() => AppState.currentState === 'active');
+  const isNewestMessageVisibleRef = useRef(false);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) =>
+      setIsAppActive(nextAppState === 'active'),
+    );
+    return () => subscription.remove();
+  }, []);
+
+  // Viewability reports on scroll; this reports when the app goes to or comes from the background.
+  // Reset on unmount, so a list that is gone never keeps unread counting switched off.
+  useEffect(() => {
+    if (!paginator) {
+      return;
+    }
+    paginator.setViewingLive(isAppActive && isNewestMessageVisibleRef.current);
+    return () => paginator.setViewingLive(false);
+  }, [isAppActive, paginator]);
+
+  useEffect(() => {
+    if (thread) {
+      return;
+    }
+
+    const handleEvent = (event: EventPayload<'message.new'>) => {
+      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+      if (!mainChannelUpdated || !userId) {
+        return;
+      }
+      const { firstUnreadMessageId } =
+        channel.messagePaginator.unreadStateSnapshot.getLatestValue();
+      if (
+        channel.messagePaginator.isViewingLive &&
+        !firstUnreadMessageId &&
+        !hasReadLastMessage(channel, userId)
+      ) {
+        markRead();
+      }
+    };
+
+    const listener = channel.on('message.new', handleEvent);
+    return () => listener.unsubscribe();
+  }, [channel, markRead, thread, userId]);
+
+  return useStableCallback((viewableMessages: LocalMessage[]) => {
+    if (!paginator) {
+      return;
+    }
+    // The last loaded message is the newest one only when nothing newer is left to load.
+    const { hasMoreHead, items } = paginator.state.getLatestValue();
+    const newestMessageId = hasMoreHead ? undefined : items?.at(-1)?.id;
+    isNewestMessageVisibleRef.current =
+      newestMessageId !== undefined &&
+      viewableMessages.some((message) => message.id === newestMessageId);
+    paginator.setViewingLive(isAppActive && isNewestMessageVisibleRef.current);
+  });
+};

package/src/components/MessageList/hooks/useMessageListPagination.ts

@@ -0,0 +1,74 @@
+import { useRef, useState } from 'react';
+
+import type { MessagePaginator } from 'stream-chat';
+
+import { useStableCallback, useStateStore } from '../../../hooks';
+
+const loadingSelector = (state: { isLoading: boolean; items?: unknown[] }) => ({
+  hasMessages: (state.items?.length ?? 0) > 0,
+  isLoading: state.isLoading,
+});
+
+/**
+ * Paging for a message list over `paginator`, the channel's or the open thread's.
+ *
+ * `loadMore` fetches older messages and `loadMoreRecent` newer ones. A request is ignored while the
+ * paginator is loading or has nothing more at that end, so the list can call these on every scroll
+ * event that reaches an edge. A request first waits for one in flight in the other direction, so
+ * the two never shift the scroll position under each other.
+ *
+ * @param paginator The channel's or the open thread's paginator.
+ * @returns The loading flags and the `loadMore` and `loadMoreRecent` callbacks.
+ */
+export const useMessageListPagination = (paginator?: MessagePaginator) => {
+  const { hasMessages, isLoading } = useStateStore(paginator?.state, loadingSelector) ?? {};
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [loadingMoreRecent, setLoadingMoreRecent] = useState(false);
+  const olderRequestRef = useRef<Promise<void>>(undefined);
+  const newerRequestRef = useRef<Promise<void>>(undefined);
+
+  const loadMore = useStableCallback(() => {
+    olderRequestRef.current ??= (async () => {
+      await newerRequestRef.current;
+      if (paginator?.hasMoreTail && !paginator.isLoading) {
+        setLoadingMore(true);
+        try {
+          await paginator.toTail();
+        } catch {
+          // The paginator records the failure in `state.lastQueryError`.
+        } finally {
+          setLoadingMore(false);
+        }
+      }
+      olderRequestRef.current = undefined;
+    })();
+    return olderRequestRef.current;
+  });
+
+  const loadMoreRecent = useStableCallback(() => {
+    newerRequestRef.current ??= (async () => {
+      await olderRequestRef.current;
+      if (paginator?.hasMoreHead && !paginator.isLoading) {
+        setLoadingMoreRecent(true);
+        try {
+          await paginator.toHead();
+        } catch {
+          // The paginator records the failure in `state.lastQueryError`.
+        } finally {
+          setLoadingMoreRecent(false);
+        }
+      }
+      newerRequestRef.current = undefined;
+    })();
+    return newerRequestRef.current;
+  });
+
+  return {
+    /** The first page is loading and there is nothing to show yet. */
+    loading: isLoading === true && !hasMessages,
+    loadingMore,
+    loadingMoreRecent,
+    loadMore,
+    loadMoreRecent,
+  };
+};

package/src/components/MessageList/hooks/useOwnUnreadCount.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+import type { Channel, ReadState } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+/**
+ * The current user's unread message count in `channel`, kept current as reads arrive. `undefined`
+ * when no channel is given, which also leaves the channel's state unsubscribed.
+ *
+ * @param channel The channel to count unread messages in.
+ * @returns The unread count, or `undefined` without a channel.
+ */
+export const useOwnUnreadCount = (channel: Channel | undefined) => {
+  const { client } = useChatContext();
+  const userId = client?.userId;
+  const selector = useMemo(
+    () => (state: ReadState) => ({
+      unreadCount: userId ? (state.read[userId]?.unread_messages ?? 0) : 0,
+    }),
+    [userId],
+  );
+  return useStateStore(channel?.state, selector)?.unreadCount;
+};

package/src/components/MessageList/hooks/useScrollToBottomAccessibilityAction.ts

@@ -17,11 +17,9 @@ type AccessibilityActions = ViewProps['accessibilityActions'];
 type OnAccessibilityAction = ViewProps['onAccessibilityAction'];
 
 /**
- * Declared explicitly rather than inferred. Left to inference, TypeScript expands
- * `AccessibilityActionEvent` into its structural shape when emitting the declaration, and that
- * shape names `HostInstance` - which React Native only exports from 0.78, while this SDK supports
- * `>=0.76`. Naming the props here keeps the emitted `.d.ts` referring to `ViewProps[...]`, which
- * resolves against whichever React Native the consumer actually has.
+ * Spelled out so the emitted `.d.ts` refers to `ViewProps[...]`, which resolves against the
+ * consumer's React Native. An inferred type expands `AccessibilityActionEvent` into a shape that
+ * names `HostInstance`.
  */
 export type UseScrollToBottomAccessibilityActionResult = {
   accessibilityActions: AccessibilityActions;

package/src/components/MessageList/hooks/useStickyHeaderDate.ts

@@ -0,0 +1,43 @@
+import { useRef, useState } from 'react';
+
+import type { LocalMessage } from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+
+import { useStableCallback } from '../../../hooks';
+
+/**
+ * The date the list's sticky header shows: the day of the topmost message on screen. Hidden once
+ * the oldest message of the whole list is on screen, where the inline date separator says the same.
+ *
+ * @returns `stickyHeaderDate` and `updateStickyHeaderDate`, which takes the topmost message.
+ */
+export const useStickyHeaderDate = () => {
+  const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
+  const stickyHeaderDateRef = useRef<Date | undefined>(undefined);
+
+  const updateStickyHeaderDate = useStableCallback(
+    ({
+      isAtOldestMessage,
+      topVisibleMessage,
+    }: {
+      isAtOldestMessage: boolean;
+      topVisibleMessage: LocalMessage;
+    }) => {
+      if (isAtOldestMessage) {
+        stickyHeaderDateRef.current = undefined;
+        setStickyHeaderDate(undefined);
+        return;
+      }
+      if (topVisibleMessage.type === 'deleted' || topVisibleMessage.created_at == null) {
+        return;
+      }
+      const date = convertTimestampToDate(topVisibleMessage.created_at);
+      if (date?.toDateString() !== stickyHeaderDateRef.current?.toDateString()) {
+        stickyHeaderDateRef.current = date;
+        setStickyHeaderDate(date);
+      }
+    },
+  );
+
+  return { stickyHeaderDate, updateStickyHeaderDate };
+};

package/src/components/MessageList/hooks/useTypingString.ts

@@ -15,18 +15,21 @@ export const useTypingString = () => {
   );
 
   if (typingUsernames.length === 1) {
-    return t('{{ user }} is typing', { user: typingUsernames[0] });
+    return t('channelPreview.typing.withUser.label', '{{ user }} is typing', {
+      user: typingUsernames[0],
+    });
   }
 
   if (typingUsernames.length > 1) {
-    /**
-     * Joins the multiple names with number after first name
-     * example: "Dan and Neil"
-     */
-    return t('{{ firstUser }} and {{ nonSelfUserLength }} more are typing', {
-      firstUser: typingUsernames[0],
-      nonSelfUserLength: typingUsernames.length - 1,
-    });
+    // The first name followed by the number of other typing users.
+    return t(
+      'messageList.typing.withMoreUsers.label',
+      '{{ firstUser }} and {{ nonSelfUserLength }} more are typing',
+      {
+        firstUser: typingUsernames[0],
+        nonSelfUserLength: typingUsernames.length - 1,
+      },
+    );
   }
 
   return '';

package/src/components/MessageList/hooks/useTypingUsers.ts

@@ -1,12 +1,39 @@
 import { useMemo } from 'react';
 
-import { useChatContext, useThreadContext, useTypingContext } from '../../../contexts';
+import { Channel, TypingUsersState } from 'stream-chat';
+
+import { useChannelContext, useChatContext, useThreadContext } from '../../../contexts';
+import { useStateStore } from '../../../hooks';
 import { filterTypingUsers } from '../utils/filterTypingUsers';
 
-export const useTypingUsers = () => {
+const selector = (state: TypingUsersState) => ({ typing: state.typing });
+
+/**
+ * The users typing in `channel`, without the current user, from `channel.state.typing`.
+ * With `threadId` only that thread's typing counts; without it, only the channel's own.
+ *
+ * The channel is a parameter rather than read from context, so this works outside a `<Channel>`
+ * provider, such as in channel preview rows.
+ *
+ * @param channel The channel to watch.
+ * @param threadId The thread to watch instead of the channel's main list.
+ * @returns The typing users.
+ */
+export const useChannelTypingUsers = (channel: Channel, threadId?: string) => {
   const { client } = useChatContext();
+  const { typing } = useStateStore(channel.state, selector) ?? { typing: {} };
+
+  return useMemo(() => filterTypingUsers({ client, threadId, typing }), [client, threadId, typing]);
+};
+
+/**
+ * {@link useChannelTypingUsers} for the channel, and open thread if any, from context.
+ *
+ * @returns The typing users.
+ */
+export const useTypingUsers = () => {
+  const { channel } = useChannelContext();
   const { thread } = useThreadContext();
-  const { typing } = useTypingContext();
 
-  return useMemo(() => filterTypingUsers({ client, thread, typing }), [client, thread, typing]);
+  return useChannelTypingUsers(channel, thread?.id);
 };

package/src/components/MessageList/hooks/useUnreadNotificationVisibility.ts

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+
+import type { Channel, LocalMessage } from 'stream-chat';
+
+import { useStableCallback } from '../../../hooks';
+import type { AttachmentPickerStore } from '../../../state-store/attachment-picker-store';
+import type { MarkReadFunctionOptions } from '../../Channel/Channel';
+
+type UseUnreadNotificationVisibilityParams = {
+  attachmentPickerStore: AttachmentPickerStore;
+  channel: Channel;
+  markRead: (options?: MarkReadFunctionOptions) => Promise<void> | void;
+  readEvents: boolean | undefined;
+  userId: string | undefined;
+};
+
+/**
+ * Tracks whether the unread notification is shown at the top of a channel's message list: the user
+ * has scrolled up past the last message they read, and that message is no longer on screen.
+ *
+ * @param params.attachmentPickerStore Hides the notification while the images picker is open.
+ * @param params.channel The channel the list belongs to.
+ * @param params.markRead Marks the channel read when the notification is closed.
+ * @param params.readEvents Whether the channel has read events enabled.
+ * @param params.userId The current user's ID.
+ * @returns `isUnreadNotificationOpen`, `onUnreadNotificationClose` (marks the channel read and
+ * hides the notification) and `updateUnreadNotification` (call it with the messages on screen).
+ */
+export const useUnreadNotificationVisibility = ({
+  attachmentPickerStore,
+  channel,
+  markRead,
+  readEvents,
+  userId,
+}: UseUnreadNotificationVisibilityParams) => {
+  const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState(false);
+
+  const updateUnreadNotification = useStableCallback(
+    ({
+      isAtOldestMessage,
+      topVisibleMessage,
+      viewableMessages,
+    }: {
+      isAtOldestMessage: boolean;
+      topVisibleMessage: LocalMessage | undefined;
+      viewableMessages: LocalMessage[];
+    }) => {
+      const { firstUnreadMessageId, lastReadAt, lastReadMessageId, unreadCount } =
+        channel.messagePaginator.unreadStateSnapshot.getLatestValue();
+      // Only the last read message going off screen opens it, not ordinary scrolling past old ones.
+      const lastReadMessageVisible = viewableMessages.some(
+        (message) => message.id === lastReadMessageId,
+      );
+      // Channels without read events (livestreams) still show it when they count unread locally.
+      const unreadNotificationSupported =
+        readEvents || channel.config.readEvents.localUnreadCountEnabled;
+
+      if (
+        !topVisibleMessage ||
+        !unreadNotificationSupported ||
+        lastReadMessageVisible ||
+        attachmentPickerStore.state.getLatestValue().selectedPicker === 'images' ||
+        isAtOldestMessage
+      ) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+
+      // A single long own message is marked read before it has a `created_at`, which would
+      // otherwise open the notification right after sending it.
+      if (
+        viewableMessages.length === 1 &&
+        channel.countUnread() === 0 &&
+        topVisibleMessage.user?.id === userId
+      ) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+
+      // With no read state at all there is no boundary to compare against.
+      const hasUnreadState = firstUnreadMessageId || lastReadMessageId || unreadCount;
+      setIsUnreadNotificationOpen(
+        Boolean(hasUnreadState) && topVisibleMessage.created_at > (lastReadAt ?? 0),
+      );
+    },
+  );
+
+  const onUnreadNotificationClose = useStableCallback(async () => {
+    await markRead();
+    setIsUnreadNotificationOpen(false);
+  });
+
+  return { isUnreadNotificationOpen, onUnreadNotificationClose, updateUnreadNotification };
+};

package/src/components/MessageList/utils/buildMessageListWithNeighbours.ts

@@ -6,12 +6,23 @@ export type MessageListItemWithNeighbours = {
   message: LocalMessage;
 };
 
+/**
+ * The stable identity of a message row, used as both the list render key and the neighbour-cache
+ * key. The two must agree: otherwise the cache stores a row under one key while the list renders it
+ * under another, and memoization never hits.
+ *
+ * @param item The message of the row.
+ * @param index The position of the row, used when the message has neither an ID nor a timestamp.
+ * @returns The row key.
+ */
 export const getMessageListItemCacheKey = (item: LocalMessage, index: number) => {
   if (item.id) {
     return item.id;
   }
-  if (item.created_at) {
-    return typeof item.created_at === 'string' ? item.created_at : item.created_at.toISOString();
+  // Nullish check: `created_at` is in unix nanoseconds and `0` is valid. The index fallback shifts
+  // as pages load.
+  if (item.created_at != null) {
+    return String(item.created_at);
   }
   return `index-${index}`;
 };

package/src/components/MessageList/utils/filterTypingUsers.ts

@@ -1,14 +1,13 @@
-import { UserResponse } from 'stream-chat';
+import { EventPayload, TypingUsersState, UserResponse } from 'stream-chat';
 
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type { TypingContextValue } from '../../../contexts/typingContext/TypingContext';
 
-type FilterTypingUsersParams = Pick<TypingContextValue, 'typing'> &
-  Pick<ChatContextValue, 'client'> &
-  Pick<ThreadContextValue, 'thread'>;
+type FilterTypingUsersParams = { threadId?: string; typing: TypingUsersState['typing'] } & Pick<
+  ChatContextValue,
+  'client'
+>;
 
-export const filterTypingUsers = ({ client, thread, typing }: FilterTypingUsersParams) => {
+export const filterTypingUsers = ({ client, threadId, typing }: FilterTypingUsersParams) => {
   const nonSelfUsers: UserResponse[] = [];
 
   if (!client || !client.user || !typing) {
@@ -18,24 +17,25 @@ export const filterTypingUsers = ({ client, thread, typing }: FilterTypingUsersP
   const typingKeys = Object.keys(typing);
 
   typingKeys.forEach((typingKey) => {
-    if (!typing[typingKey]) {
+    const typingEvent = typing[typingKey] as EventPayload<'typing.start' | 'typing.stop'>;
+    if (!typingEvent) {
       return;
     }
 
-    /** removes own typing events */
-    if (client.user?.id === typing[typingKey].user?.id) {
+    // Skip own typing events.
+    if (client.user?.id === typingEvent.user?.id) {
       return;
     }
 
-    const isRegularEvent = !typing[typingKey].parent_id && !thread?.id;
-    const isCurrentThreadEvent = typing[typingKey].parent_id === thread?.id;
+    const isRegularEvent = !typingEvent.parent_id && !threadId;
+    const isCurrentThreadEvent = typingEvent.parent_id === threadId;
 
-    /** filters different threads events */
+    // Skip events of other threads.
     if (!isRegularEvent && !isCurrentThreadEvent) {
       return;
     }
 
-    const user = typing[typingKey].user;
+    const user = typingEvent.user;
     if (user) {
       nonSelfUsers.push(user);
     }

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -1,5 +1,7 @@
 import { LocalMessage } from 'stream-chat';
 
+import { nsToMs } from 'stream-chat';
+
 import { isEditedMessage } from '../../../utils/utils';
 
 export type MessageGroupStylesParams = {
@@ -14,7 +16,15 @@ export type MessageGroupStylesParams = {
 export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
 /**
- * Get the group styles for a message
+ * Returns the group style of a message: `top`, `bottom`, `middle` or `single`.
+ *
+ * @param params.message The message to style.
+ * @param params.previousMessage The message rendered before it.
+ * @param params.nextMessage The message rendered after it.
+ * @param params.maxTimeBetweenGroupedMessages Longest gap, in milliseconds, within a group.
+ * @param params.nextMessageDateSeparatorDate Date of the separator above the next message, if any.
+ * @param params.dateSeparatorDate Date of the separator above the message, if any.
+ * @returns An array holding the message's group style.
  */
 export const getGroupStyle = ({
   message,
@@ -33,7 +43,7 @@ export const getGroupStyle = ({
     previousMessage.type === 'system' ||
     previousMessage.type === 'error' ||
     userId !== previousMessage?.user?.id ||
-    // NOTE: This is needed for the group styles to work after the message separated by date.
+    // A date separator above the message starts a new group.
     dateSeparatorDate ||
     isEditedMessage(previousMessage);
 
@@ -44,26 +54,15 @@ export const getGroupStyle = ({
     userId !== nextMessage?.user?.id ||
     nextMessageDateSeparatorDate ||
     (maxTimeBetweenGroupedMessages !== undefined &&
-      (nextMessage.created_at as Date).getTime() - (message.created_at as Date).getTime() >
-        maxTimeBetweenGroupedMessages) ||
+      nsToMs(nextMessage.created_at - message.created_at) > maxTimeBetweenGroupedMessages) ||
     isEditedMessage(message);
 
-  /**
-   * Add group styles key for top message
-   */
   if (isTopMessage) {
     groupStyles.push('top');
   }
 
-  /**
-   * Add group styles key for bottom message
-   */
-
   if (isBottomMessage) {
-    /**
-     * If the bottom message is also the top, or deleted, or an error,
-     * add the key for single message instead of bottom
-     */
+    // A message that is also the top, or an error, is `single` instead of `bottom`.
     if (isTopMessage || message.type === 'error') {
       groupStyles.splice(0, groupStyles.length);
       groupStyles.push('single');
@@ -72,10 +71,7 @@ export const getGroupStyle = ({
     }
   }
 
-  /**
-   * Add the key for all non top or bottom messages, if the message is
-   * deleted or an error add the key for single otherwise middle
-   */
+  // Neither top nor bottom: `middle`, or `single` for an error.
   if (!isTopMessage && !isBottomMessage) {
     if (message.type === 'error') {
       groupStyles.splice(0, groupStyles.length);

package/src/components/MessageMenu/EmojiPickerList.tsx

@@ -51,7 +51,7 @@ export const EmojiPickerList = ({
   renderFullInitially = true,
 }: {
   onSelectReaction: (unicode: string) => void;
-  // whether all of the items should be rendered initially or not
+  // Whether every emoji renders on the first pass. Defaults to true.
   renderFullInitially?: boolean;
 }) => {
   const styles = useStyles();
@@ -76,11 +76,8 @@ export const EmojiPickerList = ({
       keyExtractor={emojiKeyExtractor}
       numColumns={7}
       removeClippedSubviews={false}
-      // This is sort of needed in some instances, because when virtualization
-      // kicks in it messes with the animations, as more native views get their
-      // bindings to JS. For the reactions specifically it does not really
-      // matter as they aren't too heavy - but we should anyway revisit
-      // this in the future.
+      // Needed in some cases: virtualization interferes with the animations, as more native views
+      // get bound to JS. Reactions are light, so rendering them all up front is cheap.
       initialNumToRender={renderFullInitially ? emojis.length : undefined}
       renderItem={renderEmoji}
     />

package/src/components/MessageMenu/MessageActionList.tsx

@@ -11,21 +11,14 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type MessageActionListProps = {
-  /**
-   * Function to close the message actions bottom sheet
-   * @returns void
-   */
-  dismissOverlay?: () => void;
-  /**
-   * An array of message actions to render
-   */
+  /** The actions to render. */
   messageActions?: MessageActionType[];
 };
 
 export const MessageActionList = (props: MessageActionListProps) => {
   const { messageActions } = props;
   const { MessageActionListItem } = useComponentsContext();
-  const a11yLabel = useA11yLabel('a11y/Message actions');
+  const a11yLabel = useA11yLabel('messageMenu.actionList.accessibilityLabel');
   const {
     theme: {
       messageMenu: {
@@ -62,7 +55,7 @@ export const MessageActionList = (props: MessageActionListProps) => {
       {destructiveActions?.map((messageAction, index) => (
         <MessageActionListItem
           key={messageAction.title}
-          {...{ ...messageAction, index, length: standardActions.length }}
+          {...{ ...messageAction, index, length: destructiveActions.length }}
         />
       ))}
     </ScrollView>