Skip to main content

Link Preview Input View

Overview​

The LinkPreviewInputView component displays a link preview based on Open Graph (OG) tags when a URL is detected in the input box. It provides a close button to dismiss the preview, and the component integrates with the InputBoxContext for managing the preview's visibility and state. This component is typically used in message input areas where users may include links.

LMFeedMediaPreviewScreen

UI Components​

The LinkPreviewInputView includes the following elements:

  • Link Preview Box: Displays the link preview, which is populated with metadata from the Open Graph tags.
  • Close Button: A clickable button to dismiss the link preview, either by executing a custom close callback or using the default behavior defined in the context.

Props​

PropertyTypeDescriptionOptional
handleLinkPreviewClosePropFunctionCustom callback function triggered when the close button is pressed. If not provided, the default behavior is used to hide the preview and mark it as closed.✔️

Features​

  1. Dynamic Link Preview:

    • Displays the preview of the linked content when OG tags are available and the link preview is enabled in the context state.

  2. Customizable Close Action:

    • Supports a custom callback for closing the preview. If not provided, it defaults to hiding the preview and marking it as closed in the context.

  3. State Management Integration:

    • Utilizes the InputBoxContext to manage states such as ogTagsState, showLinkPreview, and closedOnce to determine when to show or hide the preview.

Usage Example​

To Customise Callbacks​

Define a custom method like handleLinkPreviewClose and pass it to the handleLinkPreviewCloseProp of the <LinkPreviewInputView/> component.

import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  // Customize the link preview close behavior, else simply avoid passing it as a prop to the LinkPreviewInputView component
  const handleLinkPreviewClose = () => {
    console.log("Link preview closed");
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          {/* Add LinkPreviewInputView component like this*/}
          <LinkPreviewInputView
            handleLinkPreviewCloseProp={handleLinkPreviewClose}
          />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

Customise <LinkPreviewInputView /> UI Component​

  • Create a new component CustomLinkPreviewInputView, referencing the LinkPreviewInputView component.
  • Perform your UI customizations in the new component.
import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";
import CustomLinkPreviewInputView from "<path_to_custom_link_preview_input_view_component>";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          {/* Add CustomLinkPreviewInputView component like this*/}
          <CustomLinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;