LLUserReactionCounts

import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemFooter,
  LLChatMessageItemFooterProps,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
  LLReactionPickerProps,
  LLUserReactionCountDetailProps,
  LLUserReactionCounts,
  LLUserReactionCountsProps,
} from '@livelike/react-native';

function MyUserReactionsPickerComponent(props: LLReactionPickerProps) {
  // render custom reaction picker component
}

function MyUserReactionsCountDetailComponent(
  props: LLUserReactionCountDetailProps
) {
  // render custom reaction count detail component
}

function MyUserReactionsCountComponent(props: LLUserReactionCountsProps) {
  return (
    <LLUserReactionCounts
      {...props}
      MessageReactionPickerComponent={MyUserReactionsPickerComponent}
      UserReactionCountDetailComponent={MyUserReactionsCountDetailComponent}
    />
  );
}

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}
    />
  );
}

import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemFooter,
  LLChatMessageItemFooterProps,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
  LLReactionPicker,
  LLReactionPickerItemStyles,
  LLReactionPickerProps,
  LLReactionPickerStyles,
  LLUserReactionCountDetailStyles,
  LLUserReactionCounts,
  LLUserReactionCountsProps,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyUserReactionsPickerComponent(props: LLReactionPickerProps) {
  return (
    <LLReactionPicker
      {...props}
      styles={reactionPickerStyle}
      ReactionItemComponentStyles={reactionItemStyles}
    />
  );
}

function MyUserReactionsCountComponent(props: LLUserReactionCountsProps) {
  return (
    <LLUserReactionCounts
      {...props}
      MessageReactionPickerComponent={MyUserReactionsPickerComponent}
      UserReactionCountDetailComponentStyles={userReactionCountDetailStyles}
    />
  );
}

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}
    />
  );
}

const reactionPickerStyle: Partial<LLReactionPickerStyles> = StyleSheet.create({
  pickerContainer: { bottom: 0, right: 0, borderRadius: 10 },
});
const reactionItemStyles: Partial<LLReactionPickerItemStyles> =
  StyleSheet.create({
    reactionIcon: { height: 12, width: 12 },
  });
const userReactionCountDetailStyles: Partial<LLUserReactionCountDetailStyles> =
  StyleSheet.create({
    reactionCountText: { fontSize: 9 },
    reactionIcon: { height: 12, width: 12 },
  });