Skip to main content

Chatroom Screen

Overview

The ChatRoom screen serves as the main interface for users to engage in conversations within a specific chatroom in the LikeMinds chat application. It allows users to send and receive messages, view chatroom details, and interact with various features such as polls, media, and reactions, providing a seamless chat experience.

GitHub File:

LMFeedMediaPreviewScreen

UI Components

The Chatroom screen serves as a parent component, allowing you to incorporate as many child components as necessary, including your own custom components. Here are a few components that can be utilized to enhance the Chatroom.

Props

Interaction Callbacks

| Property | Type | Description | Optional | | setChatroomTopic | () => void | Callback to set chatroom topic | ✔ | | leaveChatroom | () => void | Callback to leave chatroom | ✔ | | leaveSecretChatroom | () => void | Callback to leave secret chatroom | ✔ | | joinChatroom | () => void | Callback to join chatroom | ✔ | | muteNotifications | () => void | Callback to mute notifications | ✔ | | unmuteNotifications | () => void | Callback to unmute notifications | ✔ | | onApprove | () => void | Callback when approving an action | ✔ | | onReject | () => void | Callback when rejecting an action | ✔ | | blockMember | () => void | Callback to block a member | ✔ | | unblockMember | () => void | Callback to unblock a member | ✔ | | handleGallery | () => void | Callback to handle gallery action | ✔ | | handleCamera | () => void | Callback to handle camera action | ✔ | | handleDoc | () => void | Callback to handle document action | ✔ | | onEdit | () => void | Callback to handle edit action | ✔ |

For information about more callbacks, click here

Customization Props

PropertyTypeDescriptionOptional
childrenReactNodeChild components
customReplyBox(item: any, chatroomName: string) => React.JSX.ElementCustom reply box component
customMessageHeaderReactNodeCustom message header component
customMessageFooterReactNodeCustom message footer component
customVideoImageAttachmentConversationReactNodeCustom video/image attachment conversation
customPdfAttachmentConversationReactNodeCustom PDF attachment conversation
customVoiceNoteAttachmentConversationReactNodeCustom voice note attachment conversation
customGifAttachmentConversationReactNodeCustom GIF attachment conversation
customMessageNotSupportedConversationReactNodeCustom message not supported conversation
customDeletedMessageReactNodeCustom deleted message component
customReplyConversationsReactNodeCustom reply conversations component
customPollConversationViewReactNodeCustom poll conversation view
customLinkPreviewReactNodeCustom link preview component
customStateMessageReactNodeCustom state message component
customReactionListReactNodeCustom reaction list
customRetryButtonReactNodeCustom retry button
showViewParticipantsbooleanShow "View Participants" option
showShareChatroombooleanShow "Share Chatroom" option
showMuteNotificationsbooleanShow "Mute Notifications" option
showLeaveChatroombooleanShow "Leave Chatroom" option
showJoinChatroombooleanShow "Join Chatroom" option
showUnmuteNotificationsbooleanShow "Unmute Notifications" option
showBlockMemberbooleanShow "Block Member" option
showUnBlockMemberbooleanShow "Unblock Member" option
showViewProfilebooleanShow "View Profile" option
showSecretLeaveChatroombooleanShow "Secret Leave Chatroom" option

For information about more props, click here

Usage Example

Step 1: Create Custom Screen and Wrapper

  • In your app, create a CustomChatroomScreen file, wrap it with the ChatRoom context provider and pass your customizations as props.
  • Now, you can create styles based on the component being utilizied, for example, for chatbubble create chatBubbleStyles for customisation and call the setChatBubbleStyle to set it, or inputBoxStyle for input box customisation and call setInputBoxStyle to set the customisation.
import {
ChatRoom,
ChatroomHeader,
MessageList,
MessageInput,
useChatroomContext,
useMessageListContext,

ChatroomTopic,
STYLES
} from "@likeminds.community/chat-rn-core";
import {InputBoxContextProvider} from '@likeminds.community/chat-rn-core/ChatSX/context/InputBoxContext';
import {ChatroomContextValues} from '@likeminds.community/chat-rn-core/ChatSX/context/ChatroomContext';
import MessageInputBox from "@likeminds.community/chat-rn-core/ChatSX/components/InputBox";

export function CustomChatroomScreen() {
// Customize functionality props
const showViewParticipants = true;
const showShareChatroom = true;
const showChatroomIcon = true;
const customChatroomUserTitle = "Moderator";

const {
chatroomID,
chatroomWithUser,
currentChatroomTopic,
chatroomType,
replyChatID,
isEditable,
chatroomName,
isSecret,
refInput,
chatroomDBDetails,
chatRequestState,
setIsEditable,
handleFileUpload,
joinSecretChatroom,
onTapToUndo,
}: ChatroomContextValues = useChatroomContext();
const { scrollToBottom } = useMessageListContext();

// customize interaction callbacks
const customJoinSecretChatroom = async () => {
console.log("before custom join secret chatroom");
const response = await joinSecretChatroom();
console.log("response after custom join secret chatroom", response);
};

const inputBoxStyles = {
placeholderTextColor: "#aaa",
selectionColor: "#3CA874",
};

// custom styling for input box
if (inputBoxStyles) {
STYLES.setInputBoxStyle(inputBoxStyles);
}

const chatBubbleStyles = {
borderRadius: 10,
sentMessageBackgroundColor: 'blue',
};

// custom styling for message list
if (chatBubbleStyles) {
STYLES.setChatBubbleStyle(chatBubbleStyles);
}

return (
<ChatRoom
showViewParticipants={showViewParticipants}
showShareChatroom={showShareChatroom}
customMessageFooter={<"CUSTOM_FOOTER_COMPONENT">}
customMessageHeader={<"CUSTOM_HEADER_COMPONENT">}
>

{/* ChatroomHeader */}
<ChatroomHeader />

{/* ChatroomTopic */}
<ChatroomTopic />

{/* MessageList */}
<MessageList />

{/* Input Box Flow */}
<InputBoxContextProvider
chatroomName={chatroomName}
chatroomWithUser={chatroomWithUser}
replyChatID={replyChatID}
chatroomID={chatroomID}
isUploadScreen={false}
myRef={refInput}
handleFileUpload={handleFileUpload}
isEditable={isEditable}
setIsEditable={(value: boolean) => {
setIsEditable(value);
}}
isSecret={isSecret}
chatroomType={chatroomType}
currentChatroomTopic={currentChatroomTopic}
isPrivateMember={chatroomDBDetails.isPrivateMember}
chatRequestState={chatRequestState}>
<MessageInput joinSecretChatroomProp={customJoinSecretChatroom}>
<MessageInputBox />
</MessageInput>
</InputBoxContextProvider>
</ChatRoom>
);
}

Step 2: Wrap your screen with Context Provider

import { Chat } from "@likeminds.community/chat-rn-core";
import { CustomChatroomScreen } from "<<path_to_ChatroomScreen.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.
App.tsx
import { ScreenName, LMOverlayProvider, Themes } from "@likeminds.community/feed-rn-core";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { ChatroomScreenWrapper } from "<<path_to_ChatroomScreenWrapper.tsx>>";

export const App = () => {
const Stack = createNativeStackNavigator();
return (
<LMOverlayProvider
myClient={myClient} // pass in the LMChatClient 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
theme={<"SDK_THEME">} // pass the sdk theme based on the Themes enum
>
<NavigationContainer ref={navigationRef} independent={true}>
<Stack.Navigator screenOptions={{ headerShown: true }}>
<Stack.Screen name={ScreenName.Chatroom} component={ChatroomScreenWrapper} />
</Stack.Navigator>
</NavigationContainer>
</LMOverlayProvider>
);
};