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

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -29,7 +29,7 @@ export const MultipleAnswersField = () => {
   const onEnforceUniqueVoteHandler = useCallback(
     async (value: boolean) => {
       setAllowMultipleVotes(value);
-      await updateFields({ enforce_unique_vote: !value });
+      await updateFields({ data: { enforce_unique_vote: !value } });
     },
     [updateFields],
   );

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -42,7 +42,7 @@ const MaxVotesTextInput = () => {
 
   const onChangeTextHandler = useCallback(
     async (newText: string) => {
-      await updateFields({ max_votes_allowed: newText });
+      await updateFields({ data: { max_votes_allowed: newText } });
     },
     [updateFields],
   );
@@ -119,14 +119,14 @@ export const MultipleVotesSettings = () => {
   const decrementMaxVotes = useStableCallback(async () => {
     const numericValue = Number(pollComposer.state.getLatestValue().data.max_votes_allowed.trim());
     if (Number.isInteger(numericValue)) {
-      await updateFields({ max_votes_allowed: String(numericValue - 1) });
+      await updateFields({ data: { max_votes_allowed: String(numericValue - 1) } });
     }
   });
 
   const incrementMaxVotes = useStableCallback(async () => {
     const numericValue = Number(pollComposer.state.getLatestValue().data.max_votes_allowed.trim());
     if (Number.isInteger(numericValue)) {
-      await updateFields({ max_votes_allowed: String(numericValue + 1) });
+      await updateFields({ data: { max_votes_allowed: String(numericValue + 1) } });
     }
   });
 
@@ -134,7 +134,9 @@ export const MultipleVotesSettings = () => {
     const currentValue = pollComposer.state.getLatestValue().data.max_votes_allowed;
     setAllowMaxVotesPerPerson(value);
     await updateFields({
-      max_votes_allowed: value ? (currentValue === '' ? '2' : currentValue) : '',
+      data: {
+        max_votes_allowed: value ? (currentValue === '' ? '2' : currentValue) : '',
+      },
     });
   });
 

package/src/components/Poll/components/NameField.tsx

@@ -12,7 +12,7 @@ export const NameField = () => {
 
   const onChangeText = useCallback(
     async (newText: string) => {
-      await updateFields({ name: newText });
+      await updateFields({ data: { name: newText } });
     },
     [updateFields],
   );

package/src/components/Poll/components/PollButtons.tsx

@@ -270,8 +270,8 @@ const useStyles = () => {
           ? semantics.chatBorderOnChatOutgoing
           : semantics.chatBorderOnChatIncoming,
       },
-      // NOTE: PollButtons only ever renders on the in-bubble surface (it is what
-      // opens the full-options modal), so it needs no `forceIncoming` handling.
+      // PollButtons only renders on the in-bubble surface (it opens the full-options modal), so it
+      // needs no `forceIncoming` handling.
     });
   }, [semantics, isPollCreatedByClient]);
 };

package/src/components/Poll/components/PollOption.tsx

@@ -97,8 +97,8 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
   const { t } = useTranslationContext();
   const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
-  // `forceIncoming` is set on the full-options surface, which is a neutral card
-  // rather than a bubble - so it wins over poll ownership.
+  // `forceIncoming` marks the full-options surface, a neutral card rather than a bubble, so it wins
+  // over poll ownership.
   const isIncoming = !isPollCreatedByClient || !!forceIncoming;
   const styles = useStyles({ isIncoming });
 

package/src/components/Poll/hook/useIsPollCreatedByCurrentUser.ts

@@ -2,8 +2,9 @@ import { useChatContext } from '../../../contexts';
 import { usePollState } from '../hooks/usePollState';
 
 /**
- * React hook to check if the poll was created by the logged in client.
- * @returns Whether the poll was created by the logged in client.
+ * Whether the poll was created by the current user.
+ *
+ * @returns True when the poll's creator is the logged in user.
  */
 export const useIsPollCreatedByCurrentUser = () => {
   const { createdBy } = usePollState();

package/src/components/Poll/hooks/useEndVote.ts

@@ -3,9 +3,10 @@ import { useStableCallback } from '../../../hooks';
 import { useNotificationApi } from '../../Notifications';
 
 /**
- * Returns a stable callback that closes the current poll and emits a success or
- * failure notification. Shared by `EndVoteButton` and the rotor accessibility
- * action so both paths produce identical side effects.
+ * Returns a stable callback that closes the current poll and emits a success or failure
+ * notification. Shared by the end vote button and its accessibility action.
+ *
+ * @returns An async callback that resolves with the close response and rethrows on failure.
  */
 export const useEndVote = () => {
   const { poll } = usePollContext();

package/src/components/Poll/hooks/usePollAnswersPagination.ts

@@ -21,19 +21,13 @@ export type UsePollAnswersReturnType = {
 };
 
 /**
- * A hook that queries answers for a given Poll and returns them in a paginated fashion.
- * Should be used instead of the latest_answers property within the reactive state in the
- * event that we need more than the top 10 answers. The returned property pollAnswers will
- * automatically be updated and trigger a state change when paginating further.
+ * Queries the answers of the poll in context page by page, for when `latest_answers` in the poll
+ * state does not hold enough of them. `pollAnswers` stays in sync with answer events for the poll.
  *
- * @param loadFirstPage {boolean} Signifies whether the first page should be automatically loaded whenever
- * the hook is first called.
- * @param paginationParams {PollAnswersQueryParams} The pagination params we might want to use for our custom
- * needs when invoking the hook.
- *
- * @returns {UsePollAnswersReturnType} An object containing all of the needed pagination values as well as the
- * answers.
- **/
+ * @param params.loadFirstPage Loads the first page on mount. Defaults to true.
+ * @param params.paginationParams Filter, sort and options merged into every query.
+ * @returns The loaded answers with the pagination state and `loadMore`.
+ */
 export const usePollAnswersPagination = ({
   loadFirstPage = true,
   paginationParams,

package/src/components/Poll/hooks/usePollOptionVotesPagination.ts

@@ -26,22 +26,14 @@ export type UsePollVotesReturnType = {
 };
 
 /**
- * A hook that queries votes for a given Poll and returns them in a paginated fashion.
- * Should be used instead of the latestVotesByOption property within the reactive state in the
- * event that we need more than the top 10 votes for an option. The returned property votes will
- * automatically be updated and trigger a state change when paginating further. Querying for votes
- * can only be done on an option by option basis.
+ * Queries the votes of one poll option page by page, for when `latestVotesByOption` in the poll
+ * state does not hold enough of them. `votes` stays in sync with vote events for the option.
  *
- * @param option {PollOptionResponseData} The option for which we want to load the votes.
- * @param loadFirstPage {boolean} Signifies whether the first page should be automatically loaded whenever
- * the hook is first called.
- * @param paginationParams {PollOptionVotesQueryParams} The pagination params we might want to use for our custom
- * needs when invoking the hook.
- *
- * @returns {UsePollVotesReturnType} An object containing all of the needed pagination values as well as the
- * answers.
- **/
-
+ * @param params.option The option to load the votes of.
+ * @param params.loadFirstPage Loads the first page on mount. Defaults to true.
+ * @param params.paginationParams Filter, sort and options merged into every query.
+ * @returns The loaded votes with the pagination state and `loadMore`.
+ */
 export const usePollOptionVotesPagination = ({
   loadFirstPage = true,
   option,

package/src/components/Poll/hooks/usePollVoteToggle.ts

@@ -11,10 +11,11 @@ const ownVotesSelector = (state: PollState) => ({
 });
 
 /**
- * Returns a stable callback that toggles the current user's vote on a poll option
- * by id: casts a vote if none exists, removes it if one does. Shared by the
- * visible vote button and the rotor accessibility action so both paths use
- * identical logic.
+ * Returns a stable callback that toggles the current user's vote on an option, by option ID: it
+ * removes the vote if one exists and casts it otherwise. Shared by the vote button and its
+ * accessibility action.
+ *
+ * @returns An async callback taking the option ID.
  */
 export const usePollVoteToggle = () => {
   const { message, poll } = usePollContext();

package/src/components/Poll/index.ts

@@ -1,9 +1,7 @@
-// components
 export * from './Poll';
 export * from './CreatePollContent';
 export * from './components';
 
-// hooks
 export * from './hooks/usePollState';
 export * from './hooks/usePollStateStore';
 export * from './hooks/usePollAnswersPagination';

package/src/components/ProgressControl/ProgressBar.tsx

@@ -15,7 +15,6 @@ export type ProgressBarProps = {
 export const ProgressBar = ({ progress, filledColor, emptyColor }: ProgressBarProps) => {
   const styles = useStyles();
 
-  // clamp for safety
   const value = Math.max(0, Math.min(progress, 1));
   const unfilledValue = 1 - value;
 

package/src/components/ProgressControl/ProgressControl.tsx

@@ -15,37 +15,18 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type ProgressControlProps = {
-  /**
-   * If true, the underlying attachment is playing.
-   */
+  /** Whether the underlying attachment is playing. */
   isPlaying: boolean;
-  /**
-   * The progress of the progress bar in percentage
-   */
+  /** Playback progress as a fraction from 0 to 1. */
   progress: number;
-  /**
-   * The test ID of the progress control
-   */
+  /** Test ID of the pan gesture. */
   testID: string;
-  /**
-   * The function to be called when the user ends dragging the progress bar
-   */
+  /** Called with the progress when a drag ends. The control is only seekable when this is set. */
   onEndDrag?: (progress: number) => void;
-  /**
-   * The function to be called when the user starts dragging the progress bar
-   */
+  /** Called with the progress when a drag starts. */
   onStartDrag?: (progress: number) => void;
-  /**
-   * Expands the draggable/touchable area vertically around the thin visual
-   * track via `hitSlop`. The 3px track is easy to miss, so set this when the
-   * control is the primary seek surface (e.g. the image gallery video controls)
-   * to make it comfortably grabbable. The visual track height is unchanged.
-   */
+  /** Expands the touch area vertically by 12px on each side of the 3px track. */
   expandedTouchArea?: boolean;
-  /**
-   * The width of the progress control
-   */
-  width?: number;
 };
 
 const TRACK_HEIGHT = 3;

package/src/components/ProgressControl/ProgressThumb.tsx

@@ -9,13 +9,9 @@ export const PROGRESS_THUMB_WIDTH = 12;
 export const PROGRESS_THUMB_HEIGHT = 12;
 
 export type ProgressControlThumbProps = {
-  /**
-   * If true, the underlying attachment is playing.
-   */
+  /** Whether the underlying attachment is playing. */
   isPlaying: boolean;
-  /**
-   * The style of the progress control thumb.
-   */
+  /** Style of the thumb. */
   style?: StyleProp<ViewStyle>;
 };
 

package/src/components/ProgressControl/StableDurationLabel.tsx

@@ -18,10 +18,8 @@ type StableDurationLabelProps = {
 };
 
 /**
- * Renders a duration label with a layout-stable width.
- *
- * It reserves space using an invisible max-width label, then absolutely positions
- * the live value on top so playback updates do not cause parent relayout.
+ * Renders a duration label with a stable width: an invisible `reserveLabel` takes the space and
+ * `label` is positioned over it, so updating `label` does not re-lay out the parent.
  */
 export const StableDurationLabel = React.memo(
   ({

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -11,33 +11,19 @@ import { primitives } from '../../theme';
 import { resampleWaveformData } from '../MessageInput/utils/audioSampling';
 
 export type WaveProgressBarProps = {
-  /**
-   * If true, the underlying attachment is playing.
-   */
+  /** Whether the underlying attachment is playing. */
   isPlaying?: boolean;
-  /**
-   * The progress of the waveform in percentage
-   */
+  /** Playback progress as a fraction from 0 to 1. */
   progress: number;
-  /**
-   * The waveform data to be displayed
-   */
+  /** Waveform amplitudes, resampled to `amplitudesCount` bars. */
   waveformData: number[];
-  /**
-   * The number of amplitudes to display
-   */
+  /** Number of bars to draw. Defaults to as many as fit the measured width, at least 20. */
   amplitudesCount?: number;
-  /**
-   * The function to be called when the user ends dragging the waveform
-   */
+  /** Called with the progress when a drag ends. */
   onEndDrag?: (progress: number) => void;
-  /**
-   * The function to be called when the user is dragging the waveform
-   */
+  /** Called with the progress on every drag update. */
   onProgressDrag?: (progress: number) => void;
-  /**
-   * The function to be called when the user starts dragging the waveform
-   */
+  /** Called with the progress when a drag starts. */
   onStartDrag?: (progress: number) => void;
 };
 

package/src/components/Reply/Reply.tsx

@@ -103,7 +103,7 @@ export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageP
     isParentMessageMine?: boolean;
     onDismiss?: () => void;
     mode: 'reply' | 'edit';
-    // This is temporary for the MessageContent Component to style the Reply component
+    // Style overrides passed by `MessageContent`.
     styles?: {
       container?: ViewStyle;
       leftContainer?: ViewStyle;
@@ -168,7 +168,7 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
             {title}
           </Text>
 
-          {/* `isMyMessage` here selects which side to paint, so it takes the surface. */}
+          {/* Paints for the surface it sits on, so it takes the parent message's ownership. */}
           <ReplyMessageView message={quotedMessage} isMyMessage={isParentMessageMine} />
         </View>
         <View style={[styles.rightContainer, rightContainer, stylesProp?.rightContainer]}>
@@ -254,9 +254,8 @@ export type ReplyProps = Partial<ReplyPropsWithContext> &
   Pick<ReplyPropsWithContext, 'mode' | 'onDismiss'>;
 
 /**
- * Mounted only when the Reply is rendered as the composer header preview
- * (edit/reply). Keeps the translation + announcer subscriptions off the
- * per-row in-message quoted-reply render path.
+ * Announces the edit/reply state to screen readers. Mounted only for the composer header preview,
+ * so in-message quoted replies skip the translation and announcer subscriptions.
  */
 const ReplyComposerAnnouncer = ({
   message,
@@ -310,20 +309,18 @@ export const Reply = (props: ReplyProps) => {
     ? (messageFromContext.quoted_message as ReplyPropsWithContext['quotedMessage'])
     : quotedMessageFromComposer;
 
-  // `mode='edit'` supplies the edited message via `props.quotedMessage` and leaves
-  // the composer's quoted message empty, so ownership must consider both.
+  // `mode='edit'` passes the edited message as `props.quotedMessage` and leaves the composer's
+  // quoted message empty, so ownership considers both.
   const isMyMessage = client.user?.id === (props.quotedMessage ?? quotedMessage)?.user?.id;
   const isParentMessageMine = messageFromContext ? !!isMyMessageFromContext : undefined;
 
-  // Composer header passes `onDismiss`; the in-message quoted-reply renderer
-  // does not. Only the composer-preview path pays for announcement work.
+  // Only the composer header passes `onDismiss`, which marks the composer preview.
   const isComposerPreview = !!props.onDismiss;
 
   return (
     <>
       {isComposerPreview ? (
-        // Edit passes the message via `quotedMessage` prop; reply uses the
-        // composer-state quoted message we computed locally.
+        // Edit passes the message as `quotedMessage`; reply uses the composer's quoted message.
         <ReplyComposerAnnouncer message={props.quotedMessage ?? quotedMessage} mode={props.mode} />
       ) : null}
       <MemoizedReply

package/src/components/Thread/Thread.tsx

@@ -23,9 +23,7 @@ export type ThreadProps = ChannelConfigProps &
      * own host, derived from its id.
      */
     notificationHostId?: string;
-    /**
-     * Called when the thread unmounts, e.g. to clear the app's record of the open thread.
-     */
+    /** Called when the thread unmounts, e.g. to clear the app's record of the open thread. */
     onThreadDismount?: () => void;
   };
 
@@ -36,8 +34,7 @@ type ThreadReplyPaginatorState = {
 };
 
 const paginatorSelector = (state: ThreadReplyPaginatorState) => ({
-  // `hasItems`, not the array: every use below is an `items === undefined` test ("has the reply
-  // paginator loaded yet"), so selecting the array re-renders this component on every reply.
+  // `hasItems` rather than the array: the array would re-render this component on every reply.
   hasItems: state.items !== undefined,
   isLoading: state.isLoading,
   lastQueryError: state.lastQueryError,
@@ -49,8 +46,8 @@ const threadStaleSelector = (state: { isLoading: boolean; isStateStale: boolean
 });
 
 /**
- * Thread - binds its children to a thread's replies. Render it next to `<Channel>`, not inside it,
- * and compose the thread UI as children:
+ * Binds its children to a thread's replies. Render it next to `<Channel>`, not inside it, and
+ * compose the thread UI as children:
  *
  * ```tsx
  * <Thread thread={thread}>
@@ -85,10 +82,9 @@ export const Thread = (props: PropsWithChildren<ThreadProps>) => {
     }
   }, [isStateStale, thread]);
 
-  // A thread opened from the thread list can belong to a channel nothing has queried yet. `queryThreads`
-  // watches that channel but returns no `own_capabilities` for it, so the menu, the reactions and the
-  // composer would act as if the user could do nothing. Querying the channel once fills them in; its
-  // messages and read state are left alone.
+  // A thread opened from the thread list can belong to a channel nobody has queried. `queryThreads`
+  // returns no `own_capabilities` for it, so the menu, reactions and composer would treat the user
+  // as having none; watching the channel once fills them in.
   useEffect(() => {
     const { channel } = thread;
     if (channel.initialized || channel.isProvisional) {
@@ -97,32 +93,28 @@ export const Thread = (props: PropsWithChildren<ThreadProps>) => {
     channel.watch().catch((err: unknown) => console.warn('Thread channel watch failed', err));
   }, [thread]);
 
-  // Activating registers the thread with `client.threads` for the session, which keeps it subscribed
-  // (incoming replies, read state, thread.updated) whether or not the thread list holds it. While
-  // active, the thread marks itself read. `activate()` returns the release of this activation.
+  // Activating keeps the thread subscribed (new replies, read state, `thread.updated`) even when
+  // the thread list does not hold it, and marks it read while active. `activate()` returns the
+  // release.
   useEffect(() => thread.activate(), [thread]);
 
-  // Load the first reply page, but only when the paginator hasn't already been seeded from the
-  // thread's `latest_replies` (managed/queried threads seed on construction) or loaded/loading. A
-  // seeded paginator already holds its first page, so we skip the fetch and let scroll-up load older
-  // replies — mirroring stream-chat-react, whose thread list has no mount-time fetch. The `hasItems`
-  // guard makes this fire at most once (an unseeded thread fetches, and the fetch defines `items`).
+  // Load the first reply page unless the paginator is loading or already holds items (threads seed
+  // from `latest_replies` on construction). `hasItems` makes this fire at most once.
   useEffect(() => {
     if (isLoading || hasItems || lastQueryError) {
       return;
     }
-    // A reload in flight (a stale thread's, started by the effect above in this same commit) seeds the
-    // replies itself; read live, as this commit's render predates it. If it fails, this runs again.
+    // A reload in flight (started by the stale-state effect above in this commit) seeds the replies
+    // itself. Read live, because this render predates it. If it fails, this runs again.
     if (isThreadReloading || thread.state.getLatestValue().isLoading) {
       return;
     }
     void thread.messagePaginator.toTail();
-    // `lastQueryError` is load-bearing here, not decorative: a failed query flips `isLoading` back to
-    // false with `hasItems` still false, which would re-run this effect and refetch forever. The
-    // retry is the user's to make, through the error indicator below.
+    // `lastQueryError` must stay a dependency: a failed query sets `isLoading` back to false with
+    // `hasItems` still false, which would otherwise refetch forever. The error indicator retries.
   }, [thread, hasItems, isLoading, lastQueryError, isThreadReloading]);
 
-  // Deactivation is the activation effect's cleanup; this only notifies the integrator.
+  // Deactivation is the activation effect's cleanup; this only calls the callback.
   useEffect(
     () => () => {
       if (onThreadDismount) {
@@ -133,14 +125,13 @@ export const Thread = (props: PropsWithChildren<ThreadProps>) => {
     [],
   );
 
-  // A jump into the replies (e.g. to a targeted reply) leaves a focus signal behind; the list reads
-  // this to keep its initial anchor from overriding the jump.
+  // A jump to a targeted reply leaves a focus signal that stops the list's initial anchor from
+  // overriding the jump.
   const hasPendingInitialTargetLoad = useStableCallback(
     () => !!thread.messagePaginator.messageFocusSignal.getLatestValue().signal,
   );
 
-  // The thread's own query error: the failure belongs to the reply paginator, and the retry is a
-  // first-page `toTail`.
+  // The error belongs to the reply paginator; retrying reloads the first page with `toTail`.
   if (lastQueryError && !hasItems) {
     const retry = () =>
       thread.messagePaginator

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1889,8 +1889,10 @@ exports[`Thread should match thread snapshot 1`] = `
                         }
                         hoverAnimationInDuration={50}
                         hoverAnimationOutDuration={100}
+                        immediatePressOut={false}
                         longPressAnimationOutDuration={100}
                         longPressDuration={500}
+                        moduleId={-1}
                         onButtonInteractionFinished={[Function]}
                         onButtonLongPress={[Function]}
                         onButtonPress={[Function]}
@@ -1918,7 +1920,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             ],
                           ]
                         }
-                        tapAnimationInDuration={50}
+                        tapAnimationInDuration={130}
                         tapAnimationOutDuration={100}
                         testID="attach-button"
                         testOnly_onPress={[Function]}
@@ -2275,8 +2277,10 @@ exports[`Thread should match thread snapshot 1`] = `
                             }
                             hoverAnimationInDuration={50}
                             hoverAnimationOutDuration={100}
+                            immediatePressOut={false}
                             longPressAnimationOutDuration={100}
                             longPressDuration={500}
+                            moduleId={-1}
                             onButtonInteractionFinished={[Function]}
                             onButtonLongPress={[Function]}
                             onButtonPress={[Function]}
@@ -2304,7 +2308,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 ],
                               ]
                             }
-                            tapAnimationInDuration={50}
+                            tapAnimationInDuration={130}
                             tapAnimationOutDuration={100}
                             testID="send-button"
                             testOnly_onPress={[Function]}
@@ -2465,8 +2469,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2494,7 +2500,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="upload-photo-touchable"
             testOnly_onPress={[Function]}
@@ -2620,8 +2626,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2649,7 +2657,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="take-photo-touchable"
             testOnly_onPress={[Function]}
@@ -2804,8 +2812,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2833,7 +2843,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="upload-file-touchable"
             testOnly_onPress={[Function]}
@@ -2955,8 +2965,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2984,7 +2996,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="commands-touchable"
             testOnly_onPress={[Function]}

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -14,9 +14,7 @@ import { useStateStore } from '../../../hooks';
 import { primitives } from '../../../theme';
 
 type ThreadFooterComponentPropsWithContext = Pick<ThreadContextValue, 'thread'> & {
-  /**
-   * Boolean to enable/disable parent message press. Defaults to `true`.
-   */
+  /** Whether pressing the parent message is disabled. Defaults to true. */
   parentMessagePreventPress?: boolean;
 };
 
@@ -54,8 +52,8 @@ const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithC
 
   const styles = useStyles();
 
-  // The parent message is read reactively from the thread instance so the header updates live when
-  // it is edited / reacted to / its reply_count changes.
+  // Read from the thread state so the header updates when the parent message or its reply count
+  // changes.
   const { parentMessage, replyCount = parentMessage?.reply_count } =
     useStateStore(thread?.state, selector) ?? {};
 
@@ -89,9 +87,8 @@ const areEqual = (
   prevProps: ThreadFooterComponentPropsWithContext,
   nextProps: ThreadFooterComponentPropsWithContext,
 ) => {
-  // The parent message + reply count are read reactively from `thread.state` inside the
-  // component (via useStateStore), so this memo only needs to gate parent-driven re-renders on the
-  // remaining props: the prevent-press flag and the thread instance identity.
+  // The parent message and reply count come from `thread.state`, so only the prevent-press flag
+  // and the thread identity gate re-renders.
   const { parentMessagePreventPress: prevParentMessagePreventPress, thread: prevThread } =
     prevProps;
   const { parentMessagePreventPress: nextParentMessagePreventPress, thread: nextThread } =