From 2b86fbcbd7ae7146857a48ae667ec5eec75fac23 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Mon, 6 Apr 2026 18:16:01 +0200
Subject: [PATCH] perf: improve animation performance

---
 .../MessageInput/MessageComposer.tsx          |  8 ++++----
 .../MessageComposerLeadingView.tsx            |  5 +++--
 .../MessageInput/MessageInputHeaderView.tsx   |  9 +++++----
 .../MessageInput/MessageInputTrailingView.tsx |  5 +++--
 .../components/OutputButtons/index.tsx        | 19 ++++++++++---------
 .../MessageList/MessageFlashList.tsx          |  5 +++--
 .../components/MessageList/MessageList.tsx    |  9 ++++-----
 .../src/state-store/message-overlay-store.ts  |  8 +-------
 package/src/utils/transitions.ts              |  9 +++++++++
 9 files changed, 42 insertions(+), 35 deletions(-)
 create mode 100644 package/src/utils/transitions.ts

diff --git a/package/src/components/MessageInput/MessageComposer.tsx b/package/src/components/MessageInput/MessageComposer.tsx
index c6e2d42015..d3cc6eecb6 100644
--- a/package/src/components/MessageInput/MessageComposer.tsx
+++ b/package/src/components/MessageInput/MessageComposer.tsx
@@ -5,7 +5,6 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   interpolate,
-  LinearTransition,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
@@ -54,6 +53,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 { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
@@ -383,7 +383,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               ]
             : null
         }
-        layout={LinearTransition.duration(200)}
+        layout={transitions.layout200}
       >
         <PortalWhileClosingView portalHostName='overlay-composer' portalName='message-composer'>
           <View
@@ -419,7 +419,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <View style={[styles.container, container]}>
                 <MessageComposerLeadingView />
                 <Animated.View
-                  layout={LinearTransition.duration(200)}
+                  layout={transitions.layout200}
                   style={[
                     styles.inputBoxWrapper,
                     messageInputFloating ? [styles.shadow, inputFloatingContainer] : null,
@@ -438,7 +438,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
 
                     <Animated.View
                       style={[styles.inputContainer, inputContainer]}
-                      layout={LinearTransition.duration(200)}
+                      layout={transitions.layout200}
                     >
                       {!isRecordingStateIdle ? (
                         <AudioRecorder slideToCancelStyle={slideToCancelAnimatedStyle} />
diff --git a/package/src/components/MessageInput/MessageComposerLeadingView.tsx b/package/src/components/MessageInput/MessageComposerLeadingView.tsx
index e4918d5d58..137bd428ed 100644
--- a/package/src/components/MessageInput/MessageComposerLeadingView.tsx
+++ b/package/src/components/MessageInput/MessageComposerLeadingView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { InputButtons } from './components/InputButtons';
 import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
@@ -9,6 +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';
 
 export const MessageComposerLeadingView = () => {
   const {
@@ -24,7 +25,7 @@ export const MessageComposerLeadingView = () => {
 
   return isRecordingStateIdle ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[
         styles.inputButtonsContainer,
         messageInputFloating ? styles.shadow : null,
diff --git a/package/src/components/MessageInput/MessageInputHeaderView.tsx b/package/src/components/MessageInput/MessageInputHeaderView.tsx
index de4f1bf65d..39ca1f446d 100644
--- a/package/src/components/MessageInput/MessageInputHeaderView.tsx
+++ b/package/src/components/MessageInput/MessageInputHeaderView.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { LinkPreviewList } from './components/LinkPreviewList';
 import { useHasLinkPreviews } from './hooks/useLinkPreviews';
@@ -17,6 +17,7 @@ import { useMessagesContext } from '../../contexts/messagesContext/MessagesConte
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 
 export const MessageInputHeaderView = () => {
   const {
@@ -42,7 +43,7 @@ export const MessageInputHeaderView = () => {
 
   return isRecordingStateIdle ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[
         styles.contentContainer,
         {
@@ -55,7 +56,7 @@ export const MessageInputHeaderView = () => {
       ]}
     >
       {editing ? (
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
+        <Animated.View entering={transitions.fadeIn200} exiting={transitions.fadeOut200}>
           <Reply
             mode='edit'
             onDismiss={clearEditingState}
@@ -64,7 +65,7 @@ export const MessageInputHeaderView = () => {
         </Animated.View>
       ) : null}
       {quotedMessage && !editing ? (
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
+        <Animated.View entering={transitions.fadeIn200} exiting={transitions.fadeOut200}>
           <Reply onDismiss={editing ? undefined : onDismissReply} mode='reply' />
         </Animated.View>
       ) : null}
diff --git a/package/src/components/MessageInput/MessageInputTrailingView.tsx b/package/src/components/MessageInput/MessageInputTrailingView.tsx
index 7b1a38fe21..93d83e3035 100644
--- a/package/src/components/MessageInput/MessageInputTrailingView.tsx
+++ b/package/src/components/MessageInput/MessageInputTrailingView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { OutputButtons } from './components/OutputButtons';
 
@@ -11,6 +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';
 
 export const MessageInputTrailingView = () => {
   const {
@@ -25,7 +26,7 @@ export const MessageInputTrailingView = () => {
   );
   return (recordingStatus === 'idle' || recordingStatus === 'recording') && !micLocked ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[styles.outputButtonsContainer, outputButtonsContainer]}
     >
       <OutputButtons />
diff --git a/package/src/components/MessageInput/components/OutputButtons/index.tsx b/package/src/components/MessageInput/components/OutputButtons/index.tsx
index 37b2cf9845..283a9dc7a7 100644
--- a/package/src/components/MessageInput/components/OutputButtons/index.tsx
+++ b/package/src/components/MessageInput/components/OutputButtons/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { TextComposerState } from 'stream-chat';
 
@@ -21,6 +21,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
+import { transitions } from '../../../../utils/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 
@@ -88,8 +89,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (editing || command) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='edit-button'
         style={editButtonContainer}
       >
@@ -99,8 +100,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (cooldownIsActive) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='cooldown-timer'
         style={cooldownButtonContainer}
       >
@@ -110,8 +111,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (audioRecordingEnabled && textIsEmpty && !hasAttachments) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='audio-recording-button'
         style={audioRecordingButtonContainer}
       >
@@ -121,8 +122,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='send-button'
         style={sendButtonContainer}
       >
diff --git a/package/src/components/MessageList/MessageFlashList.tsx b/package/src/components/MessageList/MessageFlashList.tsx
index f89bfc7ab7..6faae7522e 100644
--- a/package/src/components/MessageList/MessageFlashList.tsx
+++ b/package/src/components/MessageList/MessageFlashList.tsx
@@ -8,7 +8,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
@@ -56,6 +56,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 { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -1094,7 +1095,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         ) : null}
       </View>
       <Animated.View
-        layout={LinearTransition.duration(200)}
+        layout={transitions.layout200}
         style={[
           styles.scrollToBottomButtonContainer,
           {
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
index 47429cc6a9..9ea0b3bdba 100644
--- a/package/src/components/MessageList/MessageList.tsx
+++ b/package/src/components/MessageList/MessageList.tsx
@@ -11,7 +11,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import debounce from 'lodash/debounce';
 
@@ -68,6 +68,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -1263,7 +1264,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         <MessageListItemProvider value={messageListItemContextValue}>
           <ListComponent
             // TODO: Consider hiding this behind a feature flag.
-            layout={LayoutTransition}
+            layout={transitions.layout200}
             contentContainerStyle={flatListContentContainerStyle}
             /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
             data={processedMessageListWithNeighbors}
@@ -1310,7 +1311,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       </View>
       {scrollToBottomButtonVisible ? (
         <Animated.View
-          layout={LinearTransition.duration(200)}
+          layout={transitions.layout200}
           style={[
             {
               bottom: messageInputFloating
@@ -1462,5 +1463,3 @@ export const MessageList = (props: MessageListProps) => {
 const AnimatedList = React.memo(
   Animated.createAnimatedComponent(FlatList<MessageListItemWithNeighbours>),
 );
-
-const LayoutTransition = LinearTransition.duration(200);
diff --git a/package/src/state-store/message-overlay-store.ts b/package/src/state-store/message-overlay-store.ts
index beafbb5ba7..6acbb9eb95 100644
--- a/package/src/state-store/message-overlay-store.ts
+++ b/package/src/state-store/message-overlay-store.ts
@@ -94,13 +94,7 @@ export const closeOverlay = () => {
     return;
   }
 
-  requestAnimationFrame(() => {
-    if (!overlayStore.getLatestValue().id) {
-      return;
-    }
-
-    overlayStore.partialNext({ closing: true });
-  });
+  overlayStore.partialNext({ closing: true });
 };
 
 let actionQueue: Array<() => void | Promise<void>> = [];
diff --git a/package/src/utils/transitions.ts b/package/src/utils/transitions.ts
new file mode 100644
index 0000000000..d5d8676583
--- /dev/null
+++ b/package/src/utils/transitions.ts
@@ -0,0 +1,9 @@
+import { FadeIn, FadeOut, LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
+
+export const transitions = {
+  fadeIn200: FadeIn.duration(200),
+  fadeOut200: FadeOut.duration(200),
+  layout200: LinearTransition.duration(200),
+  zoomIn200: ZoomIn.duration(200),
+  zoomOut200: ZoomOut.duration(200),
+} as const;