@helpwave/hightide-native 0.6.0 → 0.9.0

package/src/components/chat/ChatConversationRow.tsx

@@ -1,12 +1,10 @@
 import {
-  cloneElement,
-  Fragment,
-  isValidElement,
   useMemo,
-  type ReactElement,
+  useState,
   type ReactNode
 } from 'react'
 import {
+  StyleSheet,
   View,
   type PressableProps
 } from 'react-native'
@@ -14,9 +12,10 @@ import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme, useMemoizedThemeFactory } from '../../hooks/useMemoizedTheme'
 import type {
   AvatarState,
-  AvatarStyle
+  AvatarThemeResolvers
 } from '../../theme/types/components/avatar'
 import type {
   ChatConversationRowContentContainerStyle,
@@ -28,22 +27,32 @@ import type {
   ChatConversationRowTimestampStyle,
   ChatConversationRowTitleStyle,
   PressableContainerStyle,
-  PressableState
+  PressableIconStyle,
+  PressableState,
+  PressableStateLayerStyle,
+  PressableTextStyle
 } from '../../theme/types/components/chat'
-import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { StyleOverwrite, StyleResolverFunction } from '../../theme/types/resolver'
+import {
+  AvatarWithStatus,
+  type AvatarWithStatusProps
+} from '../visualization-and-display/Avatar'
+
+import type { ChatMessageStatus } from '../../enums/chatMessageStatus'
+import type { IconComponent } from '../../icons/types'
 import { ThemedPressable } from '../user-interaction'
-import type { AvatarProps } from '../visualization-and-display/Avatar'
 
-export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
+export type { ChatMessageStatus }
 
 export type ChatConversationRowProps = Omit<PressableProps, 'children' | 'style'> & {
-  avatar: ReactNode,
+  avatarProps?: AvatarWithStatusProps,
+  avatarOverride?: ReactNode,
   title: ReactNode,
   timestamp?: ReactNode,
   preview?: ReactNode,
   unreadCount?: number,
   isSelected?: boolean,
-  sentIndicator?: ChatConversationSentIndicator,
+  messageStatus?: ChatMessageStatus,
   style?: StyleOverwrite<PressableState, PressableContainerStyle>,
   contentContainerStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowContentContainerStyle>,
   headerRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowHeaderRowStyle>,
@@ -52,32 +61,34 @@ export type ChatConversationRowProps = Omit<PressableProps, 'children' | 'style'
   timestampStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowTimestampStyle>,
   previewStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowPreviewStyle>,
   sentIndicatorStyle?: StyleOverwrite<Record<string, never>, ChatConversationRowSentIndicatorStyle>,
-  avatarStyle?: StyleOverwrite<AvatarState, AvatarStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
-type AvatarElementProps = AvatarProps & {
-  avatarStyle?: AvatarProps['avatarStyle'],
+type ConversationRowPressableResolvers = {
+  container: StyleResolverFunction<PressableState, PressableContainerStyle>,
+  stateLayer: StyleResolverFunction<PressableState, PressableStateLayerStyle>,
+  text: StyleResolverFunction<PressableState, PressableTextStyle>,
+  icon: StyleResolverFunction<PressableState, PressableIconStyle>,
 }
 
 const toNumericSize = (value: unknown): number | undefined => (
   typeof value === 'number' ? value : undefined
 )
 
+const resolveMessageStatusIcon = (messageStatus: ChatMessageStatus): IconComponent => (
+  messageStatus === 'sent'
+    ? HightideIconRegistry.Clock
+    : HightideIconRegistry.CheckCheck
+)
+
 export const ChatConversationRow = ({
-  avatar,
+  avatarProps,
+  avatarOverride,
   title,
   timestamp,
   preview,
   unreadCount,
   isSelected = false,
-  sentIndicator,
+  messageStatus,
   disabled,
   style,
   contentContainerStyle,
@@ -87,169 +98,153 @@ export const ChatConversationRow = ({
   timestampStyle,
   previewStyle,
   sentIndicatorStyle,
-  avatarStyle,
   ...props
 }: ChatConversationRowProps) => {
   const { theme } = useTheme()
+  const [isPressed, setIsPressed] = useState(false)
   const isUnread = (unreadCount ?? 0) > 0
-  const sentIndicatorIcon = sentIndicator === 'sentAndReceived'
-    ? HightideIconRegistry.CheckCheck
-    : HightideIconRegistry.Check
+  const staticState = useMemo(() => ({}), [])
 
-  const resolveState = (interaction: PressableInteraction): ChatConversationRowState => ({
+  const rowState = useMemo((): ChatConversationRowState => ({
     isUnread,
     isSelected,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [disabled, isPressed, isSelected, isUnread])
 
-  const staticState = useMemo(() => ({}), [])
-  const unreadBadge = useMemo(
-    () => theme.components.chat.conversationRow.unreadBadge(staticState),
-    [theme, staticState]
-  )
-  const unreadBadgeText = useMemo(
-    () => theme.components.chat.conversationRow.unreadBadgeText(staticState),
-    [theme, staticState]
-  )
-  const resolvedSentIndicator = useMemo(
-    () => theme.components.chat.conversationRow.sentIndicator(staticState, sentIndicatorStyle),
-    [theme, staticState, sentIndicatorStyle]
-  )
-  const avatarTheme = useMemo(
-    () => theme.components.chat.conversationRow.avatar(staticState),
-    [theme, staticState]
+  const pressableThemeState = useMemo((): PressableState => ({
+    isPressed,
+    isDisabled: !!disabled,
+  }), [disabled, isPressed])
+
+  const pressableResolvers = useMemoizedThemeFactory<
+    ChatConversationRowState,
+    ConversationRowPressableResolvers
+  >(theme.components.chat.conversationRow.pressable, rowState)
+
+  const resolvedContainerStyle = useMemoizedTheme(pressableResolvers.container, pressableThemeState, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(pressableResolvers.stateLayer, pressableThemeState)
+  const resolvedContentContainer = useMemoizedTheme(theme.components.chat.conversationRow.contentContainer, rowState, contentContainerStyle)
+  const resolvedHeaderRow = useMemoizedTheme(theme.components.chat.conversationRow.headerRow, rowState, headerRowStyle)
+  const resolvedMessageRow = useMemoizedTheme(theme.components.chat.conversationRow.messageRow, rowState, messageRowStyle)
+  const resolvedTitle = useMemoizedTheme(theme.components.chat.conversationRow.title, rowState, titleStyle)
+  const resolvedTimestamp = useMemoizedTheme(theme.components.chat.conversationRow.timestamp, rowState, timestampStyle)
+  const resolvedPreview = useMemoizedTheme(theme.components.chat.conversationRow.preview, rowState, previewStyle)
+  const unreadBadge = useMemoizedTheme(theme.components.chat.conversationRow.unreadBadge, staticState)
+  const unreadBadgeText = useMemoizedTheme(theme.components.chat.conversationRow.unreadBadgeText, staticState)
+  const resolvedSentIndicator = useMemoizedTheme(theme.components.chat.conversationRow.sentIndicator, staticState, sentIndicatorStyle)
+  const avatarTheme = useMemoizedThemeFactory<AvatarState, AvatarThemeResolvers>(
+    theme.components.chat.conversationRow.avatar,
+    staticState
   )
   const avatarSize = useMemo(
-    () => toNumericSize(avatarTheme.container({}).width),
-    [avatarTheme]
+    () => toNumericSize(StyleSheet.flatten(avatarTheme.container({})).width) ?? avatarProps?.size,
+    [avatarProps?.size, avatarTheme]
   )
+  const messageStatusIcon = messageStatus === undefined
+    ? undefined
+    : resolveMessageStatusIcon(messageStatus)
+  const messageStatusIconColor = messageStatus === 'read'
+    ? theme.colors.primary.color
+    : resolvedSentIndicator.color
 
-  const resolvedAvatar = useMemo(() => {
-    if (!isValidElement(avatar) || avatarSize === undefined) {
-      return avatar
-    }
-
-    const avatarElement = avatar as ReactElement<AvatarElementProps>
-
-    return cloneElement(avatarElement, {
-      size: avatarSize,
-      avatarStyle: (avatarState) => avatarTheme.container(
-        {
-          ...avatarState,
-          size: avatarSize,
-        },
-        avatarStyle ?? avatarElement.props.avatarStyle
-      ),
-      imageStyle: (avatarState) => avatarTheme.image(
-        {
-          ...avatarState,
-          size: avatarSize,
-        },
-        avatarElement.props.imageStyle
-      ),
-      textStyle: (avatarState) => avatarTheme.text(
-        {
-          ...avatarState,
-          size: avatarSize,
-        },
-        avatarElement.props.textStyle
-      ),
-      iconStyle: (avatarState) => avatarTheme.icon(
-        {
-          ...avatarState,
-          size: avatarSize,
-        },
-        avatarElement.props.iconStyle
-      ),
-    })
-  }, [avatar, avatarSize, avatarStyle, avatarTheme])
+  const {
+    avatarStyle,
+    imageStyle,
+    textStyle,
+    iconStyle,
+    ...restAvatarProps
+  } = avatarProps ?? {}
 
   return (
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return theme.components.chat.conversationRow.pressable(state).container(
-          pressableState,
-          style
-        )
-      }}
-      stateLayerStyle={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return theme.components.chat.conversationRow.pressable(state).stateLayer(pressableState)
-      }}
-      textStyle={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return theme.components.chat.conversationRow.pressable(state).text(pressableState)
+      style={resolvedContainerStyle}
+      stateLayerStyle={resolvedStateLayerStyle}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-      iconStyle={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return theme.components.chat.conversationRow.pressable(state).icon(pressableState)
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
       }}
     >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedContentContainer = theme.components.chat.conversationRow.contentContainer(
-          state,
-          contentContainerStyle
-        )
-        const resolvedHeaderRow = theme.components.chat.conversationRow.headerRow(state, headerRowStyle)
-        const resolvedMessageRow = theme.components.chat.conversationRow.messageRow(state, messageRowStyle)
-        const resolvedTitle = theme.components.chat.conversationRow.title(state, titleStyle)
-        const resolvedTimestamp = theme.components.chat.conversationRow.timestamp(state, timestampStyle)
-        const resolvedPreview = theme.components.chat.conversationRow.preview(state, previewStyle)
-
-        return (
-          <Fragment>
-            {resolvedAvatar}
-            <View style={resolvedContentContainer}>
-              <View style={resolvedHeaderRow}>
-                {typeof title === 'string' || typeof title === 'number' ? (
-                  <ThemedText style={resolvedTitle} numberOfLines={1}>{title}</ThemedText>
-                ) : (
-                  title
-                )}
-                {timestamp != null && (
-                  typeof timestamp === 'string' || typeof timestamp === 'number' ? (
-                    <ThemedText style={resolvedTimestamp}>{timestamp}</ThemedText>
-                  ) : (
-                    timestamp
-                  )
-                )}
-              </View>
-              <View style={resolvedMessageRow}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: theme.spacing.xs  /* TODO replace this with a theme style */ }}>
-                  {sentIndicator && (
-                    <ThemedIcon
-                      icon={sentIndicatorIcon}
-                      size={resolvedSentIndicator.size}
-                      strokeWidth={resolvedSentIndicator.strokeWidth}
-                      color={resolvedSentIndicator.color}
-                    />
-                  )}
-                  {preview != null && (
-                    typeof preview === 'string' || typeof preview === 'number' ? (
-                      <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
-                    ) : (
-                      preview
-                    )
-                  )}
-                </View>
-                {isUnread && (
-                  <View style={unreadBadge}>
-                    <ThemedText style={unreadBadgeText}>{unreadCount}</ThemedText>
-                  </View>
-                )}
-              </View>
+      {avatarOverride ?? (
+        <AvatarWithStatus
+          {...restAvatarProps}
+          size={avatarSize}
+          avatarStyle={(avatarState) => avatarTheme.container(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            avatarStyle
+          )}
+          imageStyle={(avatarState) => avatarTheme.image(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            imageStyle
+          )}
+          textStyle={(avatarState) => avatarTheme.text(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            textStyle
+          )}
+          iconStyle={(avatarState) => avatarTheme.icon(
+            {
+              ...avatarState,
+              size: avatarSize,
+            },
+            iconStyle
+          )}
+        />
+      )}
+      <View style={resolvedContentContainer}>
+        <View style={resolvedHeaderRow}>
+          {typeof title === 'string' || typeof title === 'number' ? (
+            <ThemedText style={resolvedTitle} numberOfLines={1}>{title}</ThemedText>
+          ) : (
+            title
+          )}
+          {timestamp != null && (
+            typeof timestamp === 'string' || typeof timestamp === 'number' ? (
+              <ThemedText style={resolvedTimestamp}>{timestamp}</ThemedText>
+            ) : (
+              timestamp
+            )
+          )}
+        </View>
+        <View style={resolvedMessageRow}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: theme.spacing.xs }}>
+            {messageStatusIcon != null && (
+              <ThemedIcon
+                icon={messageStatusIcon}
+                size={resolvedSentIndicator.size}
+                strokeWidth={resolvedSentIndicator.strokeWidth}
+                color={messageStatusIconColor}
+              />
+            )}
+            {preview != null && (
+              typeof preview === 'string' || typeof preview === 'number' ? (
+                <ThemedText style={[resolvedPreview, { flex: 1 }]} numberOfLines={1}>{preview}</ThemedText>
+              ) : (
+                preview
+              )
+            )}
+          </View>
+          {isUnread && (
+            <View style={unreadBadge}>
+              <ThemedText style={unreadBadgeText}>{unreadCount}</ThemedText>
             </View>
-          </Fragment>
-        )
-      }}
+          )}
+        </View>
+      </View>
     </ThemedPressable>
   )
 }

package/src/components/chat/ChatDateDivider.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ChatDateDividerStyle,
@@ -34,14 +35,8 @@ export const ChatDateDivider = ({
   const { theme } = useTheme()
   const state = useMemo(() => ({}), [])
 
-  const resolvedDividerStyle = useMemo(
-    () => theme.components.chat.dateDivider.container(state, dividerStyle),
-    [theme, state, dividerStyle]
-  )
-  const resolvedTextStyle = useMemo(
-    () => theme.components.chat.dateDivider.text(state, textStyle),
-    [theme, state, textStyle]
-  )
+  const resolvedDividerStyle = useMemoizedTheme(theme.components.chat.dateDivider.container, state, dividerStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.chat.dateDivider.text, state, textStyle)
 
   return (
     <View {...props} style={[resolvedDividerStyle, style]}>

package/src/components/chat/ChatMessageBubble.tsx

@@ -6,10 +6,22 @@ import {
   View,
   type ViewProps
 } from 'react-native'
+import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import {
+  useDateTimeFormat,
+  useLocalization
+} from '../../global-contexts/localization/forward-exports'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
+import type {
+  ChatMessageStatus
+} from '../../enums/chatMessageStatus'
+import type {
+  ChatMessageDirection
+} from '../../enums/chatMessageDirection'
 import type {
   ChatMessageBubbleBodyStyle,
   ChatMessageBubbleBodyTextStyle,
@@ -17,17 +29,17 @@ import type {
   ChatMessageBubbleMetaDataContainerStyle,
   ChatMessageBubbleMetaDataStatusContainerStyle,
   ChatMessageBubbleMetaDataTextStyle,
-  ChatMessageBubbleState,
-  ChatMessageDirection
+  ChatMessageBubbleState
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { IconComponent } from '../../icons/types'
 
-export type { ChatMessageDirection }
+export type { ChatMessageDirection, ChatMessageStatus }
 
 export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
   direction: ChatMessageDirection,
-  timestamp: ReactNode,
-  readReceipt?: ReactNode,
+  timestamp?: Date,
+  status?: ChatMessageStatus,
   children?: ReactNode,
   style?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
   bodyStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyStyle>,
@@ -37,10 +49,17 @@ export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
   metaDataTextStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataTextStyle>,
 }
 
+const resolveMessageStatusIcon = (status: ChatMessageStatus): IconComponent => (
+  status === 'sending'
+    ? HightideIconRegistry.Clock
+    : status === 'sent' ? HightideIconRegistry.Check
+      : HightideIconRegistry.CheckCheck
+)
+
 export const ChatMessageBubble = ({
   direction,
   timestamp,
-  readReceipt,
+  status,
   children,
   style,
   bodyStyle,
@@ -51,36 +70,31 @@ export const ChatMessageBubble = ({
   ...props
 }: ChatMessageBubbleProps) => {
   const { theme } = useTheme()
+  const { locale } = useLocalization()
+  const { is24HourFormat, timeZone } = useDateTimeFormat()
   const state = useMemo(() => ({ direction }), [direction])
 
-  const resolvedContainerStyle = useMemo(
-    () => theme.components.chat.messageBubble.container(state, style),
-    [theme, state, style]
-  )
-  const resolvedBodyStyle = useMemo(
-    () => theme.components.chat.messageBubble.body(state, bodyStyle),
-    [theme, state, bodyStyle]
-  )
-  const resolvedBodyTextStyle = useMemo(
-    () => theme.components.chat.messageBubble.bodyText(state, bodyTextStyle),
-    [theme, state, bodyTextStyle]
-  )
-  const resolvedMetaDataContainerStyle = useMemo(
-    () => theme.components.chat.messageBubble.metaDataContainer(state, metaDataContainerStyle),
-    [theme, state, metaDataContainerStyle]
-  )
-  const resolvedMetaDataStatusContainerStyle = useMemo(
-    () => theme.components.chat.messageBubble.metaDataStatusContainer(state, metaDataStatusContainerStyle),
-    [theme, state, metaDataStatusContainerStyle]
-  )
-  const resolvedMetaDataTextStyle = useMemo(
-    () => theme.components.chat.messageBubble.metaDataText(state, metaDataTextStyle),
-    [theme, state, metaDataTextStyle]
-  )
-  const resolvedMetaDataIcon = useMemo(
-    () => theme.components.chat.messageBubble.metaDataIcon(state),
-    [theme, state]
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.chat.messageBubble.container, state, style)
+  const resolvedBodyStyle = useMemoizedTheme(theme.components.chat.messageBubble.body, state, bodyStyle)
+  const resolvedBodyTextStyle = useMemoizedTheme(theme.components.chat.messageBubble.bodyText, state, bodyTextStyle)
+  const resolvedMetaDataContainerStyle = useMemoizedTheme(theme.components.chat.messageBubble.metaDataContainer, state, metaDataContainerStyle)
+  const resolvedMetaDataStatusContainerStyle = useMemoizedTheme(theme.components.chat.messageBubble.metaDataStatusContainer, state, metaDataStatusContainerStyle)
+  const resolvedMetaDataTextStyle = useMemoizedTheme(theme.components.chat.messageBubble.metaDataText, state, metaDataTextStyle)
+  const resolvedMetaDataIcon = useMemoizedTheme(theme.components.chat.messageBubble.metaDataIcon, state)
+  const formattedTimestamp = useMemo(() => (
+    timestamp === undefined
+      ? undefined
+      : DateUtils.formatAbsolute(timestamp, locale, 'time', { timeZone, is24HourFormat })
+  ), [timestamp, locale, timeZone, is24HourFormat])
+  const messageStatusIcon = useMemo(
+    () => (status === undefined ? undefined : resolveMessageStatusIcon(status)),
+    [status]
   )
+  const messageStatusIconColor = useMemo(() => (
+    status === 'read'
+      ? theme.colors.primary.color
+      : resolvedMetaDataIcon.color
+  ), [status, resolvedMetaDataIcon.color, theme.colors.primary.color])
 
   return (
     <View {...props} style={resolvedContainerStyle}>
@@ -92,25 +106,18 @@ export const ChatMessageBubble = ({
         )}
       </View>
       <View style={resolvedMetaDataContainerStyle}>
-        {readReceipt != null && (
+        {messageStatusIcon != null && (
           <View style={resolvedMetaDataStatusContainerStyle}>
             <ThemedIcon
-              icon={HightideIconRegistry.CheckCheck}
+              icon={messageStatusIcon}
               size={resolvedMetaDataIcon.size}
               strokeWidth={resolvedMetaDataIcon.strokeWidth}
-              color={resolvedMetaDataIcon.color}
+              color={messageStatusIconColor}
             />
-            {typeof readReceipt === 'string' || typeof readReceipt === 'number' ? (
-              <ThemedText style={resolvedMetaDataTextStyle}>{readReceipt}</ThemedText>
-            ) : (
-              readReceipt
-            )}
           </View>
         )}
-        {typeof timestamp === 'string' || typeof timestamp === 'number' ? (
-          <ThemedText style={resolvedMetaDataTextStyle}>{timestamp}</ThemedText>
-        ) : (
-          timestamp
+        {formattedTimestamp != null && (
+          <ThemedText style={resolvedMetaDataTextStyle}>{formattedTimestamp}</ThemedText>
         )}
       </View>
     </View>

package/src/components/chat/ChatMessageComposer.tsx

@@ -15,6 +15,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { IconButton } from '../user-interaction/IconButton'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ChatMessageComposerInputStyle,
   ChatMessageComposerStyle
@@ -60,18 +61,9 @@ export const ChatMessageComposer = ({
   })
   const state = useMemo(() => ({}), [])
 
-  const resolvedComposerStyle = useMemo(
-    () => theme.components.chat.messageComposer.container(state, composerStyle),
-    [theme, state, composerStyle]
-  )
-  const resolvedInputStyle = useMemo(
-    () => theme.components.chat.messageComposer.input(state, inputStyle),
-    [theme, state, inputStyle]
-  )
-  const placeholderColor = useMemo(
-    () => theme.components.chat.messageComposer.placeholderColor(state),
-    [theme, state]
-  )
+  const resolvedComposerStyle = useMemoizedTheme(theme.components.chat.messageComposer.container, state, composerStyle)
+  const resolvedInputStyle = useMemoizedTheme(theme.components.chat.messageComposer.input, state, inputStyle)
+  const placeholderColor = useMemoizedTheme(theme.components.chat.messageComposer.placeholderColor, state)
 
   const send = () => {
     const trimmed = (value ?? '').trim()

package/src/components/chat/ChatMessageList.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type { ChatMessageListStyle } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 
@@ -37,14 +38,7 @@ export const ChatMessageList = ({
   const scrollRef = useRef<ScrollView>(null)
   const state = useMemo(() => ({}), [])
 
-  const resolvedListStyle = useMemo(
-    () => theme.components.chat.messageList.container(state, listStyle),
-    [theme, state, listStyle]
-  )
-  const listGap = useMemo(
-    () => (theme.components.chat.messageList.container(state) as ViewStyle).gap,
-    [theme, state]
-  )
+  const resolvedListStyle = useMemoizedTheme(theme.components.chat.messageList.container, state, listStyle)
 
   useEffect(() => {
     if (autoScroll) {
@@ -56,7 +50,7 @@ export const ChatMessageList = ({
     <ScrollView
       ref={scrollRef}
       style={[resolvedListStyle, style]}
-      contentContainerStyle={[{ gap: listGap }, contentContainerStyle]}
+      contentContainerStyle={[{ gap: resolvedListStyle.gap }, contentContainerStyle]}
       onScroll={onScroll}
       scrollEventThrottle={16}
     >