LLChatMessageComposer

LLChatMessageComposer is used to compose a message which could be a text message, image message in the form of stickers of gifs. As part of LLChat component this component is rendered at the bottom of the UI.
LLChatMessageComposer component in turn renders:

  • TextInput - To send a text message.
  • Sticker Picker - To pick and send sticker image. Sticker picker component is shown when clicked on sticker picker icon.
  • Gif Picker - To pick and send gif. Gif picker component is shown when clicked on gif picker icon.
2152
Custom implementation for GifPickerComponent, StickerPickerComponent and SendButtonComponent example:
import React from 'react';
import {
  LLChat,
  LLChatMessageComposer,
  LLChatMessageComposerProps,
  LLGifPickerProps,
  LLStickerPickerProps,
} from '@livelike/react-native';
import { LLComposerSendButtonProps } from '../react-native/src/components/LLChatMessageComposer/LLComposerSendButton';

function MySendButton(props: LLComposerSendButtonProps) {
  // render your custom send button
}

function MyStickerPicker(props: LLStickerPickerProps) {
  // render your custom sticker picker
}

function MyGifPicker(props: LLGifPickerProps) {
  // render your custom gif picker
}

function MyComposer(props: LLChatMessageComposerProps) {
  return (
    <LLChatMessageComposer
      {...props}
      GifPickerComponent={MyGifPicker}
      StickerPickerComponent={MyStickerPicker}
      SendButtonComponent={MySendButton}
    />
  );
}

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      MessageComposerComponent={MyComposer}
    />
  );
}
Customise styles for Stock LLGifPicker, LLStickerPicker and LLComposerSendButton components example:
import React from 'react';
import {
  LLChat,
  LLChatMessageComposer,
  LLChatMessageComposerProps,
  LLComposerSendButtonStyles,
  LLStickerPickerStyles,
  LLGifPickerStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyComposer(props: LLChatMessageComposerProps) {
  return (
    <LLChatMessageComposer
      {...props}
      GifPickerComponentStyles={gifPickerStyles}
      StickerPickerComponentStyles={stickerPickerStyles}
      SendButtonComponentStyles={sendButtonStyles}
    />
  );
}

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

const sendButtonStyles: Partial<LLComposerSendButtonStyles> = StyleSheet.create(
  {
    buttonContainer: { backgroundColor: 'red' },
    icon: { height: 12, width: 12 },
  }
);
const stickerPickerStyles: Partial<LLStickerPickerStyles> = StyleSheet.create({
  stickerPackIcon: { height: 15, width: 15 },
  stickerImage: { height: 100, width: 100 },
  pickerCloseIcon: { marginLeft: 3 },
});
const gifPickerStyles: Partial<LLGifPickerStyles> = StyleSheet.create({
  gifImage: { height: 100, width: 100 },
  gifImageContainer: { margin: 10 },
});

Hooks used by LLChatMessageComposer

LLChatMessageComposer Props

roomId

Type

Default

String (Required)

No Default

GifPickerComponent

Type

Default

React Component of type LLGifPicker

LLGifPicker

GifPickerComponentStyles

Type

Default

LLGifPickerStyles

No Default, if present styles props would be applied on top of internal LLGifPicker styles.

StickerPickerComponent

Type

Default

React Component of type LLStickerPicker

LLStickerPicker

StickerPickerComponentStyles

Type

Default

LLStickerPickerStyles

No Default, if present styles props would be applied on top of internal LLStickerPicker styles.

SendButtonComponent

Type

Default

React Component of type LLComposerSendButton

LLComposerSendButton

SendButtonComponentStyles

Type

Default

LLComposerSendButtonStyles

No Default, if present styles props would be applied on top of internal LLComposerSendButton styles.

styles

Type

Default

StyleSheet of type LLChatMessageComposerStyles

No Default, if present styles props would be applied on top of internal LLChatMessageComposer styles.

Styles Props

CSS Class

Type

Description

composerContainer

ViewStyle

Root composer container

composerInput

ViewStyle

TextInput container

composerIcon

ImageStyle

Composer icon for gif and sticker pickers

LLComposerSendButton

LLComposerSendButton renders the "Send Message Button" in the LLChatMessageComposer component

Hooks used by LLComposerSendButton

LLComposerSendButton Props

isSendingMessage

Type

Default

boolean (Required)

false

disabled

Type

Default

boolean

false if not present

onPress

Type

Function of type: () => void

styles

Type

Default

StyleSheet of type LLComposerSendButtonStyles

No Default, if present styles props would be applied on top of internal LLComposerSendButton styles.

Styles Props

CSS Class

Type

Description

buttonContainer

ViewStyle

Send message button container

icon

ImageStyle

Button icon styles


What’s Next