Customizing React Message Display

We want to be able to have “note” messages in our conversations that only internal users can see. For example our users can chat with their clients but can put internal notes in the message. I have been told this is possible with custom message types, but how do I control this display on the React Native UI.

Other examples we want to allow users to insert “apps” like to schedule an appointment inline as a message type. Can we control how these messages are displayed in the React UI. This is very much like the example here:

Or is that only when you do a completely custom UI?

I have got it down to this line and it doesn’t work:

renderMessage={(props: RenderMessageProps) =>  <>Test</>}
Type 'Element' is not assignable to type 'ComponentType<{}>'

What is it suppose to return

I have also tried this:

<Channel
  renderMessage={MyFileMessageComponent}
/>
const MyFileMessageComponent = ({ message, chainTop, chainBottom }) => {
  const {
    currentGroupChannel,
    scrollToMessage,
  } = useChannelContext();
  const globalStore = useSendbirdStateContext();
  // Use sendbirdSelectors and globalStore to implement onDeleteMessage, onUpdateMessage, onResendMessage.
  const deleteFileMessage = sendbirdSelectors.getDeleteMessage(globalStore);
  if (message.messageType === 'file') {
    return (
      <div className="custom-file-message">
        <button
          className="custom-file-message__delete-button"
          onClick={deleteFileMessage(currentGroupChannel, message)}
        />
        ... // Implement your code here.
      </div>
    )
  }
  return null;
}
1 Like

I got it working with this example above.