LLGifPicker

LLGifPicker renders a Gif picker component when a user press on gif-picker icon in composer
The component consists of:

  • Header - Search input and close button
  • Picker - Gifs based on search result
1916
🚧

GIFs are not supported by default on Android

You will need to add com.facebook.fresco:animated-gif:2.+ as an additional dependency to android/app/build.gradle
Read more...

Custom implementation for GifPickerHeaderComponent example:
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}
    />
  );
}
Customise styles for Stock LLGifPicker, LLGifPickerHeader and LLBasePicker component example:
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,
    },
  }
);

Hooks used by LLGifPicker

LLGifPicker Props

visible

Type

Default

boolean

false if not present

closeGifPicker

Type

Function of type: () => void

onSelectGif

Type

Function of type: (gifImage: IGif) => void (Required)

GifPickerHeaderComponent

Type

Default

React Component of type LLGifPickerHeader

LLGifPickerHeader

GifPickerHeaderComponentStyles

Type

Default

LLGifPickerHeaderStyles

No Default, if present styles props would be applied on top of internal LLGifPickerHeader styles.

PickerComponentStyles

Type

Default

LLBasePickerStyles

No Default, if present styles props would be applied on top of internal LLBasePicker styles.

styles

Type

Default

StyleSheet of type LLGifPickerStyles

No Default, if present styles props would be applied on top of internal LLGifPicker styles.

Styles Props

CSS Class

Type

Description

gifImageContainer

ViewStyle

Gif image container styles

gifImage

ImageStyle

Gif image styles

LLGifPickerHeader

LLGifPickerHeader renders a header of the gif picker component and consists of search input and close button

Hooks used by LLGifPickerHeader

LLGifPickerHeader Props

onSearchInputChange

Type

Function of type: (gifSearchInput: string, options?: { debounce: boolean;}) => void (Required)

closeGifPicker

Type

Function of type: () => void (Required)

styles

Type

Default

StyleSheet of type LLGifPickerHeaderStyles

No Default, if present styles props would be applied on top of internal LLGifPickerHeader styles.

Style Props

CSS Class

Type

Description

headerContainer

ViewStyle

Root header container

searchInput

ViewStyle

Search input styles

closeIcon

ImageStyle

Close icon styles


What’s Next