@helpwave/hightide-native 0.6.0 → 0.7.0

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -1,27 +1,28 @@
 import {
   useMemo,
+  useState,
   type ReactNode
 } from 'react'
+import {
+  View,
+  type PressableProps
+} from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import {
-  ThemedPressable,
-  type ThemedPressableProps
-} from '../user-interaction/ThemedPressable'
+import { useMemoizedTheme, useMemoizedThemeFactory } from '../../hooks/useMemoizedTheme'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ChatQuickReplyChipState,
   PressableContainerStyle,
   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 { ThemedPressable } from '../user-interaction'
 
-export type ChatQuickReplyChipProps = Omit<
-  ThemedPressableProps,
-  'children' | 'containerStyle' | 'textStyle' | 'stateLayerStyle' | 'iconStyle'
-> & {
+export type ChatQuickReplyChipProps = Omit<PressableProps, 'children' | 'style'> & {
   isActive?: boolean,
   children?: ReactNode,
   style?: StyleOverwrite<PressableState, PressableContainerStyle>,
@@ -29,41 +30,54 @@ export type ChatQuickReplyChipProps = Omit<
   iconStyle?: StyleOverwrite<PressableState, PressableIconStyle>,
 }
 
+type QuickReplyChipPressableResolvers = {
+  container: StyleResolverFunction<PressableState, PressableContainerStyle>,
+  stateLayer: StyleResolverFunction<PressableState, PressableStateLayerStyle>,
+  text: StyleResolverFunction<PressableState, PressableTextStyle>,
+  icon: StyleResolverFunction<PressableState, PressableIconStyle>,
+}
+
 export const ChatQuickReplyChip = ({
   isActive = false,
   children,
   disabled,
   style,
   textStyle,
-  iconStyle,
   ...props
 }: ChatQuickReplyChipProps) => {
   const { theme } = useTheme()
+  const [isPressed, setIsPressed] = useState(false)
   const state = useMemo((): ChatQuickReplyChipState => ({ isActive }), [isActive])
-  const pressableResolvers = useMemo(
-    () => theme.components.chat.quickReplyChip.pressable(state),
-    [theme, state]
-  )
+  const pressableThemeState = useMemo((): PressableState => ({
+    isPressed,
+    isDisabled: !!disabled,
+  }), [disabled, isPressed])
+  const pressableResolvers = useMemoizedThemeFactory<
+    ChatQuickReplyChipState,
+    QuickReplyChipPressableResolvers
+  >(theme.components.chat.quickReplyChip.pressable, state)
+
+  const resolvedContainerStyle = useMemoizedTheme(pressableResolvers.container, pressableThemeState, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(pressableResolvers.stateLayer, pressableThemeState)
+  const resolvedTextStyle = useMemoizedTheme(pressableResolvers.text, pressableThemeState, textStyle)
 
   return (
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={(pressableState) => (
-        pressableResolvers.container(pressableState, style)
-      )}
-      stateLayerStyle={(pressableState) => (
-        pressableResolvers.stateLayer(pressableState)
-      )}
-      textStyle={(pressableState) => (
-        pressableResolvers.text(pressableState, textStyle)
-      )}
-      iconStyle={(pressableState) => (
-        pressableResolvers.icon(pressableState, iconStyle)
-      )}
+      style={resolvedContainerStyle}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
+      }}
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
+      }}
     >
+      <View pointerEvents="none" style={resolvedStateLayerStyle} />
       {typeof children === 'string' || typeof children === 'number' ? (
-        <ThemedText>{children}</ThemedText>
+        <ThemedText style={resolvedTextStyle}>{children}</ThemedText>
       ) : (
         children
       )}

package/src/components/chat/ChatSystemLine.tsx

@@ -15,6 +15,7 @@ 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 } from '../../hooks/useMemoizedTheme'
 import type {
   ChatSystemLineState,
   ChatSystemLineStyle,
@@ -43,18 +44,9 @@ export const ChatSystemLine = ({
   const { theme } = useTheme()
   const state = useMemo(() => ({ color }), [color])
 
-  const resolvedLineStyle = useMemo(
-    () => theme.components.chat.systemLine.container(state, lineStyle),
-    [theme, state, lineStyle]
-  )
-  const resolvedTextStyle = useMemo(
-    () => theme.components.chat.systemLine.text(state, textStyle),
-    [theme, state, textStyle]
-  )
-  const resolvedIcon = useMemo(
-    () => theme.components.chat.systemLine.icon(state),
-    [theme, state]
-  )
+  const resolvedLineStyle = useMemoizedTheme(theme.components.chat.systemLine.container, state, lineStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.chat.systemLine.text, state, textStyle)
+  const resolvedIcon = useMemoizedTheme(theme.components.chat.systemLine.icon, state)
 
   return (
     <View {...props} style={[resolvedLineStyle, style]}>

package/src/components/chat/ChatThreadHeader.tsx

@@ -1,24 +1,28 @@
 import {
   useMemo,
+  useState,
   type ReactNode
 } from 'react'
 import {
+  StyleSheet,
   View,
+  type PressableProps,
   type StyleProp,
   type ViewProps,
   type ViewStyle
 } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme, useMemoizedThemeFactory } from '../../hooks/useMemoizedTheme'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import {
   Avatar,
   type AvatarProps
 } from '../visualization-and-display/Avatar'
-import {
-  ThemedPressable,
-  type ThemedPressableProps
-} from '../user-interaction/ThemedPressable'
+import type {
+  AvatarState,
+  AvatarThemeResolvers
+} from '../../theme/types/components/avatar'
 import type {
   ChatThreadHeaderContentRowStyle,
   ChatThreadHeaderStyle,
@@ -28,6 +32,8 @@ import type {
   PressableState
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { ThemedPressable } from '../user-interaction'
+import type { ThemedPressableState, ThemedPressableThemeResolvers } from '../../theme'
 
 export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
   avatar?: AvatarProps,
@@ -35,7 +41,7 @@ export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
   subtitle?: ReactNode,
   leftActions?: ReactNode,
   rightActions?: ReactNode,
-  onPress?: ThemedPressableProps['onPress'],
+  onPress?: PressableProps['onPress'],
   disabled?: boolean,
   style?: StyleProp<ViewStyle>,
   headerStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderStyle>,
@@ -45,65 +51,146 @@ export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
   pressableContainerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
 }
 
-export const ChatThreadHeader = ({
+type ChatThreadHeaderPressableContentProps = {
+  avatar?: AvatarProps,
+  title: ReactNode,
+  subtitle?: ReactNode,
+  disabled?: boolean,
+  onPress?: PressableProps['onPress'],
+  contentRowStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderContentRowStyle>,
+  titleStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderTitleStyle>,
+  subtitleStyle?: StyleOverwrite<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
+  pressableContainerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+}
+
+const ChatThreadHeaderPressableContent = ({
   avatar,
   title,
   subtitle,
-  leftActions,
-  rightActions,
-  onPress,
   disabled,
-  style,
-  headerStyle,
+  onPress,
   contentRowStyle,
   titleStyle,
   subtitleStyle,
   pressableContainerStyle,
-  ...props
-}: ChatThreadHeaderProps) => {
+}: ChatThreadHeaderPressableContentProps) => {
   const { theme } = useTheme()
-  const state = useMemo(() => ({}), [])
+  const [isPressed, setIsPressed] = useState(false)
+  const staticState = useMemo(() => ({}), [])
   const resolvedAvatar = useMemo(() => ({
     ...avatar,
   }), [avatar])
 
-  const resolvedHeaderStyle = useMemo(
-    () => theme.components.chat.threadHeader.container(state, headerStyle),
-    [theme, state, headerStyle]
-  )
-  const resolvedContentRowStyle = useMemo(
-    () => theme.components.chat.threadHeader.contentRow(state, contentRowStyle),
-    [theme, state, contentRowStyle]
-  )
-  const resolvedTitleStyle = useMemo(
-    () => theme.components.chat.threadHeader.title(state, titleStyle),
-    [theme, state, titleStyle]
-  )
-  const resolvedSubtitleStyle = useMemo(
-    () => theme.components.chat.threadHeader.subtitle(state, subtitleStyle),
-    [theme, state, subtitleStyle]
-  )
-  const pressableResolvers = useMemo(
-    () => theme.components.chat.threadHeader.pressable(state),
-    [theme, state]
-  )
+  const pressableThemeState = useMemo((): PressableState => ({
+    isPressed,
+    isDisabled: !!disabled,
+  }), [disabled, isPressed])
+  const pressableResolvers = useMemoizedThemeFactory<
+    ThemedPressableState,
+    ThemedPressableThemeResolvers
+  >(theme.components.chat.threadHeader.pressable, staticState)
+  const resolvedContentRowStyle = useMemoizedTheme(theme.components.chat.threadHeader.contentRow, staticState, contentRowStyle)
+  const resolvedTitleStyle = useMemoizedTheme(theme.components.chat.threadHeader.title, staticState, titleStyle)
+  const resolvedSubtitleStyle = useMemoizedTheme(theme.components.chat.threadHeader.subtitle, staticState, subtitleStyle)
+  const resolvedContainerStyle = useMemoizedTheme(pressableResolvers.container, pressableThemeState, pressableContainerStyle)
+  const resolvedStateLayerStyle = useMemoizedTheme(pressableResolvers.stateLayer, pressableThemeState)
 
-  const avatarTheme = useMemo(
-    () => theme.components.chat.threadHeader.avatar({
+  const avatarTheme = useMemoizedThemeFactory<AvatarState, AvatarThemeResolvers>(
+    theme.components.chat.threadHeader.avatar,
+    {
       size: resolvedAvatar.size,
       color: resolvedAvatar.color,
-    }),
-    [theme, resolvedAvatar.size, resolvedAvatar.color]
+    }
   )
   const avatarSize = useMemo(() => {
     if (typeof resolvedAvatar.size === 'number' || typeof resolvedAvatar.size === 'string') {
       return resolvedAvatar.size
     }
 
-    const width = avatarTheme.container({}).width
+    const width = StyleSheet.flatten(avatarTheme.container({})).width
     return typeof width === 'number' ? width : resolvedAvatar.size
   }, [avatarTheme, resolvedAvatar.size])
 
+  return (
+    <ThemedPressable
+      disabled={disabled}
+      onPress={onPress}
+      style={resolvedContainerStyle}
+      stateLayerStyle={resolvedStateLayerStyle}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+    >
+      <Avatar
+        {...resolvedAvatar}
+        size={avatarSize}
+        avatarStyle={(avatarState) => avatarTheme.container(
+          {
+            ...avatarState,
+            size: avatarSize,
+          },
+          resolvedAvatar.avatarStyle
+        )}
+        imageStyle={(avatarState) => avatarTheme.image(
+          {
+            ...avatarState,
+            size: avatarSize,
+          },
+          resolvedAvatar.imageStyle
+        )}
+        textStyle={(avatarState) => avatarTheme.text(
+          {
+            ...avatarState,
+            size: avatarSize,
+          },
+          resolvedAvatar.textStyle
+        )}
+        iconStyle={(avatarState) => avatarTheme.icon(
+          {
+            ...avatarState,
+            size: avatarSize,
+          },
+          resolvedAvatar.iconStyle
+        )}
+      />
+      <View style={resolvedContentRowStyle}>
+        {typeof title === 'string' || typeof title === 'number' ? (
+          <ThemedText style={resolvedTitleStyle} numberOfLines={1}>{title}</ThemedText>
+        ) : (
+          title
+        )}
+        {subtitle != null && (
+          typeof subtitle === 'string' || typeof subtitle === 'number' ? (
+            <ThemedText style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</ThemedText>
+          ) : (
+            subtitle
+          )
+        )}
+      </View>
+    </ThemedPressable>
+  )
+}
+
+export const ChatThreadHeader = ({
+  avatar,
+  title,
+  subtitle,
+  leftActions,
+  rightActions,
+  onPress,
+  disabled,
+  style,
+  headerStyle,
+  contentRowStyle,
+  titleStyle,
+  subtitleStyle,
+  pressableContainerStyle,
+  ...props
+}: ChatThreadHeaderProps) => {
+  const { theme } = useTheme()
+  const staticState = useMemo(() => ({}), [])
+
+  const resolvedHeaderStyle = useMemoizedTheme(theme.components.chat.threadHeader.container, staticState, headerStyle)
+
   return (
     <View {...props} style={[resolvedHeaderStyle, style]}>
       {leftActions != null && (
@@ -111,69 +198,17 @@ export const ChatThreadHeader = ({
           {leftActions}
         </View>
       )}
-      <ThemedPressable
-        onPress={onPress}
+      <ChatThreadHeaderPressableContent
+        avatar={avatar}
+        title={title}
+        subtitle={subtitle}
         disabled={disabled}
-        style={(pressableState) => (
-          pressableResolvers.container(pressableState, pressableContainerStyle)
-        )}
-        stateLayerStyle={(pressableState) => (
-          pressableResolvers.stateLayer(pressableState)
-        )}
-        textStyle={(pressableState) => (
-          pressableResolvers.text(pressableState)
-        )}
-        iconStyle={(pressableState) => (
-          pressableResolvers.icon(pressableState)
-        )}
-      >
-        <Avatar
-          {...resolvedAvatar}
-          size={avatarSize}
-          avatarStyle={(avatarState) => avatarTheme.container(
-            {
-              ...avatarState,
-              size: avatarSize,
-            },
-            resolvedAvatar.avatarStyle
-          )}
-          imageStyle={(avatarState) => avatarTheme.image(
-            {
-              ...avatarState,
-              size: avatarSize,
-            },
-            resolvedAvatar.imageStyle
-          )}
-          textStyle={(avatarState) => avatarTheme.text(
-            {
-              ...avatarState,
-              size: avatarSize,
-            },
-            resolvedAvatar.textStyle
-          )}
-          iconStyle={(avatarState) => avatarTheme.icon(
-            {
-              ...avatarState,
-              size: avatarSize,
-            },
-            resolvedAvatar.iconStyle
-          )}
-        />
-        <View style={resolvedContentRowStyle}>
-          {typeof title === 'string' || typeof title === 'number' ? (
-            <ThemedText style={resolvedTitleStyle} numberOfLines={1}>{title}</ThemedText>
-          ) : (
-            title
-          )}
-          {subtitle != null && (
-            typeof subtitle === 'string' || typeof subtitle === 'number' ? (
-              <ThemedText style={resolvedSubtitleStyle} numberOfLines={1}>{subtitle}</ThemedText>
-            ) : (
-              subtitle
-            )
-          )}
-        </View>
-      </ThemedPressable>
+        onPress={onPress}
+        contentRowStyle={contentRowStyle}
+        titleStyle={titleStyle}
+        subtitleStyle={subtitleStyle}
+        pressableContainerStyle={pressableContainerStyle}
+      />
       {rightActions != null && (
         <View style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 0 }}>
           {rightActions}

package/src/components/layout/Divider.tsx

@@ -13,6 +13,7 @@ import type { ColorToken } from '@helpwave/hightide-design/primitive-tokens'
 import type { DividerDirection } from '@helpwave/hightide-design/component-token-resolvers'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   DividerState,
   DividerStyle
@@ -45,10 +46,7 @@ export const Divider = forwardRef<View, DividerProps>(function Divider({
     margin,
   }), [direction, color, width, margin])
 
-  const resolvedDividerStyle = useMemo(
-    () => theme.components.divider.container(state, dividerStyle),
-    [theme, state, dividerStyle]
-  )
+  const resolvedDividerStyle = useMemoizedTheme(theme.components.divider.container, state, dividerStyle)
 
   return (
     <View

package/src/components/list/ListActionItem.tsx

@@ -1,5 +1,6 @@
 import {
-  Fragment,
+  useMemo,
+  useState,
   type ReactNode
 } from 'react'
 import {
@@ -14,6 +15,7 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ListActionItemDescriptionStyle,
   ListActionItemState,
@@ -43,13 +45,6 @@ export type ListActionItemProps = Omit<PressableProps, 'children' | 'style'> & {
   subtitleStyle?: StyleOverwrite<ListActionItemState, ListActionItemDescriptionStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const ListActionItem = ({
   title,
   subtitle,
@@ -74,15 +69,21 @@ export const ListActionItem = ({
     hitSlop: providedHitSlop,
     onLayout: providedOnLayout,
   })
+  const [isPressed, setIsPressed] = useState(false)
 
-  const resolveState = (interaction: PressableInteraction): ListActionItemState => ({
+  const resolvedState = useMemo((): ListActionItemState => ({
     color,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [color, disabled, isPressed])
+
+  const resolvedItemStyle = useMemoizedTheme(theme.components.listItem.action.container, resolvedState, itemStyle)
+  const resolvedLeadingItemContainerStyle = useMemoizedTheme(theme.components.listItem.action.leadingItemContainer, resolvedState)
+  const resolvedContentStyle = useMemoizedTheme(theme.components.listItem.action.content, resolvedState)
+  const resolvedTrailingItemContainerStyle = useMemoizedTheme(theme.components.listItem.action.trailingItemContainer, resolvedState)
+  const resolvedTitleStyle = useMemoizedTheme(theme.components.listItem.action.titleText, resolvedState, titleStyle)
+  const resolvedSubtitleStyle = useMemoizedTheme(theme.components.listItem.action.descriptionText, resolvedState, subtitleStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.listItem.action.icon, resolvedState)
 
   return (
     <Pressable
@@ -90,59 +91,50 @@ export const ListActionItem = ({
       disabled={disabled}
       hitSlop={hitSlop}
       onLayout={onLayout}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.listItem.action.container(state, itemStyle), style]
+      style={[resolvedItemStyle, style]}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-    >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedLeadingItemContainerStyle = theme.components.listItem.action.leadingItemContainer(state)
-        const resolvedContentStyle = theme.components.listItem.action.content(state)
-        const resolvedTrailingItemContainerStyle = theme.components.listItem.action.trailingItemContainer(state)
-        const resolvedTitleStyle = theme.components.listItem.action.titleText(state, titleStyle)
-        const resolvedSubtitleStyle = theme.components.listItem.action.descriptionText(state, subtitleStyle)
-        const resolvedIconStyle = theme.components.listItem.action.icon(state)
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            {leading != null && (
-              <ListItemAccessory
-                style={resolvedLeadingItemContainerStyle}
-                foreground={color?.onColor}
-                iconStyle={resolvedIconStyle}
-              >
-                {leading}
-              </ListItemAccessory>
-            )}
-            <View style={resolvedContentStyle}>
-              <ListItemTextContent
-                title={title}
-                subtitle={subtitle}
-                content={content}
-                contentOrder={contentOrder}
-                titleStyle={resolvedTitleStyle}
-                subtitleStyle={resolvedSubtitleStyle}
-              />
-            </View>
-            {trailing != null && (
-              <ListItemAccessory
-                style={resolvedTrailingItemContainerStyle}
-                foreground={color?.onColor}
-                iconStyle={resolvedIconStyle}
-              >
-                {trailing}
-              </ListItemAccessory>
-            )}
-          </Fragment>
-        )
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
       }}
+    >
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      {leading != null && (
+        <ListItemAccessory
+          style={resolvedLeadingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
+          {leading}
+        </ListItemAccessory>
+      )}
+      <View style={resolvedContentStyle}>
+        <ListItemTextContent
+          title={title}
+          subtitle={subtitle}
+          content={content}
+          contentOrder={contentOrder}
+          titleStyle={resolvedTitleStyle}
+          subtitleStyle={resolvedSubtitleStyle}
+        />
+      </View>
+      {trailing != null && (
+        <ListItemAccessory
+          style={resolvedTrailingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
+          {trailing}
+        </ListItemAccessory>
+      )}
     </Pressable>
   )
 }

package/src/components/list/ListItem.tsx

@@ -12,6 +12,7 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ListItemDescriptionStyle,
   ListItemState,
@@ -58,34 +59,13 @@ export const ListItem = ({
     color,
   }), [color])
 
-  const resolvedItemStyle = useMemo(
-    () => theme.components.listItem.default.container(state, itemStyle),
-    [theme, state, itemStyle]
-  )
-  const resolvedLeadingItemContainerStyle = useMemo(
-    () => theme.components.listItem.default.leadingItemContainer(state),
-    [theme, state]
-  )
-  const resolvedContentStyle = useMemo(
-    () => theme.components.listItem.default.content(state),
-    [theme, state]
-  )
-  const resolvedTrailingItemContainerStyle = useMemo(
-    () => theme.components.listItem.default.trailingItemContainer(state),
-    [theme, state]
-  )
-  const resolvedTitleStyle = useMemo(
-    () => theme.components.listItem.default.titleText(state, titleStyle),
-    [theme, state, titleStyle]
-  )
-  const resolvedSubtitleStyle = useMemo(
-    () => theme.components.listItem.default.descriptionText(state, subtitleStyle),
-    [theme, state, subtitleStyle]
-  )
-  const resolvedIconStyle = useMemo(
-    () => theme.components.listItem.default.icon(state),
-    [theme, state]
-  )
+  const resolvedItemStyle = useMemoizedTheme(theme.components.listItem.default.container, state, itemStyle)
+  const resolvedLeadingItemContainerStyle = useMemoizedTheme(theme.components.listItem.default.leadingItemContainer, state)
+  const resolvedContentStyle = useMemoizedTheme(theme.components.listItem.default.content, state)
+  const resolvedTrailingItemContainerStyle = useMemoizedTheme(theme.components.listItem.default.trailingItemContainer, state)
+  const resolvedTitleStyle = useMemoizedTheme(theme.components.listItem.default.titleText, state, titleStyle)
+  const resolvedSubtitleStyle = useMemoizedTheme(theme.components.listItem.default.descriptionText, state, subtitleStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.listItem.default.icon, state)
 
   return (
     <View {...props} style={[resolvedItemStyle, style]}>