LLChat

LLChat is the main Chat UI component that renders the chat room UI with a chat header, message list, message composer and chat banner.

🚧

Pre-requisite

Make sure you initialise the SDK.

import { LLChat } from '@livelike/react-native'

export function MyChat(){
	return <LLChat roomId="xxx-yyy-zzz-www-vvv"/>
}

👍

Snack Expo playground

Refer LLChat snack expo playground

Hooks used by LLChat

• useChatRoom
• [useLoadStickerPacksEffect] (react-native-useloadstickerpackseffect)
• useStyles

LLChat component hierarchy:

LLChat Props

📘

Customisation Core concept

Refer customisation core concepts to understand different level of component customisation that could be achieved through below mentioned props.

roomId

This is the room Id of the chat (that you can get from the producer suite). In case of dynamic chat room, you can use getChatRooms JS API to fetch all chat rooms in an application.

userAvatarUrl

This property allows integrators to set avatars for the LLChat component by providing an avatar image URL. To set a custom avatar for an LLChat instance, use the userAvatarUrl property and provide the URL of the desired avatar image. Here's an example of how to use it:

<LLChat
  roomId="xxx-yyy-zzz-www-vvv"
  userAvatarUrl='https://example.com/avatar.png'
/>

styles

LLChatStyles stylesheet

HeaderComponent

Rendered at the top of the Chat UI. This prop could be used to pass your custom HeaderComponent

Example usage:

import { LLChat, LLChatHeaderProps } from '@livelike/react-native';

function MyChatHeader(props: LLChatHeaderProps) {
  // render your custom chat header
}

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

HeaderComponentStyles

HeaderComponent styles prop which could be used to modify styles of default rendered LLChatHeader component.

BannerComponent

BannerComponent is rendered in response to any moderation based action for eg Reporting a message, deleting a message or blocking a profile.
This prop could be used to pass your custom Banner Component.

Example usage:

import { LLChat, LLChatBannerProps } from '@livelike/react-native';

function MyChatBanner(props: LLChatBannerProps) {
  // render your custom chat banner
}

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

BannerComponentStyles

BannerComponent styles prop which could be used to modify styles of default rendered LLChatBanner component.

MessageListComponent

Rendered as the chat message list. This prop could be used to pass your custom message list component. Internally we render FlatList component from react-native. In case there's need of customising default rendered message item, use this prop to pass your custom message item component

Example usage:

import {
  LLChat,
  LLChatMessageList,
  LLChatMessageListProps,
  LLChatMessageItemProps,
} from '@livelike/react-native';

function MyListItem(props: LLChatMessageItemProps) {
  // render your custom message item prop
}
function MyList(props: LLChatMessageListProps) {
  return <LLChatMessageList {...props} />;
}

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

MessageListComponentStyles

MessageListComponent styles prop which could be used to modify styles of default rendered LLChatMessageList component.

MessageComposerComponent

Rendered at the bottom of the Chat UI. This prop could be used to pass your custom composer component. This component renders:

• TextInput - To send a text message.
• Sticker Picker - To pick and send sticker image message
• Gif Picker - To pick and send gif message.

Example usage:

import { LLChat, LLChatMessageComposerProps } from '@livelike/react-native';

function MyComposer(props: LLChatMessageComposerProps) {
  // render your custom composer component
}

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

MessageComposerComponentStyles

Message composer component styles prop which could be used to modify styles of default rendered LLChatMessageComposer component.