React Native UIKit renderMessage custom message

Sendbird Chat UIKit
1

My app has few different types of customMessage that we render ourselves instead of having UIKit render them. I’m not sure if this should be supported, but on web this is how we “fool” the renderMessage function to only apply custom UI when message has customType, otherwise use UIKIt default message rendering:

const renderCustomMessage = useCallback(
    ({ message }: any): any => {
      if (message.customType) {
        return <CustomChatMessage message={message} user={user} />;
      } else {
        // Because we're using Typescript, we need to return something from this function,
        // but we want Sendbird UIKit to render normal text messages, so we trick Typescript with this return
        return undefined as unknown as any;
      }
    },
    [user]
  );

     <Channel
        channelUrl={channelId}
        renderMessage={renderCustomMessage}
      />

Now I’m implementing Sendbird in React Native UIKit and I want to do something similar, but I have not been able to solve it yet.

Is there another way around this?

I’m using version @sendbird/uikit-react-native: 1.1.2

2

Hi @hronnro , Welcome to Sendbird Community!

You might utilize the renderMessage property in GroupChannelFragment.

Example code:

const GroupChannelScreen = () => {

  return (<GroupChannelFragment
     renderMessage={(props) => {
        return <MyMessageComponent {...props} />
     }}
  />)
}
3

Hey @Miyoung_Han thanks for replying!

The thing is that I only want to customise the UI when the message is of custom type, but for regular text messages I want Sendbird UIKit to render the message.

Let me show you an example:

image
image562×1208 84.7 KB

I only want to use my custom UI for this “Christopher Sturgeon” card as you see on the screenshot. That card is a message with customType = “roll”.

So what I’d want to do in theory would be (like you suggested) to use the renderMessage like so:

return (<GroupChannelFragment
     renderMessage={(props) => {
        return props.message.customType === "roll" ?
        <MyMessageComponent {...props} /> : ?????
     }}
  />)

But I don’t know what to return where I put the ????? to get the default UIKit message.
Is that possible?

4

Hi @hronnro, you can use the default message component using MessageRenderer. check here :slight_smile:

5

Ah perfect! Thank you, it works :blush:

1 Like