LLGifPicker

import React from 'react';
import {
  LLChat,
  LLChatMessageComposer,
  LLChatMessageComposerProps,
  LLGifPicker,
  LLGifPickerHeaderProps,
  LLGifPickerProps,
  LLGifPickerStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyGifPickerHeader(props: LLGifPickerHeaderProps) {
  // Render your custom gif picker header
}

function MyGifPicker(props: LLGifPickerProps) {
  return (
    <LLGifPicker
      {...props}
      GifPickerHeaderComponent={MyGifPickerHeader}
    />
  );
}

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

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

import React from 'react';
import {
  LLBasePickerStyles,
  LLChat,
  LLChatMessageComposer,
  LLChatMessageComposerProps,
  LLGifPicker,
  LLGifPickerHeaderStyles,
  LLGifPickerProps,
  LLGifPickerStyles,
} from '@livelike/react-native';
import { StyleSheet } from 'react-native';

function MyGifPicker(props: LLGifPickerProps) {
  return (
    <LLGifPicker
      {...props}
      GifPickerHeaderComponentStyles={gifPickerHeaderStyles}
      PickerComponentStyles={gifPickerComponentStyles}
      styles={gifPickerStyles}
    />
  );
}

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

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

const gifPickerStyles: Partial<LLGifPickerStyles> = StyleSheet.create({
  gifImage: { height: 100, width: 100 },
  gifImageContainer: { margin: 10 },
});
const gifPickerHeaderStyles: Partial<LLGifPickerHeaderStyles> =
  StyleSheet.create({
    headerContainer: { padding: 5 },
    searchInput: { borderRadius: 10, height: 50, padding: 10 },
    closeIcon: { height: 30, width: 30 },
  });
const gifPickerComponentStyles: Partial<LLBasePickerStyles> = StyleSheet.create(
  {
    pickerContainer: {
      minHeight: 250,
      maxHeight: 350,
      backgroundColor: 'white',
    },
    pickerItemsScrollview: {
      padding: 10,
    },
  }
);