LLChatMessageMenu

import React from 'react';
import {
  LLChat,
  LLChatMessageItem,
  LLChatMessageItemProps,
  LLChatMessageList,
  LLChatMessageListProps,
  LLChatMessageMenu,
  LLChatMessageMenuOption,
  LLChatMessageMenuOptionProps,
  LLChatMessageMenuOptionStyles,
  LLChatMessageMenuProps,
  LLChatMessageMenuStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyMessageMenuOption<OnClickApiFnResponseData extends Promise<any>>(
  props: LLChatMessageMenuOptionProps<OnClickApiFnResponseData>
) {
  return <LLChatMessageMenuOption {...props} styles={messageMenuItemStyle} />;
}

function MyMessageMenu(props: LLChatMessageMenuProps) {
  return <LLChatMessageMenu {...props} styles={messageMenuStyle} />;
}

function MyMessageItemComponent(props: LLChatMessageItemProps) {
  return (
    <LLChatMessageItem
      {...props}
      MessageItemMenuComponent={MyMessageMenu}
      MessageItemMenuOptionComponent={MyMessageMenuOption}
    />
  );
}

function MyMessageListComponent(props: LLChatMessageListProps) {
  return (
    <LLChatMessageList
      {...props}
      MessageItemComponent={MyMessageItemComponent}
    />
  );
}

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

const messageMenuStyle: Partial<LLChatMessageMenuStyles> = StyleSheet.create({
  menuContainer: { padding: 10 },
});
const messageMenuItemStyle: Partial<LLChatMessageMenuOptionStyles> =
  StyleSheet.create({
    menuItemIcon: { height: 20, width: 20 },
    menuItemText: { fontSize: 12 },
  });