Flash message bubble when tapping a reply (#10929)

src/components/dms/MessageItemInviteEmbed.tsx

@@ -1,5 +1,10 @@
 import {memo} from 'react'
 import {useWindowDimensions, View} from 'react-native'
+import Animated, {
+  interpolateColor,
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
 import {type $Typed, type ChatBskyEmbedJoinLink} from '@atproto/api'
 
 import {useConvoActive} from '#/state/messages/convo'
@@ -17,17 +22,31 @@ let MessageItemInviteEmbed = ({
   isGroupChat,
   squaredTopCorner,
   squaredBottomCorner,
+  highlightSV,
 }: {
   embed: $Typed<ChatBskyEmbedJoinLink.View>
   isFromSelf: boolean
   isGroupChat: boolean
   squaredTopCorner: boolean
   squaredBottomCorner: boolean
+  highlightSV: SharedValue<number>
 }): React.ReactNode => {
   const t = useTheme()
   const screen = useWindowDimensions()
   const convo = useConvoActive()
 
+  const restingColor = isFromSelf ? t.palette.primary_50 : t.palette.contrast_50
+  const highlightColor = isFromSelf
+    ? t.palette.primary_300
+    : t.palette.primary_100
+  const highlightStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      highlightSV.get(),
+      [0, 1],
+      [restingColor, highlightColor],
+    ),
+  }))
+
   const code = isKnownJoinLinkPreview(embed.joinLinkPreview)
     ? embed.joinLinkPreview.code
     : undefined
@@ -49,14 +68,13 @@ let MessageItemInviteEmbed = ({
             maxWidth: 360,
           }),
         ]}>
-        <View
+        <Animated.View
           style={[
             a.p_md,
             a.gap_md,
             a.overflow_hidden,
             isFromSelf
               ? {
-                  backgroundColor: t.palette.primary_50,
                   borderBottomRightRadius: squaredBottomCorner
                     ? SQUARED_BORDER_RADIUS
                     : BORDER_RADIUS,
@@ -67,7 +85,6 @@ let MessageItemInviteEmbed = ({
                   borderTopLeftRadius: BORDER_RADIUS,
                 }
               : {
-                  backgroundColor: t.palette.contrast_50,
                   borderBottomLeftRadius: squaredBottomCorner
                     ? SQUARED_BORDER_RADIUS
                     : BORDER_RADIUS,
@@ -77,6 +94,7 @@ let MessageItemInviteEmbed = ({
                   borderBottomRightRadius: BORDER_RADIUS,
                   borderTopRightRadius: BORDER_RADIUS,
                 },
+            highlightStyle,
           ]}>
           <ChatInvite.Root
             code={code}
@@ -85,7 +103,7 @@ let MessageItemInviteEmbed = ({
             hasFixedHeight={false}>
             <MessageItemInviteEmbedBody />
           </ChatInvite.Root>
-        </View>
+        </Animated.View>
       </View>
     </MessageContextProvider>
   )