stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.2

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -29,14 +29,12 @@ export const dismissKeyboard = () => {
 };
 
 /**
- * Whether the app runs edge-to-edge on Android (drawing behind the system bars). React Native
- * exposes this as a `DeviceInfo` native constant. It's a static, app-level value, so we read it
- * once and cache it. Defaults to `false` if the constant is unavailable (older RN / iOS).
+ * Whether the app runs edge-to-edge on Android, read once from the `DeviceInfo` native constant and
+ * cached. `false` on iOS or when the constant is unavailable.
  *
- * We need it to decide whether the OS resizes the window when the soft keyboard opens:
- * edge-to-edge apps do NOT resize (RN dispatches insets instead), non edge-to-edge apps use
- * `adjustResize` and the window shrinks. `Dimensions.screen - Dimensions.window` alone cannot
- * tell them apart, because on API < 35 the bars are reported as an inset in BOTH cases.
+ * Edge-to-edge apps do not resize the window when the keyboard opens, others do (`adjustResize`).
+ * `Dimensions.screen - Dimensions.window` cannot tell them apart: below API 35 the bars are an
+ * inset in both cases.
  */
 let cachedIsEdgeToEdge: boolean | undefined;
 const getIsEdgeToEdge = (): boolean => {
@@ -61,10 +59,8 @@ type State = {
 };
 
 /**
- * View that moves out of the way when the keyboard appears by automatically
- * adjusting its height, position, or bottom padding.
- *
- * Following piece of code has been mostly copied from KeyboardAvoidingView component, with few additional tweaks.
+ * View that moves out of the way when the keyboard appears by adjusting its height, position, or
+ * bottom padding. Adapted from React Native's `KeyboardAvoidingView`.
  */
 export class KeyboardCompatibleView extends React.Component<
   KeyboardAvoidingViewProps,
@@ -76,7 +72,7 @@ export class KeyboardCompatibleView extends React.Component<
   > = {
     behavior: 'padding',
     enabled: true,
-    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // Default MessageComposer height.
   };
 
   _frame: LayoutRectangle | null = null;
@@ -114,25 +110,15 @@ export class KeyboardCompatibleView extends React.Component<
     const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
 
     if (Platform.OS === 'android') {
-      // On Android, whether we need a JS offset depends on whether the OS resizes the
-      // window when the soft keyboard opens:
-      //
-      // - Non edge-to-edge apps use `adjustResize`: the OS shrinks the window and already
-      //   keeps the composer above the keyboard, so no JS offset is needed. Applying one
-      //   anyway double offsets the view and because our layout `frame` only reflects the
-      //   resize a render AFTER `keyboardDidShow` fires, that offset is briefly computed
-      //   from the stale, full height frame and stacked on top of the native resize. That
-      //   manifests as a transient jump to a very high point that then settles, more commonly
-      //   seen on devices such as Samsung on Android 13. So here we skip the JS offset entirely.
-      //
-      // - Edge-to-edge apps (the platform default on Android 15/API 35+ and optin below
-      //   that) do NOT resize the window for the keyboard, so the JS offset below is the only
-      //   thing keeping the composer visible and must be applied.
-      //
-      // `screen - window` reflects the system bar inset, which is present on non edge-to-edge
-      // AND on edge-to-edge below API 35, so it can't distinguish the two on its own. We pair
-      // it with the `isEdgeToEdge` native flag: only skip the offset when the bars are inset
-      // (there is room for `adjustResize` to shrink into) AND the app is not edge-to-edge.
+      // Without edge-to-edge the OS resizes the window (`adjustResize`) and already keeps the
+      // composer above the keyboard, so no JS offset is applied. The layout `frame` only reflects
+      // the resize a render after `keyboardDidShow`, so an offset would be computed from the stale
+      // full-height frame and stack on the native resize, causing a transient jump (seen on
+      // Samsung, Android 13). Edge-to-edge apps (the default from API 35) do not resize, so the JS
+      // offset is required.
+      // `screen - window` is the system bar inset, present in both modes below API 35, so it is
+      // paired with `isEdgeToEdge`: the offset is skipped only when the bars are inset and the app
+      // is not edge-to-edge.
       const systemBarsInset = Dimensions.get('screen').height - Dimensions.get('window').height;
       if (systemBarsInset > 0 && !getIsEdgeToEdge()) {
         return 0;
@@ -143,13 +129,11 @@ export class KeyboardCompatibleView extends React.Component<
       return Math.max(this.state.bottom + frame.y + frame.height - keyboardY, 0);
     }
 
-    // Calculate the displacement needed for the view such that it
-    // no longer overlaps with the keyboard
+    // Displacement needed to keep the view clear of the keyboard.
     const relativeHeight = Math.max(frame.y + frame.height - keyboardY, 0);
 
     if (Platform.OS === 'android') {
-      // Edge-to-edge only reaches here (systemBarsInset === 0 above): guard against
-      // sub status bar noise so we don't apply a tiny bogus offset.
+      // Offsets at or below the status bar height are noise, not a keyboard overlap.
       const systemInsetFloor = StatusBar.currentHeight ?? 0;
       if (relativeHeight <= systemInsetFloor) {
         return 0;
@@ -175,11 +159,11 @@ export class KeyboardCompatibleView extends React.Component<
     const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
-      // save the initial frame height, before the keyboard is visible
+      // Initial frame height, captured before the keyboard is visible.
       this._initialFrameHeight = this._frame.height;
     }
 
-    // update bottom height for the first time or when the height is changed
+    // Recompute on the first layout and whenever the height changes.
     if (!oldFrame || oldFrame.height !== this._frame.height) {
       await this._updateBottomIfNecessary();
     }
@@ -189,7 +173,7 @@ export class KeyboardCompatibleView extends React.Component<
     }
   };
 
-  // Avoid unnecessary renders if the KeyboardAvoidingView is disabled.
+  // No state update when disabled, to avoid unnecessary renders.
   _setBottom = (value: number) => {
     const enabled = this.props.enabled ?? true;
     this._bottom = value;
@@ -291,7 +275,7 @@ export class KeyboardCompatibleView extends React.Component<
   }
 
   componentWillUnmount() {
-    // Following if-else condition to avoid deprecated warning coming RN 0.65
+    // `removeEventListener` fallback for RN versions whose subscription has no `remove()`.
     if (this._appStateSubscription?.remove) {
       this._appStateSubscription?.remove();
     }
@@ -313,10 +297,9 @@ export class KeyboardCompatibleView extends React.Component<
         // eslint-disable-next-line no-case-declarations
         let heightStyle;
         if (this._frame !== null && this.state.bottom > 0) {
-          // Note that we only apply a height change when there is keyboard present,
-          // i.e. this.state.bottom is greater than 0. If we remove that condition,
-          // this.frame.height will never go back to its original value.
-          // When height changes, we need to disable flex.
+          // Applied only while the keyboard is present (`state.bottom > 0`), otherwise
+          // `frame.height` never returns to its original value. Flex is disabled so the height
+          // wins.
           heightStyle = {
             flex: 0,
             height: this._initialFrameHeight - bottomHeight,

package/src/components/Message/Message.tsx

@@ -101,16 +101,9 @@ export type TouchableEmitter =
   | 'reactionList';
 
 export type TextMentionTouchableHandlerAdditionalInfo = {
-  /**
-   * The typed mention entity for the pressed mention (user / channel / here /
-   * role / user_group). Always populated by the default renderText pipeline;
-   * undefined only when a custom renderer doesn't resolve a match.
-   */
+  /** The pressed mention entity. Undefined when the pressed text matches no known mention. */
   mentionedEntity?: MentionEntity;
-  /**
-   * Back-compat: still populated when the mention is a user, so existing
-   * integrators reading `additionalInfo.user` keep working.
-   */
+  /** The pressed user, set only when the mention is a user. */
   user?: UserResponse;
 };
 
@@ -143,11 +136,7 @@ export type GalleryThumbnailTouchableHandlerPayload = {
 };
 
 export type ReactionListTouchableHandlerAdditionalInfo = {
-  /**
-   * The reaction type of the pressed reaction. Populated for presses that
-   * originate from a single reaction (segmented list item/clustered pill),
-   * undefined for the "+N more" overflow item.
-   */
+  /** Type of the pressed reaction. Undefined for the clustered list and the "+N more" item. */
   reactionType?: string;
 };
 
@@ -175,17 +164,11 @@ export type PressableHandlerPayload = {
 );
 
 export type MessagePressableHandlerPayload = PressableHandlerPayload & {
-  /**
-   * Set of action handler functions for various message actions. You can use these functions to perform any action when give interaction occurs.
-   */
+  /** Handlers of the message actions, to run an action from a custom handler. */
   actionHandlers?: MessageActionHandlers;
-  /**
-   * Additional message touchable handler info.
-   */
+  /** Extra info about the interaction. */
   additionalInfo?: Record<string, unknown>;
-  /**
-   * Message object, on which interaction occurred.
-   */
+  /** Message the interaction occurred on. */
   message?: LocalMessage;
 };
 
@@ -238,14 +221,12 @@ export type MessagePropsWithContext = Pick<
   > &
   Pick<TranslationContextValue, 't'> & {
     messagesContext: MessagesContextValue;
-    /**
-     * Whether or not users are able to long press messages.
-     */
+    /** Whether long pressing a message is enabled. Defaults to true. */
     enableLongPress?: boolean;
     goToMessage?: (messageId: string) => void;
     isTargetedMessage?: boolean;
     /**
-     * Handler to open the thread on message. This is callback for touch event for replies button.
+     * Called with the message's thread when its replies button is pressed.
      *
      * @param thread The thread of the message, to render in a `<Thread thread={thread}>`.
      */
@@ -255,9 +236,7 @@ export type MessagePropsWithContext = Pick<
   } & Pick<MessageComposerAPIContextValue, 'setQuotedMessage' | 'setEditingState'>;
 
 /**
- * Since this component doesn't consume `messages` from `MessagesContext`,
- * we memoized and broke it up to prevent new messages from re-rendering
- * each individual Message component.
+ * Does not read `messages` from `MessagesContext`, so new messages do not re-render every Message.
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
   const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
@@ -387,15 +366,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       dismissKeyboard();
     }
     if (error) {
-      /**
-       * If its a Blocked message, we don't do anything as per specs.
-       */
+      // Blocked messages do nothing on press.
       if (isBlockedMessage(message)) {
         return;
       }
-      /**
-       * If its a Bounced message, we open the message bounced options modal.
-       */
+      // Bounced messages open the bounce options dialog.
       if (isBouncedMessage(message)) {
         setIsBounceDialogOpen(true);
         return;
@@ -416,20 +391,15 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       : 'right'
     : alignment;
 
-  /**
-   * attachments contain files/images or other attachments
-   *
-   * if a URL attachment is present with a file/image then we
-   * show just the text and markdown should make the link
-   * clickable
-   */
+  // Groups attachments by kind. A file, playable video or image clears `other` (such as URL
+  // previews), so only the text remains and its markdown makes the link clickable.
   const attachments =
     !isMessageTypeDeleted && Array.isArray(message.attachments)
       ? message.attachments.reduce(
           (acc, cur) => {
             if (cur.type === FileTypes.File) {
               acc.files.push(cur);
-              acc.other = []; // remove other attachments if a file exists
+              acc.other = [];
             } else if (
               cur.type === FileTypes.Video &&
               !cur.og_scrape_url &&
@@ -444,22 +414,19 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
               acc.other = [];
             } else if (cur.type === FileTypes.Video && !cur.og_scrape_url) {
               acc.files.push(cur);
-              acc.other = []; // remove other attachments if a file exists
+              acc.other = [];
             } else if (cur.type === FileTypes.Audio || cur.type === FileTypes.VoiceRecording) {
               acc.files.push(cur);
             } else if (cur.type === FileTypes.Image && !cur.title_link && !cur.og_scrape_url) {
-              /**
-               * this next if is not combined with the above one for cases where we have
-               * an image with no url links at all falling back to being an attachment
-               */
+              // An image without a preview URL is neither collected nor added to `other`.
               if (getAttachmentPreviewUrl(cur, cur.image_url, cur.thumb_url)) {
                 acc.images.push(cur);
-                acc.other = []; // remove other attachments if an image exists
+                acc.other = [];
               }
-              // only add other attachments if there are no files/images
             } else if (cur.type === FileTypes.Image && (cur.og_scrape_url || cur.title_link)) {
               acc.files.push(cur);
             } else if (!acc.files.length && !acc.images.length && !acc.videos.length) {
+              // Other attachments are kept only while there are no files, images or videos.
               acc.other.push(cur);
             }
 
@@ -478,9 +445,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           other: [] as Attachment[],
           videos: [] as Attachment[],
         };
-  /**
-   * Check if any actions to prevent long press
-   */
+  // Attachment actions disable long press and the quoted reply content.
   const hasAttachmentActions =
     !isMessageTypeDeleted &&
     Array.isArray(message.attachments) &&
@@ -600,7 +565,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     if (hasAttachmentActions || isBlockedMessage(message) || !enableLongPress) {
       return;
     }
-    // If a message is bounced, on long press the message bounce options modal should open.
+    // Bounced messages open the bounce options dialog on long press.
     if (isBouncedMessage(message)) {
       setIsBounceDialogOpen(true);
       return;
@@ -1005,8 +970,7 @@ export type MessageProps = Partial<
   Pick<MessagePropsWithContext, 'groupStyles' | 'message'>;
 
 /**
- * Message - A high level component which implements all the logic required for a message.
- * The actual rendering of the message is delegated via the "Message" property
+ * Implements the logic of a message and renders it through the `MessageItemView` component slot.
  *
  * @example ./Message.md
  */

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -18,13 +18,10 @@ import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 type SentToChannelHeaderPropsWithContext = Pick<ThreadContextValue, 'thread'> & {
-  /**
-   * Function to handle press on the sent to channel header
-   * @returns void
-   */
+  /** Called when the header is pressed. */
   onPress: () => void;
   /**
-   * Boolean to show the view text
+   * Whether to show the "view" text.
    * @default false
    */
   showViewText?: boolean;

package/src/components/Message/MessageItemView/MessageBlocked.tsx

@@ -9,15 +9,11 @@ import { primitives } from '../../../theme';
 export type MessageBlockedProps = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: LocalMessage;
-  /**
-   * Additional styles for the system message container.
-   */
+  /** Additional styles for the container. */
   style?: StyleProp<ViewStyle>;
 };
 
-/**
- * A component to display blocked message. e.g, when a message is blocked by moderation policies.
- */
+/** Displays a message that was blocked, such as by moderation policies. */
 export const MessageBlocked = (props: MessageBlockedProps) => {
   const { message, style } = props;
 

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -73,35 +73,22 @@ export type MessageContentPropsWithContext = Pick<
     | 'myMessageTheme'
   > &
   Pick<TranslationContextValue, 't'> & {
-    /**
-     * Background color for the message content
-     */
+    /** Background color of the message content. */
     backgroundColor?: ColorValue;
-    /**
-     * If the message is the very last message in the message list
-     */
+    /** Whether the message is the very last one in the message list. */
     isVeryLastMessage?: boolean;
-    /**
-     * If the message has no border radius
-     */
+    /** Removes the border width of the bubble. */
     noBorder?: boolean;
-    /**
-     * If the message is grouped in a single or bottom container
-     */
+    /** Whether the message is the single or bottom one of its group. Defaults to false. */
     messageGroupedSingleOrBottom?: boolean;
 
-    /**
-     * If the message has a single file
-     */
+    /** Whether the message has a single file. */
     isSingleFile?: boolean;
     hidePaddingTop?: boolean;
     hidePaddingHorizontal?: boolean;
     hidePaddingBottom?: boolean;
   };
 
-/**
- * Child of MessageItemView that displays a message's content
- */
 const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const {
     additionalPressableProps,
@@ -176,10 +163,8 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     [message, isMessageAIGenerated],
   );
 
-  // Merged background-color + border-radius object passed directly into the
-  // bubble's style array (no spread at the call site). Theme-defined radii
-  // override the group-position-computed defaults; theme-undefined radii are
-  // omitted so they don't override the computed defaults.
+  // Background color and border radii of the bubble. Theme-defined radii override the radii
+  // computed from the group position; undefined theme radii are omitted so they do not.
   const bubbleColorAndRadius = useMemo<ViewStyle>(() => {
     // enum('top', 'middle', 'bottom', 'single')
     const groupPosition = groupStyles?.[0];
@@ -196,8 +181,8 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       }
     }
 
-    // Built in one literal rather than by mutation: React Native 0.87 types style objects as
-    // `Readonly`, so assigning onto an already-typed `ViewStyle` no longer compiles.
+    // Built as one literal: React Native types style objects as `Readonly`, so assigning onto a
+    // typed `ViewStyle` does not compile.
     const style: ViewStyle = {
       backgroundColor,
       borderBottomLeftRadius: borderBottomLeftRadius ?? computedBottomLeftRadius,
@@ -226,9 +211,8 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const messageTextContainerStyles = useMemo(() => {
     return {
       textContainer: {
-        // Cancel the container's 8px inter-item gap so only the caption's own
-        // paragraph marginTop shows. Skip for the first item: there is no gap to
-        // cancel
+        // Cancels the container's inter-item `gap` so only the caption's own paragraph `marginTop`
+        // shows. Not used for the first item, which has no gap above it.
         marginTop: -gap,
       },
     };
@@ -601,9 +585,7 @@ const MemoizedMessageContent = React.memo(
 
 export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 
-/**
- * Child of MessageItemView that displays a message's content
- */
+/** Displays the content of a message inside `MessageItemView`. */
 export const MessageContent = (props: MessageContentProps) => {
   const {
     alignment,

package/src/components/Message/MessageItemView/MessageFooter.tsx

@@ -25,10 +25,8 @@ type MessageFooterComponentProps = {
   formattedDate?: string | Date;
 };
 
-// The sender name is shown only in group channels (not 1:1 DMs). We derive that from `memberCount`
-// reactively off `channel.state` rather than threading `members` through the message context — the
-// footer is the only consumer of channel membership, and it only needs this one boolean. `memberCount`
-// changes far less often than the `members` map (which churns on presence, watchers, adds/removes).
+// The sender name is shown only in group channels, so a channel of 2 members counts as a DM.
+// `memberCount` changes far less often than the `members` map (presence, watchers, adds/removes).
 const isDirectChannelSelector = (state: { memberCount: number }) => ({
   isDirectChannel: state.memberCount === 2,
 });

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -78,7 +78,7 @@ const useStyles = ({ alignment }: { alignment: Alignment }) => {
           ...bubbleWrapper,
         },
         repliesContainer: {
-          marginTop: -primitives.spacingXxs, // Reducing the margin to account the gap added in the content container
+          marginTop: -primitives.spacingXxs, // Offsets the gap added by the content container
           zIndex: 0,
           ...repliesContainer,
         },
@@ -403,10 +403,7 @@ const MemoizedMessageItemView = React.memo(
 
 export type MessageItemViewProps = Partial<MessageItemViewPropsWithContext>;
 
-/**
- *
- * Message UI component
- */
+/** Renders the UI of a message. */
 export const MessageItemView = (props: MessageItemViewProps) => {
   const {
     alignment,

package/src/components/Message/MessageItemView/MessageReplies.tsx

@@ -206,7 +206,7 @@ const useStyles = () => {
         flexDirection: 'row',
         alignItems: 'center',
         gap: primitives.spacingXs,
-        marginTop: -primitives.spacingMd, // Pulling the replies container up to hide the stick in the message content
+        marginTop: -primitives.spacingMd, // Pulls up to hide the stick in the message content
       },
       content: {
         alignSelf: 'flex-end',

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -166,10 +166,8 @@ const areEqual = (
     return false;
   }
 
-  // Enhanced mention sources (channel/here/roles/groups) — without these the
-  // renderText cache would refresh on a new entity but this comparator would
-  // short-circuit it away and the highlight would not appear until something
-  // else re-rendered the row.
+  // Channel, here, role and group mentions: without these checks the comparator would block the
+  // `renderText` refresh for a new entity, so the highlight would wait for another re-render.
   const mentionedBroadcastEqual =
     prevMessage.mentioned_channel === nextMessage.mentioned_channel &&
     prevMessage.mentioned_here === nextMessage.mentioned_here;
@@ -191,11 +189,8 @@ const areEqual = (
     return false;
   }
 
-  // stringify could be an expensive operation, so lets rule out the obvious
-  // possibilities first such as different object reference or empty objects etc.
-  // Also keeping markdown equality check at the last to make sure other less
-  // expensive equality checks get executed first and markdown check will be skipped if returned
-  // false from previous checks.
+  // `JSON.stringify` is expensive, so the cheap checks (same reference, both empty) run first and
+  // this comparison stays last among the equality checks.
   const markdownStylesEqual =
     prevMarkdownStyles === nextMarkdownStyles ||
     (Object.keys(prevMarkdownStyles || {}).length === 0 &&

package/src/components/Message/MessageItemView/MessageTimestamp.tsx

@@ -11,17 +11,11 @@ import { primitives } from '../../../theme';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
 export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDateTimeParser'>> & {
-  /**
-   * Already Formatted date
-   */
+  /** The already formatted date. */
   formattedDate?: string | Date;
-  /**
-   * The timestamp of the message.
-   */
+  /** The timestamp of the message. */
   timestamp?: string | Date;
-  /*
-   * Lookup key in the language corresponding translations sheet to perform date formatting
-   */
+  /** Translation key of the date format. */
   timestampTranslationKey?: string;
 };
 

package/src/components/Message/MessageItemView/MessageWrapper.tsx

@@ -53,33 +53,27 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
     noGroupByUser,
   });
 
-  // Wire timestamps throughout, directly comparable. `new Date(ns)` yielded NaN, so the unread
-  // separator never rendered.
+  // `created_at` is a numeric wire timestamp, directly comparable (`new Date(ns)` yields NaN).
   const createdAtTimestamp = message.created_at;
   const messageId = message.id;
   const nextMessageId = nextMessage?.id;
   const nextMessageIsOwn = nextMessage?.user?.id === client.userID;
   const nextMessageCreatedAt = nextMessage?.created_at ?? undefined;
 
-  // The unread separator belongs above the first UNREAD message from another user — i.e. on the row
-  // whose newer neighbour is that first unread. We locate it per-message inside the selector so
-  // `useStateStore`'s per-key comparison keeps the flag referentially stable (`false === false`) for
-  // every non-boundary row: a mark-read changes the channel-wide unread fields but only re-renders
-  // the one or two boundary rows whose flag actually flips, not the whole list.
+  // The unread separator goes on the row above the first unread message from another user. It is
+  // located per message inside the selector, so the flag stays `false` for every other row and a
+  // mark-read only re-renders the boundary rows whose flag flips, not the whole list.
   const showUnreadSeparatorSelector = useCallback(
     (snapshot: UnreadSnapshotState) => {
       let showUnreadSeparator: boolean;
       if (snapshot.firstUnreadMessageId) {
-        // Frozen boundary (channel open / mark-unread): anchor directly to the known first-unread id.
+        // Frozen boundary (channel open or mark-unread): anchor to the known first unread ID.
         showUnreadSeparator = nextMessageId === snapshot.firstUnreadMessageId;
       } else if (snapshot.unreadCount) {
-        // Live boundary: the separator sits above the FIRST unread-from-another message — i.e. on
-        // the last genuinely-read row (created at/before the read boundary) whose newer neighbour is
-        // that first unread. Gating on "this row is read" (rather than "this row isn't itself an
-        // unread-from-another") keeps it to a SINGLE separator even when our own messages are
-        // interleaved among the unreads: an own message sent after the boundary is not "read" by
-        // this test, so `own → unread-from-another` transitions further down never start a second
-        // separator. Chronological ordering guarantees exactly one read→unread transition.
+        // Live boundary: the separator goes on the last read row (created at or before
+        // `lastReadAt`) whose newer neighbor is the first unread from another user. Requiring this
+        // row to be read keeps it to one separator when own messages are interleaved among the
+        // unreads, as an own message sent after the boundary is not read.
         const lastReadAt = snapshot.lastReadAt ?? 0;
         const nextIsUnreadFromOther =
           !!nextMessageId &&
@@ -89,7 +83,7 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
         const thisIsRead =
           typeof createdAtTimestamp === 'number' && createdAtTimestamp <= lastReadAt;
         // Own messages sent elsewhere after the boundary leave no read row above the first unread,
-        // so the rule above never fires. Anchor on the last read message in those cases.
+        // so the rule above never fires. Anchor on the last read message then.
         const isLastReadBeforeOwnUnread =
           thisIsRead &&
           messageId === snapshot.lastReadMessageId &&
@@ -104,8 +98,8 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
       return {
         showUnreadSeparator,
         // Only the boundary row needs the unread count (for its inline indicator). Gating it on
-        // `showUnreadSeparator` keeps this `undefined` for every other row, so the channel-wide
-        // count changing on each mark-read doesn't re-render the whole list.
+        // `showUnreadSeparator` keeps it `undefined` elsewhere, so a changing channel-wide count
+        // does not re-render the whole list.
         unreadCount: showUnreadSeparator ? snapshot.unreadCount : undefined,
       };
     },

package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx

@@ -129,7 +129,7 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
         columnWrapperStyle={styles.columnWrapper}
         data={reactionListBottomItemData}
         keyExtractor={(item) => item.reaction.type}
-        ItemSeparatorComponent={ItemSeparatorComponent} // This is for the gap between the rows of reactions
+        ItemSeparatorComponent={ItemSeparatorComponent} // Gap between the rows of reactions
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}

package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx

@@ -32,9 +32,7 @@ export type ReactionListTopProps = Partial<
   showCount?: boolean;
 };
 
-/**
- * ReactionListTop - A high level component which implements all the logic required for a message reaction list
- */
+/** Displays the reaction list of a message. */
 export const ReactionListTop = (props: ReactionListTopProps) => {
   const {
     alignment: propAlignment,