i use renderQuickreplies in renderBubble prop. If you want to customize the chat components it can get REALLY complicated. But here's my example of how it might look:
I use custom message type extended from default Gifted Chat's message:
type MessageType =
| 'TEXT'
| 'AMOUNT_SLIDER'
| 'ERROR'
| 'WARNING'
| 'SCROLL_PICKER'
| 'IMAGE_BUBBLE_USER'
| 'FILE_BUBBLE_USER'
| 'FILE_SELECT'
| 'QUICKREPLIES'
| 'DATE';
export interface ChatMessage extends IMessage {
type: MessageType; //<- important part
sliderConfig?: SliderConfig;
dateConfig?: DateConfig;
imageConfig?: {
uri: string;
};
fileConfig?: {
uri: string;
name: string;
};
scrollOptions?: ScrollOption[];
cameraConfig?: {
type: 'front' | 'back';
};
quickReplies?: BotQuickReplies;
onClick?: () => void;
//..other props
}
GiftedChat:
//... other code
<GiftedChat
//...other props
messages={IMessages} //pass my custom messages array
renderBubble={(props: any) => (
<RenderComponents
props={props}
onQuickReply={onQuickReply}
setInput={setInput}
onTextChange={onTextChange}
locale={locale}
stepConfig={stepConfig}
IMessages={IMessages}
setIMessages={setIMessages}
openCamera={openCamera}
onComponentFinishedRendering={onComponentFinishedRendering}
removeErrors={removeErrors}
pushUserMessage={pushUserAnswer}
/>
)}
//...other props
/>
//...other code
RenderComponents:
//...other code
const RenderComponents: React.FC<Props> = ({
props: giftedChatProps,
onQuickReply,
setInput,
onTextChange,
locale,
stepConfig,
IMessages,
setIMessages,
openCamera,
onComponentFinishedRendering,
removeErrors,
pushUserMessage,
}) => {
//...other code
const { currentMessage } = giftedChatProps;
const { type, _id } = currentMessage as ChatMessage;
switch (type) {
case 'SCROLL_PICKER': {
return (
<CustomScrollPicker
//...props
/>
);
}
case 'ERROR': {
return (
<ErrorBubble
//...props
/>
);
}
//...other message types
case 'QUICKREPLIES': {
return (
<QuickRepliesController
onQuickReply={onQuickReply}
quickReplies={currentMessage.quickReplies}
//...other props
/>
);
}
//...other message types
default: {
return null;
}
}
};
export default RenderComponents;
and finally the custom Chat message bubble for when the message type is 'QUICKREPLIES' , it goes through another animation layer which i will not be copying here, its just bunch of animation functions, but finally renders this Component which is basically just a View box with some custom styled Buttons:
//...other code
const QuickRepliesBubble: FC<Props> = ({
quickReplies, //quickreplies array from message object
onQuickReply, //
}) => {
return (
<View style={styles.container}>
{quickReplies.values.map((reply: BotReply) => {
return (
<CustomQuickReply
image={reply.image}
key={reply.value}
title={reply.localizedTitle}
onPress={() =>
onQuickReply({
value: reply.value,
})
}
/>
);
})}
</View>
);
};
I know that this might look like bunch of blocks of code. But the underlying idea is that you can completely custom render the renderBubble prop in GiftedChat component. but you need to figure out a way to switch between default bubbles and the ones that you have custom created. in my case i added 'type' property to my messge object and made a switch for different types of messages.
