perf: improve animation performance

Author: isekovanic

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} />

package/src/components/MessageInput/MessageComposerLeadingView.tsx

@@ -1,14 +1,15 @@
 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';
 
 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,

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}

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 />

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}
       >

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,
           {

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);

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>> = [];

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;