Closed magiusdarrigo closed 2 months ago
Hi khushal87 is this a bug or am i misconfiguring something? Thx
following up @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.
Getting:
TypeError: Cannot read property 'quoted_message' of undefined
When pressing on the "reply" option on a message
works if I add:
if (!message) {
return null;
}
right after the useMessageContext hook. Thanks!
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:
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
```typescript jsx # N/A ```
Offline support
Environment
Click To Expand
MacOS Sonoma 14.2.1 #### `package.json`: ```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