LLChatMessageList

LLChatMessageList

LLChatMessageList component represents the chat message list. Internally we render FlatList component from react-native.

Example usage:
import React from 'react';
import {
  LLChat,
  LLChatMessageList,
  LLChatMessageListStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={(props) => (
        <LLChatMessageList {...props} styles={messageListStyle} />
      )}
    />
  );
}

const messageListStyle: Partial<LLChatMessageListStyles> = StyleSheet.create({
  rootContainer: { padding: 10 },
});

Hooks used by LLChatMessageList

LLChatMessageList Props

roomId

TypeDefault
String (Required)No Default

MessageItemComponent

TypeDefault
React Component of type LLChatMessageItemLLChatMessageItem
Example usage:
import React from 'react';
import {
  LLChat,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
} from '@livelike/react-native';

function MyMessageItemComponent(props: LLChatMessageItemProps) {
  // render your custom chat header
}

const MyMessageListComponent = (props: LLChatMessageListProps) => {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponent={MyMessageItemComponent}
    />
  );
};

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

MessageItemComponentStyles

TypeDefault
LLChatMessageItemStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItem styles.
Example usage:
import React from 'react';
import {
  LLChat,
  LLChatMessageItemStyles,
  LLChatMessageList,
  LLChatMessageListProps,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

const MyMessageListComponent = (props: LLChatMessageListProps) => {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponentStyles={messageItemStyles}
    />
  );
};

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

const messageItemStyles: Partial<LLChatMessageItemStyles> = StyleSheet.create({
  messageItemContainer: { backgroundColor: 'darkgrey', marginVertical: 20 },
  selfMessageItemContainer: { backgroundColor: 'red' },
});

MessageListEmptyComponent

Example Usage:
import React from 'react';
import {
  LLChat,
  LLChatMessageList,
  LLChatMessageListProps,
  LLMessageListEmptyComponentProps,
} from '@livelike/react-native';

function MyMessageListEmptyComponent(props: LLMessageListEmptyComponentProps) {
  // render your custom message list empty component 
}

const MyMessageListComponent = (props: LLChatMessageListProps) => {
  return (
    <LLChatMessageList
      {...props}
      MessageListEmptyComponent={MyMessageListEmptyComponent}
    />
  );
};

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

MessageListEmptyComponentStyles

TypeDefault
LLMessageListEmptyComponentStylesNo Default, if present styles props would be applied on top of internal LLMessageListEmptyComponent styles.

styles

TypeDefault
StyleSheet of type LLChatMessageListStylesNo Default, if present styles props would be applied on top of internal LLChatMessageList styles.

Styles Props

CSS ClassTypeDescription
rootContainerViewStyleMessage list container
listLoadingIndicatorViewStyleLoading indicator styles

LLChatMessageItem

LLChatMessageItem represents a single message in message list and consists of header, body and footer.

Hooks used by LLChatMessageItem

LLChatMessageItem Props

message

TypeDefault
IChatMessage (Required)No Default

MessageItemHeaderComponent

TypeDefault
React Component of type LLChatMessageItemHeaderLLChatMessageItemHeader

MessageItemBodyComponent

TypeDefault
React Component of type LLChatMessageItemBodyLLChatMessageItemBody

MessageItemFooterComponent

TypeDefault
React Component of type LLChatMessageItemFooterLLChatMessageItemFooter
Example usage for MessageItemHeaderComponent, MessageItemBodyComponent and MessageItemFooterComponent props:
import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemBodyProps,
  LLChatMessageItemFooterProps,
  LLChatMessageItemHeaderProps,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
} from '@livelike/react-native';

function MyMessageItemComponent(props: LLChatMessageItemProps) {
  return (
    <LLChatMessageItem
      {...props}
      MessageItemHeaderComponent={(props: LLChatMessageItemHeaderProps) => {
        // render your custom message item header
      }}
      MessageItemBodyComponent={(props: LLChatMessageItemBodyProps) => {
        // render your custom message item body
      }}
      MessageItemFooterComponent={(props: LLChatMessageItemFooterProps) => {
        // render your custom message item footer
      }}
    />
  );
}

const MyMessageListComponent = (props: LLChatMessageListProps) => {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponent={MyMessageItemComponent}
    />
  );
};

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

MessageItemHeaderComponentStyles

TypeDefault
LLChatMessageItemHeaderStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemHeader styles.

MessageItemBodyComponentStyles

TypeDefault
LLChatMessageItemBodyStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemBody styles.

MessageItemFooterComponentStyles

TypeDefault
LLChatMessageItemFooterStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemFooter styles.
Example usage for MessageItemHeaderComponentStyles, MessageItemBodyComponentStyles and MessageItemFooterComponentStyles props:
import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemBodyStyles,
  LLChatMessageItemFooterStyles,
  LLChatMessageItemHeaderStyles,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyMessageItemComponent(props: LLChatMessageItemProps) {
  return (
    <LLChatMessageItem
      {...props}
      MessageItemHeaderComponentStyles={headerStyle}
      MessageItemBodyComponentStyles={bodyStyle}
      MessageItemFooterComponentStyles={footerStyle}
    />
  );
}

const MyMessageListComponent = (props: LLChatMessageListProps) => {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponent={MyMessageItemComponent}
    />
  );
};

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

const headerStyle: Partial<LLChatMessageItemHeaderStyles> = StyleSheet.create({
  avatarImage: { height: 70, width: 70 },
  username: { color: 'green' },
  ownUsername: { color: 'red' },
  timestamp: { marginTop: 10, fontSize: 9, color: 'green' },
  ownTimestamp: { marginTop: 10, fontSize: 9, color: 'red' },
});
const bodyStyle: Partial<LLChatMessageItemBodyStyles> = StyleSheet.create({
  textContainer: { margin: 10 },
});
const footerStyle: Partial<LLChatMessageItemFooterStyles> = StyleSheet.create({
  footerContainer: { marginTop: 15 },
  addReactionIcon: { height: 30, width: 30 },
});

MessageItemMenuComponent

TypeDefault
React Component of type LLChatMessageMenuLLChatMessageMenu

MessageItemMenuOptionComponent

TypeDefault
React Component of type LLChatMessageMenuOptionLLChatMessageMenuOption

LLChatMessageItemHeader

LLChatMessageItemHeader component represents the header of the message item

Hooks used by LLChatMessageItemHeader

LLChatMessageItemHeader Props

message

TypeDefault
IChatUserMessage (Required)No Default

isSelfMessage

TypeDefault
boolean (Required)No Default

formatMessageTimestamp

TypeDefault
(date: string) => string.Default formatter function convertDateTime is applied.

styles

TypeDefault
StyleSheet of type LLChatMessageItemHeaderStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemHeader styles.

Styles Props

CSS ClassTypeDescription
headerContainerViewStyleRoot header container
avatarImageImageStyleAvatar image
titleContainerViewStyleContainer for username and and timestamp
usernameTextStyleUsername style
ownUsernameTextStyleOwn username style
timestampTextStyleTimestamp style
ownTimestampTextStyleOwn timestamp style

LLChatMessageItemBody

LLChatMessageItemBody component represents the body of the message item and renders the message text.

Hooks used by LLChatMessageItemBody

LLChatMessageItemBody Props

message

TypeDefault
IChatUserMessage (Required)No Default

isSelfMessage

TypeDefault
boolean (Required)No Default

ChatMessageItemBodyText

TypeDefault
React Component of type LLChatMessageItemBodyTextLLChatMessageItemBodyText

ChatMessageItemBodyTextStyles

TypeDefault
StyleSheet of type
LLChatMessageItemBodyTextStyles
No Default, if present styles props would be applied on top of internal LLChatMessageItemBodyText styles.

styles

TypeDefault
StyleSheet of type LLChatMessageItemBodyStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemBody styles.

Styles Props

CSS ClassTypeDescription
textContainerViewStyleRoot body container
selfMessageTextContainerViewStyleRoot body container for self message
textContentViewStyleText content container

LLChatMessageItemFooter

LLChatMessageItemBody represents the footer of the message item and renders the reaction picker and reaction count details as well

Hooks used by LLChatMessageItemFooter

LLChatMessageItemFooter Props

message

TypeDefault
## IChatUserMessage (Required)No Default

UserReactionsCountComponent

TypeDefault
React Component of type LLUserReactionCountsLLUserReactionCounts
Example usage
import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemFooter,
  LLChatMessageItemFooterProps,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
  LLUserReactionCountsProps,
} from '@livelike/react-native';

function MyUserReactionsCountComponent(props: LLUserReactionCountsProps) {
  // render your custom user reactions component
}

function MyMessageItemFooter(props: LLChatMessageItemFooterProps) {
  return (
    <LLChatMessageItemFooter
      {...props}
      UserReactionsCountComponent={MyUserReactionsCountComponent}
    />
  );
}

function MyMessageItemComponent(props: LLChatMessageItemProps) {
  return (
    <LLChatMessageItem
      {...props}
      MessageItemFooterComponent={MyMessageItemFooter}
    />
  );
}

function MyMessageListComponent(props: LLChatMessageListProps) {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponent={MyMessageItemComponent}
    />
  );
}

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

UserReactionsCountComponentStyles

TypeDefault
StyleSheet of type LLUserReactionCountsStylesNo Default, if present styles props would be applied on top of internal LLUserReactionCounts styles.
Example usage
import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemFooter,
  LLChatMessageItemFooterProps,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
  LLUserReactionCountsStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyMessageItemFooter(props: LLChatMessageItemFooterProps) {
  return (
    <LLChatMessageItemFooter
      {...props}
      UserReactionsCountComponentStyles={userReactionsCountStyles}
    />
  );
}

function MyMessageItemComponent(props: LLChatMessageItemProps) {
  return (
    <LLChatMessageItem
      {...props}
      MessageItemFooterComponent={MyMessageItemFooter}
    />
  );
}

function MyMessageListComponent(props: LLChatMessageListProps) {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponent={MyMessageItemComponent}
    />
  );
}

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageListComponent={MyMessageListComponent}
    />
  );
}

const userReactionsCountStyles: Partial<LLUserReactionCountsStyles> =
  StyleSheet.create({
    reactionCountsContainer: { marginHorizontal: 10 },
    moreReactionsView: { backgroundColor: 'darkgrey' },
    moreReactionsText: { fontSize: 12 },
  });

styles

TypeDefault
StyleSheet of type LLChatMessageItemFooterStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemFooter styles.

Styles Props

CSS ClassTypeDescription
footerContainerViewStyleRoot footer container
addReactionIconImageStyleAdd Reaction image

LLChatMessageItemBodyText

The LLChatMessageItemBodyTextcomponent renders the message body content. It can be a text, gif or sticker.

Hooks used by LLChatMessageItemBodyText

LLChatMessageItemBodyText Props

message

TypeDefault
IChatUserMessage (Required)No Default

isDeleted

TypeDefault
booleanNo Default

isSelfMessage

TypeDefault
booleanNo Default

styles

TypeDefault
StyleSheet of type LLChatMessageItemBodyTextStylesNo Default, if present styles props would be applied on top of internal LLChatMessageItemBodyText styles.

Styles Props

CSS ClassTypeDescription
textTextStyleMessage text styles
deletedMessageTextTextStyleMessage text for deleted message styles
selfMessageTextTextStyleMessage text for self message styles
stickerImageImageStyleMessage sticker image styles

What’s Next