LLGifPicker renders a Gif picker component when a user press on gif-picker icon in composer
Header - Search input and close buttonPicker - Gifs based on search result
🚧 You will need to add com.facebook.fresco:animated-gif:2.+ as an additional dependency to android/app/build.gradle Read more...
TypeScript
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}
/>
);
}TypeScript
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,
},
}
);Type Default boolean false if not present
Type Function of type: () => void
Type Function of type: (gifImage: IGif ) => void (Required )
Type Default LLGifPickerHeaderStyles No Default, if present styles props would be applied on top of internal LLGifPickerHeader styles.
Type Default LLBasePickerStyles No Default, if present styles props would be applied on top of internal LLBasePicker styles.
Type Default StyleSheet of type LLGifPickerStyles No Default, if present styles props would be applied on top of internal LLGifPicker styles.
CSS Class Type Description gifImageContainer ViewStyle Gif image container styles gifImage ImageStyle Gif image styles
LLGifPickerHeader renders a header of the gif picker component and consists of search input and close button
Type Function of type:(gifSearchInput: string, options?: { debounce: boolean;}) => voidRequired )
Type Function of type: () => voidRequired )
Type Default StyleSheet of type LLGifPickerHeaderStyles No Default, if present styles props would be applied on top of internal LLGifPickerHeader styles.
CSS Class Type Description headerContainer ViewStyle Root header container searchInput ViewStyle Search input styles closeIcon ImageStyle Close icon styles
