How to not render Silent Messages - Chat

Silent messages are a way to avoid a message from incrementing unread counts for channels or for marking a channel as unread. 

Silent messages do still send a push notification. 

For the React and React-native SDK's an easy way to render these messages differently, or not at all, would be to check for the silent boolean on the ticket when passing the messages to the MessageList component.

Here we create a new SilentMessageComponent where the silent message can be styled to your specification. It takes the message array as a prop. 

const SilentMessageComponent = (props) => {
  return (
    // your custom silent message component here
  );
};

const App = () => (
  <Chat client={chatClient} theme={"messaging light"}>
    <ChannelList filters={filters} sort={sort} />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList
          Message={(message) =>
            message.message.silent ? (
              <SilentMessageComponent {...message} />
            ) : (
              <MessageSimple {...message} />
            )
          }
        />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

export default App;