@planningcenter/chat-react-native 3.16.0-rc.2 → 3.16.0-rc.3

package/build/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './use_async_storage';
+export * from './use_animated_message_background_color';
 export * from './use_theme';
 export * from './use_suspense_api';
 export * from './use_current_person';

package/build/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_theme'\nexport * from './use_suspense_api'\nexport * from './use_current_person'\nexport * from './use_font_scale'\nexport * from './use_create_android_ripple_color'\nexport * from './use_chat_permissions'\nexport * from './use_api_client'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_api'\nexport * from './use_api_client'\nexport * from './use_message_reaction_toggle'\nexport * from './use_interaction_ghost_color'\nexport * from './use_at_font_scale_breakpoint'\nexport * from './use_scalable_number_of_lines'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,yCAAyC,CAAA;AACvD,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_animated_message_background_color'\nexport * from './use_theme'\nexport * from './use_suspense_api'\nexport * from './use_current_person'\nexport * from './use_font_scale'\nexport * from './use_create_android_ripple_color'\nexport * from './use_chat_permissions'\nexport * from './use_api_client'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_api'\nexport * from './use_api_client'\nexport * from './use_message_reaction_toggle'\nexport * from './use_interaction_ghost_color'\nexport * from './use_at_font_scale_breakpoint'\nexport * from './use_scalable_number_of_lines'\n"]}

package/build/hooks/use_animated_message_background_color.d.ts

@@ -0,0 +1,8 @@
+export declare function useAnimatedMessageBackgroundColor(): {
+    animatedBackgroundColor: {
+        backgroundColor: string;
+    };
+    handleMessagePressIn: () => void;
+    handleMessagePressOut: () => void;
+};
+//# sourceMappingURL=use_animated_message_background_color.d.ts.map

package/build/hooks/use_animated_message_background_color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_animated_message_background_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_animated_message_background_color.ts"],"names":[],"mappings":"AAUA,wBAAgB,iCAAiC;;;;;;EAiChD"}

package/build/hooks/use_animated_message_background_color.js

@@ -0,0 +1,29 @@
+import { Platform } from 'react-native';
+import { useSharedValue, useAnimatedStyle, withTiming, interpolateColor, Easing, } from 'react-native-reanimated';
+import { useTheme } from '../hooks';
+export function useAnimatedMessageBackgroundColor() {
+    const { colors } = useTheme();
+    const bgFadeProgress = useSharedValue(0);
+    const pressedColor = Platform.select({
+        ios: colors.fillColorNeutral050Base,
+        default: 'transparent',
+    });
+    const animatedBackgroundColor = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(bgFadeProgress.value, [0, 1], ['transparent', pressedColor]);
+        return {
+            backgroundColor,
+        };
+    });
+    const handleMessagePressIn = () => {
+        bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) });
+    };
+    const handleMessagePressOut = () => {
+        bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) });
+    };
+    return {
+        animatedBackgroundColor,
+        handleMessagePressIn,
+        handleMessagePressOut,
+    };
+}
+//# sourceMappingURL=use_animated_message_background_color.js.map

package/build/hooks/use_animated_message_background_color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_animated_message_background_color.js","sourceRoot":"","sources":["../../src/hooks/use_animated_message_background_color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,MAAM,GACP,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,MAAM,UAAU,iCAAiC;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;IAExC,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC;QACnC,GAAG,EAAE,MAAM,CAAC,uBAAuB;QACnC,OAAO,EAAE,aAAa;KACvB,CAAC,CAAA;IAEF,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACpD,MAAM,eAAe,GAAG,gBAAgB,CACtC,cAAc,CAAC,KAAK,EACpB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,aAAa,EAAE,YAAY,CAAC,CAC9B,CAAA;QACD,OAAO;YACL,eAAe;SAChB,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC5F,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC5F,CAAC,CAAA;IAED,OAAO;QACL,uBAAuB;QACvB,oBAAoB;QACpB,qBAAqB;KACtB,CAAA;AACH,CAAC","sourcesContent":["import { Platform } from 'react-native'\nimport {\n  useSharedValue,\n  useAnimatedStyle,\n  withTiming,\n  interpolateColor,\n  Easing,\n} from 'react-native-reanimated'\nimport { useTheme } from '../hooks'\n\nexport function useAnimatedMessageBackgroundColor() {\n  const { colors } = useTheme()\n  const bgFadeProgress = useSharedValue(0)\n\n  const pressedColor = Platform.select({\n    ios: colors.fillColorNeutral050Base,\n    default: 'transparent',\n  })\n\n  const animatedBackgroundColor = useAnimatedStyle(() => {\n    const backgroundColor = interpolateColor(\n      bgFadeProgress.value,\n      [0, 1],\n      ['transparent', pressedColor]\n    )\n    return {\n      backgroundColor,\n    }\n  })\n\n  const handleMessagePressIn = () => {\n    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n  }\n\n  const handleMessagePressOut = () => {\n    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n  }\n\n  return {\n    animatedBackgroundColor,\n    handleMessagePressIn,\n    handleMessagePressOut,\n  }\n}\n"]}

package/build/utils/assert_keys_are_numbers.d.ts

@@ -0,0 +1,2 @@
+export declare const assertKeysAreNumbers: (obj: Object) => Record<any, number>;
+//# sourceMappingURL=assert_keys_are_numbers.d.ts.map

package/build/utils/assert_keys_are_numbers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assert_keys_are_numbers.d.ts","sourceRoot":"","sources":["../../src/utils/assert_keys_are_numbers.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,QAAS,MAAM,KAAG,MAAM,CAAC,GAAG,EAAE,MAAM,CAEpE,CAAA"}

package/build/utils/assert_keys_are_numbers.js

@@ -0,0 +1,12 @@
+export const assertKeysAreNumbers = (obj) => {
+    return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]));
+};
+const assertNumber = (value) => {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string' && !isNaN(Number(value))) {
+        return Number(value);
+    }
+    return 0;
+};
+//# sourceMappingURL=assert_keys_are_numbers.js.map

package/build/utils/assert_keys_are_numbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assert_keys_are_numbers.js","sourceRoot":"","sources":["../../src/utils/assert_keys_are_numbers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAuB,EAAE;IACvE,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAClG,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;IAE3C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACvD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;IACtB,CAAC;IAED,OAAO,CAAC,CAAA;AACV,CAAC,CAAA","sourcesContent":["export const assertKeysAreNumbers = (obj: Object): Record<any, number> => {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))\n}\n\nconst assertNumber = (value: string): number => {\n  if (typeof value === 'number') return value\n\n  if (typeof value === 'string' && !isNaN(Number(value))) {\n    return Number(value)\n  }\n\n  return 0\n}\n"]}

package/build/utils/index.d.ts

@@ -8,4 +8,5 @@ export * from './native_adapters';
 export * from './pluralize';
 export * from './destructure_chat_group_graph_id';
 export * from './convert_attachments_for_create';
+export * from './assert_keys_are_numbers';
 //# sourceMappingURL=index.d.ts.map

package/build/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA"}

package/build/utils/index.js

@@ -8,4 +8,5 @@ export * from './native_adapters';
 export * from './pluralize';
 export * from './destructure_chat_group_graph_id';
 export * from './convert_attachments_for_create';
+export * from './assert_keys_are_numbers';
 //# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './destructure_chat_group_graph_id'\nexport * from './convert_attachments_for_create'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './destructure_chat_group_graph_id'\nexport * from './convert_attachments_for_create'\nexport * from './assert_keys_are_numbers'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.16.0-rc.2",
+  "version": "3.16.0-rc.3",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "7049e04c5d4b3cc2b6d30b5869c66dba504244b1"
+  "gitHead": "41458eebf252d441367b1c30a6b35e5422486bf2"
 }

package/src/components/conversation/attachments/giphy_attachment.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '../../../hooks'
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
 import { PlatformPressable } from '@react-navigation/elements'
 import { Image } from '../../display'
+import { assertKeysAreNumbers } from '../../../utils'
 
 export function GiphyAttachment({
   attachment,
@@ -46,20 +47,6 @@ export function GiphyAttachment({
   )
 }
 
-const assertKeysAreNumbers = (obj: Object): Record<any, number> => {
-  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))
-}
-
-const assertNumber = (value: string): number => {
-  if (typeof value === 'number') return value
-
-  if (typeof value === 'string' && !isNaN(Number(value))) {
-    return Number(value)
-  }
-
-  return 0
-}
-
 const useStyles = ({ imageWidth, imageHeight }: { imageWidth: number; imageHeight: number }) => {
   const { colors } = useTheme()
   return StyleSheet.create({

package/src/components/conversation/message.tsx

@@ -1,9 +1,13 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'
-import { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'
+import {
+  useAnimatedMessageBackgroundColor,
+  useInteractionGhostBackgroundColor,
+  useTheme,
+} from '../../hooks'
 import { MessageResource } from '../../types'
 import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageAttachments } from './message_attachments'
@@ -15,13 +19,7 @@ import {
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
   platformFontWeightMedium,
 } from '../../utils/styles'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  interpolateColor,
-  Easing,
-} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { MessageReadReceipts } from './message_read_receipts'
 import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
@@ -56,6 +54,8 @@ export function Message({
   const isPersisted = !isNewMessage(message)
   const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
+  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+    useAnimatedMessageBackgroundColor()
 
   useEffect(() => {
     if (pending) {
@@ -81,30 +81,6 @@ export function Message({
     }
   }
 
-  const bgFadeProgress = useSharedValue(0)
-  const pressedColor = Platform.select({
-    ios: colors.fillColorNeutral050Base,
-    default: 'transparent',
-  })
-  const animatedBackgroundColor = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      bgFadeProgress.value,
-      [0, 1],
-      ['transparent', pressedColor]
-    )
-    return {
-      backgroundColor,
-    }
-  })
-
-  const handlePressIn = () => {
-    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
-  }
-
-  const handlePressOut = () => {
-    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
-  }
-
   const handleMessageLongPress = () => {
     if (!isPersisted) return
 
@@ -149,8 +125,8 @@ export function Message({
     <Pressable
       onLongPress={handleMessageLongPress}
       onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={handleMessagePressIn}
+      onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral }}
       accessibilityHint="Long press to view message actions like reacting and copying."
     >

package/src/components/conversation/shadow_message.tsx

@@ -0,0 +1,266 @@
+import React from 'react'
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Avatar, Icon, IconProps, Image, Text } from '../display'
+import {
+  useAnimatedMessageBackgroundColor,
+  useFontScale,
+  useScalableNumberOfLines,
+  useTheme,
+} from '../../hooks'
+import { MessageResource } from '../../types'
+import {
+  DenormalizedAttachmentResource,
+  DenormalizedGiphyAttachmentResource,
+  DenormalizedExpandedLinkAttachmentResource,
+  DenormalizedMessageAttachmentResource,
+} from '../../types/resources/denormalized_attachment_resource'
+import {
+  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+  MAX_FONT_SIZE_MULTIPLIER,
+  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  platformFontWeightMedium,
+} from '../../utils/styles'
+import Animated from 'react-native-reanimated'
+import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
+import { assertKeysAreNumbers } from '../../utils'
+
+interface ShadowMessageProps extends MessageResource {}
+
+export function ShadowMessage({ ...message }: ShadowMessageProps) {
+  const { text } = message
+  const styles = useStyles(message)
+  const { colors } = useTheme()
+  const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
+  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+    useAnimatedMessageBackgroundColor()
+  const scalableNumberOfLines = useScalableNumberOfLines(2)
+
+  const replyCount = 0 // TODO: Get reply count from message object
+
+  const handleNavigateToReplies = () => {
+    console.log('Navigate to replies') // TODO: Implement navigate to a reply screen
+  }
+
+  return (
+    <Pressable
+      android_ripple={{ color: colors.androidRippleNeutral }}
+      onPress={handleNavigateToReplies}
+      onPressIn={handleMessagePressIn}
+      onPressOut={handleMessagePressOut}
+      accessibilityHint="Navigate to all replies for this message."
+    >
+      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+        {!message.mine && (
+          <View>
+            <View style={styles.avatarWrapper}>
+              <Avatar
+                size="xs"
+                sourceUri={message.author.avatar}
+                style={styles.avatar}
+                maxFontSizeMultiplier={1}
+              />
+            </View>
+            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+          </View>
+        )}
+        <View style={styles.messageContent}>
+          <View
+            style={styles.messageBubble}
+            onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
+          >
+            <MessageAttachmentImagery attachments={message.attachments} />
+            {text && (
+              <Text
+                variant="footnote"
+                style={styles.messageText}
+                numberOfLines={scalableNumberOfLines}
+              >
+                {text}
+              </Text>
+            )}
+          </View>
+          <View style={styles.messageMeta}>
+            <Text variant="footnote" style={styles.replyCountText}>
+              {replyCount} replies
+            </Text>
+          </View>
+        </View>
+        {message.mine && (
+          <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+        )}
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+function MessageAttachmentImagery({
+  attachments,
+}: {
+  attachments: DenormalizedAttachmentResource[]
+}) {
+  if (!attachments || attachments.length === 0) return null
+
+  const attachment = attachments[0]
+
+  if (attachment.type === 'giphy') {
+    return <GiphyImage attachment={attachment} />
+  }
+  if (attachment.type === 'ExpandedLink') {
+    return <ExpandedLinkImage attachment={attachment} />
+  }
+  if (attachment.type === 'MessageAttachment') {
+    const contentType = attachment.attributes?.contentType
+    const basicType = contentType?.split('/')[0]
+
+    switch (basicType) {
+      case 'image':
+        return <MessageAttachmentImage attachment={attachment} />
+      case 'video':
+        return <MessageAttachmentIcon iconName="general.outlinedVideoFile" />
+      case 'audio':
+        return <MessageAttachmentIcon iconName="general.outlinedMusicFile" />
+      case 'application':
+        return <MessageAttachmentIcon iconName="general.outlinedGenericFile" />
+      default:
+        return null
+    }
+  }
+
+  return null
+}
+
+function GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {
+  const { title, giphy } = attachment
+  const { url } = giphy.fixedWidth
+  const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)
+  const styles = useStyles({ imageWidth: width, imageHeight: height })
+
+  return (
+    <Image
+      source={{ uri: url }}
+      wrapperStyle={styles.imageWrapper}
+      style={styles.image}
+      alt={title}
+      loaderSize={16}
+    />
+  )
+}
+
+function ExpandedLinkImage({
+  attachment,
+}: {
+  attachment: DenormalizedExpandedLinkAttachmentResource
+}) {
+  const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes
+  const styles = useStyles({ imageWidth, imageHeight })
+
+  return (
+    <Image
+      source={{ uri: imageUrl }}
+      wrapperStyle={styles.imageWrapper}
+      style={styles.image}
+      alt={title}
+      loaderSize={16}
+    />
+  )
+}
+
+function MessageAttachmentImage({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const { url, urlMedium, filename, metadata = {} } = attachment.attributes
+  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })
+
+  return (
+    <Image
+      source={{ uri: urlMedium || url }}
+      style={styles.image}
+      wrapperStyle={styles.imageWrapper}
+      alt={filename}
+      loaderSize={16}
+    />
+  )
+}
+
+function MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {
+  const styles = useStyles()
+  return (
+    <Icon
+      name={iconName}
+      style={styles.attachmentIcon}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+    />
+  )
+}
+
+interface StylesProps {
+  imageWidth?: number
+  imageHeight?: number
+  mine?: boolean
+}
+
+const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {
+  const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { width } = useWindowDimensions()
+  const tabletWidth = width >= 744 // Smallest iPad Mini's width
+
+  return StyleSheet.create({
+    message: {
+      gap: 8,
+      flexDirection: mine ? 'row-reverse' : 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+    },
+    messageContent: {
+      flex: 1,
+      gap: 4,
+      marginBottom: 12,
+    },
+    avatarWrapper: {
+      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+      alignItems: 'center',
+    },
+    avatar: {
+      marginBottom: 8,
+      opacity: 0.5,
+    },
+    messageBubble: {
+      flexDirection: 'row',
+      alignSelf: mine ? 'flex-end' : 'flex-start',
+      alignItems: 'center',
+      gap: 8,
+      borderColor: colors.borderColorDefaultBase,
+      borderWidth: 1,
+      borderRadius: 8,
+      maxWidth: tabletWidth ? 360 : '80%',
+      paddingVertical: 6,
+      paddingHorizontal: 8,
+    },
+    messageText: {
+      color: colors.textColorDefaultPlaceholder,
+      flexShrink: 1,
+    },
+    messageMeta: {
+      flexDirection: 'row',
+      justifyContent: mine ? 'flex-end' : 'flex-start',
+    },
+    replyCountText: {
+      color: colors.interaction,
+      fontWeight: platformFontWeightMedium,
+    },
+    imageWrapper: {
+      width: 32 * fontScale,
+      aspectRatio: imageWidth / imageHeight,
+      opacity: 0.5,
+    },
+    image: {
+      borderRadius: 4,
+    },
+    attachmentIcon: {
+      color: colors.iconColorDefaultDim,
+      fontSize: 16,
+    },
+  })
+}

package/src/components/primitive/avatar_primitive.tsx

@@ -45,6 +45,7 @@ export type {
 // =================================
 
 const AVATAR_SIZES = {
+  xs: 'xs',
   sm: 'sm',
   md: 'md',
   lg: 'lg',
@@ -60,18 +61,21 @@ type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]
 type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]
 
 const AVATAR_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 20,
   [AVATAR_SIZES.sm]: 24,
   [AVATAR_SIZES.md]: 32,
   [AVATAR_SIZES.lg]: 40,
 }
 
 const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 8,
   [AVATAR_SIZES.sm]: 10,
   [AVATAR_SIZES.md]: 12,
   [AVATAR_SIZES.lg]: 14,
 }
 
 const AVATAR_FALLBACK_ICON_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 10,
   [AVATAR_SIZES.sm]: 12,
   [AVATAR_SIZES.md]: 16,
   [AVATAR_SIZES.lg]: 20,

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use_async_storage'
+export * from './use_animated_message_background_color'
 export * from './use_theme'
 export * from './use_suspense_api'
 export * from './use_current_person'

package/src/hooks/use_animated_message_background_color.ts

@@ -0,0 +1,44 @@
+import { Platform } from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+  Easing,
+} from 'react-native-reanimated'
+import { useTheme } from '../hooks'
+
+export function useAnimatedMessageBackgroundColor() {
+  const { colors } = useTheme()
+  const bgFadeProgress = useSharedValue(0)
+
+  const pressedColor = Platform.select({
+    ios: colors.fillColorNeutral050Base,
+    default: 'transparent',
+  })
+
+  const animatedBackgroundColor = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      bgFadeProgress.value,
+      [0, 1],
+      ['transparent', pressedColor]
+    )
+    return {
+      backgroundColor,
+    }
+  })
+
+  const handleMessagePressIn = () => {
+    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
+  }
+
+  const handleMessagePressOut = () => {
+    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
+  }
+
+  return {
+    animatedBackgroundColor,
+    handleMessagePressIn,
+    handleMessagePressOut,
+  }
+}

package/src/utils/assert_keys_are_numbers.ts

@@ -0,0 +1,13 @@
+export const assertKeysAreNumbers = (obj: Object): Record<any, number> => {
+  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))
+}
+
+const assertNumber = (value: string): number => {
+  if (typeof value === 'number') return value
+
+  if (typeof value === 'string' && !isNaN(Number(value))) {
+    return Number(value)
+  }
+
+  return 0
+}

package/src/utils/index.ts

@@ -8,3 +8,4 @@ export * from './native_adapters'
 export * from './pluralize'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
+export * from './assert_keys_are_numbers'