[🐛] Passing a Custom MessageAvatar component shows the wrong avatar in a Message Reply 🔥🔥

[magiusdarrigo]

Issue

I need to pass a custom message avatar so i can make the component pressable. The replier's avatar gets changed to the sender's avatar when passing in a custom MessageAvatar component to the MessageAvatar prop in the Channel component.

Steps to reproduce

Steps to reproduce the behavior:

1. Using stream-chat-expo v5.21.0
2. my Channel component:

          <Chat client={streamChatClient}>
            <Channel
              MessageAvatar={CustomChatAvatar}
              channel={channel}
              <CustomMessageList />
              <MessageInput />
            </Channel>
          </Chat>

3. My CustomChatAvatar component file:

import { Pressable, Image } from "react-native";
import { MessageAvatar, useMessageContext } from "stream-chat-expo";

const CustomChatAvatar = () => {
  const { message } = useMessageContext();

  const usedImage = message?.quoted_message
    ? message.quoted_message?.user?.image
    : message.user?.image;

  return (
    <Pressable onPress={() => console.log("fired")}>
      <MessageAvatar
        ImageComponent={(props) => (
          <Image {...props} source={{ uri: usedImage }} />
        )}
      />
    </Pressable>
  );
};

export default CustomChatAvatar;

4. Now set up to 2 users in the same channel and have user A reply to a message from user B
5. You will see that user A's avatar becomes user B's for that specific replied message.

Expected behavior

The expected behavior is for user A's avatar to remain its own. See below ss without the CustomChatAvatar being passed in:

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• [ ] I have enabled offline support.
• [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

MacOS Sonoma 14.2.1

package.json:

{
  "name": "village",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/react-native-action-sheet": "^4.0.1",
    "@expo/vector-icons": "^14.0.0",
    "@notifee/react-native": "^7.8.0",
    "@react-native-community/netinfo": "11.1.0",
    "@react-native-firebase/app": "^18.7.3",
    "@react-native-firebase/messaging": "^18.7.3",
    "@react-native-picker/picker": "2.6.1",
    "@react-navigation/native": "^6.0.2",
    "@sentry/react-native": "5.19.1",
    "@tanstack/react-query": "^4.29.5",
    "expo": "^50.0.14",
    "expo-application": "~5.8.3",
    "expo-av": "~13.10.5",
    "expo-build-properties": "~0.11.1",
    "expo-camera": "~14.1.1",
    "expo-clipboard": "~5.0.1",
    "expo-constants": "~15.4.5",
    "expo-dev-client": "~3.3.11",
    "expo-device": "~5.9.3",
    "expo-document-picker": "~11.10.1",
    "expo-file-system": "~16.0.8",
    "expo-font": "~11.10.3",
    "expo-haptics": "~12.8.1",
    "expo-image": "~1.10.6",
    "expo-image-manipulator": "~11.8.0",
    "expo-image-picker": "~14.7.1",
    "expo-linking": "~6.2.2",
    "expo-media-library": "~15.9.1",
    "expo-router": "~3.4.8",
    "expo-secure-store": "~12.8.1",
    "expo-sharing": "~11.10.0",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-updates": "~0.24.12",
    "expo-web-browser": "~12.8.2",
    "lodash": "^4.17.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.6",
    "react-native-animatable": "^1.4.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-google-places-autocomplete": "^2.5.6",
    "react-native-hyperlink": "^0.0.22",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-web": "~0.19.6",
    "sentry-expo": "~7.2.0",
    "stream-chat-expo": "^5.21.0",
    "vexo-analytics": "^1.3.13"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/lodash": "^4.14.202",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.4",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.3.0"
  },
  "overrides": {
    "react-refresh": "~0.14.0"
  },
  "resolutions": {
    "react-refresh": "~0.14.0"
  },
  "private": true
}

react-native info output:

I don't have this CLI command. I am using expo v50.0.14

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • [ ] iOS
  • [ ] Android
  • [x] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • node_modules/stream-chat-react-native-core v5.21.0
  • node_modules/stream-chat-expo v5.21.0
• Device/Emulator info:
  • Shows on all iOS emulators I have tested (latest version being iPhone 15 Pro iOS 17.2)

Additional context

Screenshots

Click To Expand

---

[magiusdarrigo]

Hi khushal87 is this a bug or am i misconfiguring something? Thx

[magiusdarrigo]

following up @khushal87

[khushal87]

Hey @magiusdarrigo, please do the following in your code:

import {
  MessageAvatar,
  MessageAvatarProps,
  MessageType,
  Reply,
  ReplyProps,
  useMessageContext,
} from 'stream-chat-react-native';

const CustomMessageAvatar = (props: MessageAvatarProps) => {
  return (
    <Pressable onPress={() => console.log('Normal Avatar')}>
      <MessageAvatar {...props} />
    </Pressable>
  );
};

const CustomMessageReplyAvatar = (props: MessageAvatarProps) => {
  const { message } = useMessageContext();
  return (
    <Pressable onPress={() => console.log('Quoted Avatar')}>
      <MessageAvatar
        {...props}
        size={50}
        message={message.quoted_message as MessageType<StreamChatGenerics>}
      />
    </Pressable>
  );
};

const CustomReplies = (props: ReplyProps) => {
  return <Reply {...props} MessageAvatar={CustomMessageReplyAvatar} />;
};

Then pass the CustomMessageAvatar and CustomReplies to the MessageAvatar and the Reply prop of the Channel component and that should fix your problem.

[magiusdarrigo]

Getting: TypeError: Cannot read property 'quoted_message' of undefined

When pressing on the "reply" option on a message

[magiusdarrigo]

works if I add:

  if (!message) {
    return null;
  }

right after the useMessageContext hook. Thanks!