Chatroom Header

Overview

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

GitHub File:

• ChatroomHeader

Props

Interaction Callbacks

• navigateToGroupDetails: Its trigerred on pressing of the chatroom name, and it returns the chatroom details.

Customisation Props

Property	Type	Description
showChatroomIcon	boolean	Specifies whether to display the chatroom icon
customChatroomUserTitle	string	Custom title for the chatroom user
showThreeDotsOnHeader	boolean	Indicates whether to show three dots on the header
showThreeDotsOnSelectedHeader	boolean	Indicates whether to show three dots when selected
gradientStyling	any	Custom gradient styling for the header
backIconPath	string	Path for the custom back icon
groupIcon	any	Custom group icon
hideSearchIcon	boolean	Indicates whether to hide the search icon

Styling Customizations

The below styles can be applied through the setChatroomHeaderStyle method on STYLES class

Property	Type	Description
chatroomNameHeaderStyle	ChatroomNameHeaderStyle	Custom style for the chatroom name header
chatroomSubHeaderStyle	ChatroomSubHeaderStyle	Custom style for the chatroom subheader
chatroomSelectedHeaderIcons	ChatroomSelectedHeaderIcons	Custom style for the selected header icons

Chatroom Name Header Style

Property	Type	Description
color	string	Text color of the chatroom name
fontSize	number	Font size of the chatroom name
fontFamily	string	Font family of the chatroom name

Chatroom SubHeader Style

Property	Type	Description
color	string	Text color of the chatroom subheader
fontSize	number	Font size of the chatroom subheader
fontFamily	string	Font family of the chatroom subheader

Chatroom Selected Header Icons

Property	Type	Description
tintColor	string	Tint color of the selected icons

Usage Example

info

The ChatroomHeader screen can be used by wrapping it inside the ChatRoom screen, and the callbacks object will be passed as a prop to LMOverlayProvider.

Step 1: Create a Custom Chatroom Screen

• In your app, create a CustomChatroomScreen file which will serve as your custom chatroom screen. Wrap it with ChatRoom context provider
• Create your own UI styling and call the setChatroomHeaderStyle method on the STYLES class.

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

const CustomChatroomScreen = () => {

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

  // chatroom header customisation
  if (chatroomHeaderStyles) {
    STYLES.setChatroomHeaderStyle(chatroomHeaderStyles);
  }

  return (
    <ChatRoom>
      <ChatroomHeader
        showChatroomIcon={true}
        customChatroomUserTitle={true}
        showThreeDotsOnHeader={true}
        showThreeDotsOnSelectedHeader={true}
        backIconPath={""} // path to your customised back icon
        groupIcon={""} // path to your customised group icon
        hideSearchIcon={false}
      />
      {/* Other chat components */}
    </ChatRoom>
  );
};

export default CustomChatroomScreen;

Step 2: Wrap the Screen with Chat Context Provider

• The Chat Wrapper provides access to the chatroom context

import { Chat } from "@likeminds.community/chat-rn-core";
import { CustomChatroomScreen } from "<<path_to_CustomChatroomScreen.tsx>>";

function ChatroomScreenWrapper() {
  return (
    <Chat>
      <CustomChatroomScreen />
    </Chat>
  );
}

export default ChatroomScreenWrapper;

Step 3: Add the Custom Screen in App.tsx

• In your App.tsx, create a Stack.Navigator in the NavigationContainer wrapped by LMOverlayProvider.
• Add ChatroomScreenWrapper as a Stack screen in your NavigationContainer.

import {
  CHATROOM,
  LMOverlayProvider,
  STYLES,
  NavigateToGroupDetailsParams,
} from "@likeminds.community/feed-rn-core";
import { ChatroomScreenWrapper } from "<<path_to_ChatroomScreenWrapper.tsx>>";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const App = () => {
  const Stack = createNativeStackNavigator();
  // custom callback class implementing carouselCallBackClass
  class CustomCallbacks implements LMCarouselScreenCallbacks {
    navigateToGroupDetails(params: NavigateToGroupDetailsParams) {
      // Override navigateToGroupDetails with custom logic
    }
  }

  const lmFeedInterface = new CustomCallbacks();
  return (
    <LMOverlayProvider
      myClient={myClient} // pass in the LMFeedClient created
      apiKey={apiKey} // pass in the API Key generated
      userName={userName} // pass in the logged-in user's name
      userUniqueId={userUniqueID} // pass in the logged-in user's uuid
      lmFeedInterface={lmFeedInterface} // object having customised callbacks
    >
      <NavigationContainer ref={navigationRef} independent={true}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen
            name={CHATROOM}
            component={ChatroomScreenWrapper}
            initialParams={{
              chatroomID: chatroomId,
              announcementRoomId: announcementRoomId,
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
};