fix: channel avatar logic and usage

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -15,9 +15,7 @@ import {
   AITypingIndicatorView,
   useTranslationContext,
   MessageActionsParams,
-  UserAvatar,
   ChannelAvatar,
-  useChannelPreviewDisplayPresence,
 } from 'stream-chat-react-native';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -54,7 +52,6 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
   const { closePicker } = useAttachmentPickerContext();
   const membersStatus = useChannelMembersStatus(channel);
   const displayName = useChannelPreviewDisplayName(channel, 30);
-  const online = useChannelPreviewDisplayPresence(channel);
   const { isOnline } = useChatContext();
   const { chatClient } = useAppContext();
   const navigation = useNavigation<ChannelScreenNavigationProp>();
@@ -94,10 +91,6 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
     return null;
   }
 
-  const members = channel.state.members;
-  const membersValues = Object.values(members);
-  const otherMembers = membersValues.filter((member) => member.user?.id !== chatClient?.user?.id);
-
   return (
     <ScreenHeader
       onBack={onBackPress}
@@ -109,16 +102,7 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
             opacity: pressed ? 0.5 : 1,
           })}
         >
-          {otherMembers.length === 1 ? (
-            <UserAvatar
-              size='lg'
-              user={otherMembers[0].user}
-              showBorder={otherMembers[0].user?.image ? true : false}
-              showOnlineIndicator={online}
-            />
-          ) : (
-            <ChannelAvatar channel={channel} size='lg' />
-          )}
+          <ChannelAvatar channel={channel} size='lg' />
         </Pressable>
       )}
       showUnreadCountBadge

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import type { ChannelPreviewProps } from './ChannelPreview';
-import { ChannelPreviewAvatar } from './ChannelPreviewAvatar';
 import { ChannelPreviewMessage } from './ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewStatus } from './ChannelPreviewStatus';
@@ -18,6 +17,7 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
+import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 
 const styles = StyleSheet.create({
   container: {
@@ -104,7 +104,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
     maxUnreadCount,
     muted,
     onSelect,
-    PreviewAvatar = ChannelPreviewAvatar,
+    PreviewAvatar = ChannelAvatar,
     PreviewMessage = ChannelPreviewMessage,
     PreviewMutedStatus = ChannelPreviewMutedStatus,
     PreviewStatus = ChannelPreviewStatus,
@@ -143,7 +143,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
       ]}
       testID='channel-preview-button'
     >
-      <PreviewAvatar channel={channel} />
+      <PreviewAvatar channel={channel} size='lg' />
       <View
         style={[styles.contentContainer, contentContainer]}
         testID={`channel-preview-content-${channel.id}`}

package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -58,7 +58,7 @@ describe('ChannelPreviewMessenger', () => {
 
   it('should call setActiveChannel on click', async () => {
     const onSelect = jest.fn();
-    await initializeChannel(generateChannelResponse());
+    await initializeChannel(generateChannelResponse({}));
 
     render(
       getComponent({

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -15,7 +15,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
   <View
     style={
       {
-        "padding": 2,
+        "padding": 4,
       }
     }
     testID="user-avatar"
@@ -34,7 +34,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
             "width": 24,
           },
           {
-            "backgroundColor": undefined,
+            "backgroundColor": "#D7F7FB",
           },
           {
             "borderColor": "hsla(0, 0%, 0%, 0.1)",

package/src/components/Poll/components/PollOption.tsx

@@ -119,9 +119,9 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
         <VoteButton option={option} />
         <Text style={[styles.text, { color: black }, text]}>{option.text}</Text>
         <View style={[styles.votesContainer, votesContainer]}>
-          {relevantVotes.map((vote: PollVote) => (
-            <UserAvatar user={vote.user} size='xs' showBorder key={vote.id} />
-          ))}
+          {relevantVotes.map((vote: PollVote) =>
+            vote.user ? <UserAvatar user={vote.user} size='xs' showBorder key={vote.id} /> : null,
+          )}
           <Text style={{ color: black, marginLeft: 2 }}>{voteCountsByOption[option.id] || 0}</Text>
         </View>
       </View>

package/src/components/Poll/components/PollResults/PollVote.tsx

@@ -43,7 +43,7 @@ export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
   return (
     <View style={[styles.voteContainer, container]}>
       <View style={styles.userContainer}>
-        {!isAnonymous ? <UserAvatar user={vote.user} size='xs' showBorder /> : null}
+        {!isAnonymous && vote.user ? <UserAvatar user={vote.user} size='xs' showBorder /> : null}
         <Text style={[styles.voteUserName, { color: black }, userName]}>
           {isAnonymous ? t('Anonymous') : (vote.user?.name ?? vote.user?.id)}
         </Text>

package/src/components/Reply/Reply.tsx

@@ -17,6 +17,7 @@ import { NewFile } from '../../icons/NewFile';
 import { NewLink } from '../../icons/NewLink';
 import { NewMapPin } from '../../icons/NewMapPin';
 import { NewMic } from '../../icons/NewMic';
+import { NewPencil } from '../../icons/NewPencil';
 import { NewPhoto } from '../../icons/NewPhoto';
 import { NewPoll } from '../../icons/NewPoll';
 import { NewVideo } from '../../icons/NewVideo';
@@ -318,9 +319,13 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
             leftContainer,
           ]}
         >
-          <Text numberOfLines={1} style={[styles.title, titleStyle]}>
-            {title}
-          </Text>
+          <View style={styles.titleContainer}>
+            {mode === 'edit' ? <NewPencil height={12} width={12} stroke={'#384047'} /> : null}
+            <Text numberOfLines={1} style={[styles.title, titleStyle]}>
+              {title}
+            </Text>
+          </View>
+
           <View style={[styles.subtitleContainer, subtitleContainer]}>
             <SubtitleIcon message={quotedMessage} />
             <SubtitleText message={quotedMessage} />
@@ -464,6 +469,11 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingTop: 4,
   },
+  titleContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 4,
+  },
   title: {
     color: '#384047',
     fontSize: 12,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -299,7 +299,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             <View
                               style={
                                 {
-                                  "padding": 2,
+                                  "padding": 4,
                                 }
                               }
                               testID="user-avatar"
@@ -318,7 +318,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 24,
                                     },
                                     {
-                                      "backgroundColor": undefined,
+                                      "backgroundColor": "#FFF1C2",
                                     },
                                     {
                                       "borderColor": "hsla(0, 0%, 0%, 0.1)",
@@ -680,7 +680,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             <View
                               style={
                                 {
-                                  "padding": 2,
+                                  "padding": 4,
                                 }
                               }
                               testID="user-avatar"
@@ -699,7 +699,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 24,
                                     },
                                     {
-                                      "backgroundColor": undefined,
+                                      "backgroundColor": "#C9FCE7",
                                     },
                                     {
                                       "borderColor": "hsla(0, 0%, 0%, 0.1)",
@@ -1099,7 +1099,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             <View
                               style={
                                 {
-                                  "padding": 2,
+                                  "padding": 4,
                                 }
                               }
                               testID="user-avatar"
@@ -1118,7 +1118,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 24,
                                     },
                                     {
-                                      "backgroundColor": undefined,
+                                      "backgroundColor": "#FFF1C2",
                                     },
                                     {
                                       "borderColor": "hsla(0, 0%, 0%, 0.1)",
@@ -1484,7 +1484,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             <View
                               style={
                                 {
-                                  "padding": 2,
+                                  "padding": 4,
                                 }
                               }
                               testID="user-avatar"
@@ -1503,7 +1503,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 24,
                                     },
                                     {
-                                      "backgroundColor": undefined,
+                                      "backgroundColor": "#C9FCE7",
                                     },
                                     {
                                       "borderColor": "hsla(0, 0%, 0%, 0.1)",

package/src/components/ui/Avatar/Avatar.tsx

@@ -1,37 +1,27 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
+import { avatarSizes } from './constants';
+
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 export type AvatarProps = {
   size: 'xs' | 'sm' | 'md' | 'lg';
   imageUrl?: string;
   placeholder?: React.ReactNode;
   showBorder?: boolean;
-};
-
-const sizes = {
-  lg: {
-    height: 40,
-    width: 40,
-  },
-  md: {
-    height: 32,
-    width: 32,
-  },
-  sm: {
-    height: 24,
-    width: 24,
-  },
-  xs: {
-    height: 20,
-    width: 20,
-  },
+  backgroundColor?: string;
 };
 
 export const Avatar = (props: AvatarProps) => {
   const [error, setError] = useState(false);
-  const { size, imageUrl, placeholder, showBorder } = props;
+  const {
+    theme: {
+      colors: { avatarPalette },
+    },
+  } = useTheme();
+  const defaultAvatarBg = avatarPalette?.[0].bg;
+  const { backgroundColor = defaultAvatarBg, size, imageUrl, placeholder, showBorder } = props;
   const styles = useStyles();
 
   const onHandleError = useCallback(() => {
@@ -42,8 +32,8 @@ export const Avatar = (props: AvatarProps) => {
     <View
       style={[
         styles.container,
-        sizes[size],
-        { backgroundColor: imageUrl && !error ? undefined : '#D2E3FF' },
+        avatarSizes[size],
+        { backgroundColor },
         showBorder ? styles.border : undefined,
       ]}
       testID='avatar-image'
@@ -52,7 +42,7 @@ export const Avatar = (props: AvatarProps) => {
         <Image
           onError={onHandleError}
           source={{ uri: imageUrl }}
-          style={[styles.image, sizes[size]]}
+          style={[styles.image, avatarSizes[size]]}
         />
       ) : (
         placeholder