LLChatMessageComposer

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

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