From 4142eb4834302280fc9a60751a4a3394e8f64220 Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Mon, 8 Jun 2026 12:13:43 -0700
Subject: [PATCH] Add fade-in animation to chat footer/composer (#10786)

---
 .../Messages/components/MessagesList.tsx      | 69 ++++++++++---------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
index 2d471a8d35..e96872a646 100644
--- a/src/screens/Messages/components/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -13,6 +13,7 @@ import {
   KeyboardGestureArea,
 } from 'react-native-keyboard-controller'
 import Animated, {
+  FadeIn,
   runOnJS,
   type ScrollEvent,
   type SharedValue,
@@ -615,41 +616,43 @@ export function MessagesList({
               opened: 0,
             }}>
             {footer ?? (
-              <ConversationFooter
-                convoState={convoState}
-                hasAcceptOverride={hasAcceptOverride}>
-                {({loading}) =>
-                  ax.features.enabled(
-                    ax.features.DmsNewMessageComposerEnable,
-                  ) ? (
-                    <MessageComposer
-                      textInputId={textInputId}
-                      onSendMessage={(message: string) =>
-                        void onSendMessage(message)
-                      }
-                      hasEmbed={!!messageEmbed}
-                      setEmbed={setEmbed}
-                      loading={loading}>
-                      <MessageInputEmbed
-                        embed={messageEmbed}
+              <Animated.View entering={FadeIn.duration(200)}>
+                <ConversationFooter
+                  convoState={convoState}
+                  hasAcceptOverride={hasAcceptOverride}>
+                  {({loading}) =>
+                    ax.features.enabled(
+                      ax.features.DmsNewMessageComposerEnable,
+                    ) ? (
+                      <MessageComposer
+                        textInputId={textInputId}
+                        onSendMessage={(message: string) =>
+                          void onSendMessage(message)
+                        }
+                        hasEmbed={!!messageEmbed}
                         setEmbed={setEmbed}
-                      />
-                    </MessageComposer>
-                  ) : (
-                    <MessageInput
-                      textInputId={textInputId}
-                      onSendMessage={onSendMessage}
-                      hasEmbed={!!messageEmbed}
-                      setEmbed={setEmbed}
-                      loading={loading}>
-                      <MessageInputEmbed
-                        embed={messageEmbed}
+                        loading={loading}>
+                        <MessageInputEmbed
+                          embed={messageEmbed}
+                          setEmbed={setEmbed}
+                        />
+                      </MessageComposer>
+                    ) : (
+                      <MessageInput
+                        textInputId={textInputId}
+                        onSendMessage={onSendMessage}
+                        hasEmbed={!!messageEmbed}
                         setEmbed={setEmbed}
-                      />
-                    </MessageInput>
-                  )
-                }
-              </ConversationFooter>
+                        loading={loading}>
+                        <MessageInputEmbed
+                          embed={messageEmbed}
+                          setEmbed={setEmbed}
+                        />
+                      </MessageInput>
+                    )
+                  }
+                </ConversationFooter>
+              </Animated.View>
             )}
           </KeyboardStickyView>
         </KeyboardGestureArea>