how to render quickreplies in react-native-gifted chat?

Question

I am using react-native-gifted-chat for chat UI in my project and I am looking for how to use renderQuickReplies and QuickReplySend function in react-native.

<GiftedChat
  messages={messages}
  placeholder="Any pick-up notes?"
  onSend={messages => {
    dispatch({
      type: 'private_message',
      data: {
        message: messages[0],
        conversationId: userId,
      },
    });
    dispatch({
      type: 'server/private_message',
      data: {message: messages[0], conversationId: userId},
    });
  }}
  renderBubble={renderBubble}
  renderSend={renderSend}
  isTyping={true}
  renderInputToolbar={renderInputToolbar}
  renderAvatar={renderAvatar}
  scrollToBottom={true}
  renderQuickReplies={renderQuickReplies(quickReplies)}
  alignTop={true}
  user={{
    _id: selfUser.userId,
  }}
/>

Answer 1

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.