LLChatMessageList component represents the chat message list. Internally we render FlatList component from react-native.
TypeScript
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 },
});Type Default String (Required ) No Default
TypeScript
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}
/>
);
}Type Default LLChatMessageItemStyles No Default, if present styles props would be applied on top of internal LLChatMessageItem styles.
TypeScript
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' },
});TypeScript
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}
/>
);
}Type Default StyleSheet of type LLChatMessageListStyles No Default, if present styles props would be applied on top of internal LLChatMessageList styles.
CSS Class Type Description rootContainer ViewStyle Message list container listLoadingIndicator ViewStyle Loading indicator styles
LLChatMessageItem represents a single message in message list and consists of header, body and footer.
TypeScript
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}
/>
);
}Type Default LLChatMessageItemBodyStyles No Default, if present styles props would be applied on top of internal LLChatMessageItemBody styles.
TypeScript
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 },
});LLChatMessageItemHeader component represents the header of the message item
Type Default boolean (Required ) No Default
Type Default (date: string) => string. Default formatter function convertDateTime is applied.
Type Default StyleSheet of type LLChatMessageItemHeaderStyles No Default, if present styles props would be applied on top of internal LLChatMessageItemHeader styles.
LLChatMessageItemBody component represents the body of the message item and renders the message text.
Type Default boolean (Required ) No Default
Type Default StyleSheet of typeLLChatMessageItemBodyTextStyles No Default, if present styles props would be applied on top of internal LLChatMessageItemBodyText styles.
Type Default StyleSheet of type LLChatMessageItemBodyStyles No Default, if present styles props would be applied on top of internal LLChatMessageItemBody styles.
CSS Class Type Description textContainer ViewStyle Root body container selfMessageTextContainer ViewStyle Root body container for self message textContent ViewStyle Text content container
LLChatMessageItemBody represents the footer of the message item and renders the reaction picker and reaction count details as well
TypeScript
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}
/>
);
}Type Default StyleSheet of type LLUserReactionCountsStyles No Default, if present styles props would be applied on top of internal LLUserReactionCounts styles.
TypeScript
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 },
});Type Default StyleSheet of type LLChatMessageItemFooterStyles No Default, if present styles props would be applied on top of internal LLChatMessageItemFooter styles.
CSS Class Type Description footerContainer ViewStyle Root footer container addReactionIcon ImageStyle Add Reaction image
The LLChatMessageItemBodyTextcomponent renders the message body content. It can be a text, gif or sticker.
Type Default boolean No Default
Type Default boolean No Default
Type Default StyleSheet of type LLChatMessageItemBodyTextStyles No Default, if present styles props would be applied on top of internal LLChatMessageItemBodyText styles.
CSS Class Type Description text TextStyle Message text styles deletedMessageText TextStyle Message text for deleted message styles selfMessageText TextStyle Message text for self message styles stickerImage ImageStyle Message sticker image styles
