const isEdited = isEditedMessage(message) && !isAIGenerated;
// ...
{
isEdited ? (
<Text style={[styles.editedText, editedText]}>{t("Edited")}</Text>
) : null;
}MessageEditedTimestamp
The "Edited" label shown on messages that have been edited is not a separate overridable component in v9. It is rendered inline by MessageFooter inside MessageList.
MessageFooter computes whether a message was edited with the isEditedMessage helper (and skips the label for AI-generated messages), then renders the localized Edited string next to the timestamp:
Because there is no MessageEditedTimestamp component or Channel override prop, you customize the edited label in one of the following ways.
Change the label text
The label text comes from the Edited translation key. Override it through your i18n instance:
import { Streami18n } from "stream-chat-react-native";
const streami18n = new Streami18n({
language: "en",
translationsForLanguage: {
Edited: "edited",
},
});Pass streami18n to the Chat component. See Internationalization for details.
Restyle the label
The label uses the messageItemView.footer.editedText theme key. Override it through the theme:
const theme = {
messageItemView: {
footer: {
editedText: {
fontStyle: "italic",
},
},
},
};Pass theme as the style prop to Chat.
Replace the footer
For structural changes (for example, moving the label or rendering custom content when a message is edited), override the whole MessageFooter via WithComponents:
import {
WithComponents,
isEditedMessage,
useMessageContext,
useTranslationContext,
} from "stream-chat-react-native";
import { Text } from "react-native";
const CustomMessageFooter = () => {
const { message } = useMessageContext();
const { t } = useTranslationContext();
return isEditedMessage(message) ? <Text>{t("Edited")}</Text> : null;
};
<WithComponents overrides={{ MessageFooter: CustomMessageFooter }}>
<Channel channel={channel}>
<MessageList />
<MessageComposer />
</Channel>
</WithComponents>;