diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock index 742904914..46b8030d7 100644 --- a/examples/SampleApp/ios/Podfile.lock +++ b/examples/SampleApp/ios/Podfile.lock @@ -1541,7 +1541,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: d3f49c53809116a5d38da093a8aa78bf551aed09 - DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5 + DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953 FBLazyVector: 56e0e498dbb513b96c40bac6284729ba4e62672d FBReactNativeSpec: 146c741a3f40361f6bc13a4ba284678cbedb5881 Firebase: 91fefd38712feb9186ea8996af6cbdef41473442 @@ -1556,7 +1556,7 @@ SPEC CHECKSUMS: FirebaseRemoteConfigInterop: 6efda51fb5e2f15b16585197e26eaa09574e8a4d FirebaseSessions: dbd14adac65ce996228652c1fc3a3f576bdf3ecc fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 69ef571f3de08433d766d614c73a9838a06bf7eb + glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 GoogleAppMeasurement: f3abf08495ef2cba7829f15318c373b8d9226491 GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15 diff --git a/package/src/components/ChannelPreview/ChannelAvatar.tsx b/package/src/components/ChannelPreview/ChannelAvatar.tsx index 318313659..51298324a 100644 --- a/package/src/components/ChannelPreview/ChannelAvatar.tsx +++ b/package/src/components/ChannelPreview/ChannelAvatar.tsx @@ -5,13 +5,19 @@ import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplay import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence'; import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext'; +import { useTheme } from '../../contexts/themeContext/ThemeContext'; import type { DefaultStreamChatGenerics } from '../../types/types'; import { Avatar } from '../Avatar/Avatar'; import { GroupAvatar } from '../Avatar/GroupAvatar'; export type ChannelAvatarProps< StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, -> = Pick, 'channel'>; +> = Pick, 'channel'> & { + /** + * The size of the avatar + */ + size?: number; +}; /** * This UI component displays an avatar for a particular channel. @@ -21,7 +27,15 @@ export const ChannelAvatarWithContext = < >( props: ChannelAvatarProps & Pick, ) => { - const { channel, ImageComponent } = props; + const { channel, ImageComponent, size: propSize } = props; + const { + theme: { + channelPreview: { + avatar: { size: themeSize }, + }, + }, + } = useTheme(); + const size = propSize || themeSize; const displayAvatar = useChannelPreviewDisplayAvatar(channel); const displayPresence = useChannelPreviewDisplayPresence(channel); @@ -32,7 +46,7 @@ export const ChannelAvatarWithContext = < ImageComponent={ImageComponent} images={displayAvatar.images} names={displayAvatar.names} - size={40} + size={size} /> ); } @@ -43,7 +57,7 @@ export const ChannelAvatarWithContext = < ImageComponent={ImageComponent} name={displayAvatar.name} online={displayPresence} - size={40} + size={size} /> ); }; diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts index d69b93fc2..2ff2462db 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -152,6 +152,9 @@ export type Theme = { maskFillColor?: ColorValue; }; channelPreview: { + avatar: { + size: number; + }; checkAllIcon: IconProps; checkIcon: IconProps; container: ViewStyle; @@ -875,6 +878,9 @@ export const defaultTheme: Theme = { height: 64, }, channelPreview: { + avatar: { + size: 40, + }, checkAllIcon: { height: DEFAULT_STATUS_ICON_SIZE, width: DEFAULT_STATUS_ICON_SIZE,