LLChatBanner

LLChatBanner is rendered in response to any moderation based action for eg Reporting a message, deleting a message or blocking a profile. The banner items are stacked on bottom of each other where each top most item auto hide after a configurable timeout.

2730
Example usage:
import React from 'react';
import {
  LLChat,
  LLChatBanner,
  LLChatBannerStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

export function MyApp() {
  return (
    <LLChat
      roomId="<Your chat room id>"
      BannerComponent={() => (
        <LLChatBanner bannerTimeout={2000} styles={bannerStyle} />
      )}
    />
  );
}

const bannerStyle: Partial<LLChatBannerStyles> = StyleSheet.create({
  bannerContainer: { top: 10, left: 10 },
});

Hooks used by LLChatBanner

LLChatBanner Props

bannerAutoHideTimeout

Auto hides top most banner item based on given timeout (in ms).

TypeDefault
Number4000 ms

BannerItemComponent

TypeDefault
React Component of type LLChatBannerItemLLChatBannerItem
Example usage:
import React from 'react';
import {
  LLChat,
  LLChatBanner,
  LLChatBannerItemProps,
} from '@livelike/react-native';

function MyBannerItem(props: LLChatBannerItemProps) {
  // render your custom chat header
}

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

BannerItemComponentStyles

TypeDefault
LLChatBannerItemStylesNo Default, if present styles props would be applied on top of internal LLChatBannerItem styles.
Example usage
import React from 'react';
import {
  LLChat,
  LLChatBanner,
  LLChatBannerItemStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

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

const bannerItemStyle: Partial<LLChatBannerItemStyles> = StyleSheet.create({
  bannerText: { fontSize: 15 },
  itemContainer: { height: 20 },
});

styles

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

styles prop details

CSS ClassTypeDescription
bannerContainerViewStyleBanner container

LLChatBannerItem

LLChatBannerItem component is rendered by the LLChatBanner component and represents a single chat banner item

1632

Hooks used by LLChatBannerItem

LLChatBannerItem Props

message

TypeDefault
String (Required)No Default

type

TypeDefault
Enum of type BannerTypeNo Default

styles

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

Styles Props

CSS ClassTypeDescription
itemContainerViewStyleBanner item container
bannerIndicatorViewStyleLeft indicator in the banner item
bannerTextTextStyleText in the banner item

What’s Next