fix: add size theme and prop for the ChannelAvatar component (#2881)

* fix: add size theme and prop for the ChannelAvatar component * fix: make size prop optional
GetStream · Jan 8, 2025 · 5fbd50a · 5fbd50a
1 parent abcc053
commit 5fbd50a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, '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<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
-  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
@@ -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,