LLStickerPicker

import React from 'react';
import {
  LLBasePickerStyles,
  LLChat,
  LLChatMessageComposer,
  LLChatMessageComposerProps,
  LLStickerPicker,
  LLStickerPickerProps,
  LLStickerPickerStyles,
  useTheme,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';
import { useMemo } from 'react';

function MyStickerPicker(props: LLStickerPickerProps) {
  const { themeType } = useTheme();
  const pickerComponentStyles = useMemo(() => pickerComponentStylesFn(themeType), [themeType]);

  return (
    <LLStickerPicker
      {...props}
      PickerComponentStyles={pickerComponentStyles}
      styles={gifPickerStyles}
    />
  );
}

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

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

const gifPickerStyles: Partial<LLStickerPickerStyles> = StyleSheet.create({
  pickerCloseIcon: { height: 12, width: 12 },
  stickerImage: { width: 70, height: 70 },
  stickerPackIcon: { height: 22, width: 22 },
});
const pickerComponentStylesFn: (
  theme: 'light' | 'dark'
) => Partial<LLBasePickerStyles> = (theme) =>
  StyleSheet.create({
    pickerContainer: {
      minHeight: 250,
      maxHeight: 350,
      backgroundColor: theme === 'light' ? '#A0C3D2' : '#2b4956',
    },
    pickerItemsScrollview: {
      padding: 10,
    },
  });