Link Preview
Overview
LinkPreview
is a React component designed to display a preview of a link. It provides users with a visually engaging representation of the link's content, including elements like the title, description, and a thumbnail image. This component enhances user experience by making links more informative and clickable within chat or feed interfaces.
GitHub File:

Customisations
The LinkPreview
customisations can be done using chatBubbleStyles
as shown in the Message
component.
Usage Example
- In your app, create a
CustomChatroomScreen
file, wrap it with theChatRoom
context provider. - Now, you can pass your own custom link preview message component as prop to the
ChatRoom
context provider
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() {
const {
chatroomID,
chatroomWithUser,
currentChatroomTopic,
chatroomType,
replyChatID,
isEditable,
chatroomName,
isSecret,
refInput,
chatroomDBDetails,
chatRequestState,
setIsEditable,
handleFileUpload,
joinSecretChatroom,
onTapToUndo,
}: ChatroomContextValues = useChatroomContext();
return (
<ChatRoom
customLinkPreview={<"CUSTOM_LINKPREVIEW_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>
<MessageInputBox />
</MessageInput>
</InputBoxContextProvider>
</ChatRoom>
);
}