Skip to main content

ChatroomHeader

The ChatroomHeader component is designed to display chatroom name, number of participants and chatroom actions, etc on the top.

Customisations Available​

ChatroomHeader supports below styling customisations as of now. All of the styling customisations are optional as of now, if some styling customisation is not provided, then we pick up the default styling which we have.

Customisable props available along with their types:

ParameterTypeDescriptionOptional
chatroomNameHeaderStyle{ color?: string; fontSize?: number; fontFamily?: string; }Style for the chatroom name header✔️
chatroomSubHeaderStyle{ color?: string; fontSize?: number; fontFamily?: string; }Style for the chatroom subheader✔️
chatroomSelectedHeaderIcons{ tintColor?: string; }Style for the selected chatroom header icons✔️

Code snippet​

import { STYLES } from "@likeminds.community/chat-rn-core";

const chatroomHeaderStyles = {
  chatroomNameHeaderStyle: {
    color: "white",
    fontSize: 18,
    fontFamily: "NunitoSans-Bold",
  },
  chatroomSubHeaderStyle: {
    color: "white",
    fontSize: 13,
  },
  chatroomSelectedHeaderIcons: {
    tintColor: "white",
  },
};

if (chatroomHeaderStyles) {
  STYLES.setChatroomHeaderStyle(chatroomHeaderStyles);
}

return (
  <LMOverlayProvider
    lmChatClient={lmChatClient}
    userName={userName}
    userUniqueId={userUniqueId}
    profileImageUrl={profileImageUrl}
    lmChatInterface={lmChatInterface}
  >
    {/* Add navigation container */}
  </LMOverlayProvider>
);