From 3935fd0e54f66eabce2928f076309ff86f3a03b6 Mon Sep 17 00:00:00 2001
From: Rajat Kanti Nandi <rajatkantinandi1993@gmail.com>
Date: Fri, 31 May 2024 00:30:28 +0530
Subject: [PATCH] Feat: Allow QuickReplies component container styles to be
 customised (#2271)

- closes #2270
---
 flow-typedefs/Bubble.js.flow       | 2 ++
 flow-typedefs/GiftedChat.js.flow   | 2 ++
 flow-typedefs/QuickReplies.js.flow | 4 +++-
 src/Bubble.tsx                     | 3 +++
 src/GiftedChat.tsx                 | 1 +
 src/QuickReplies.tsx               | 4 +++-
 6 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/flow-typedefs/Bubble.js.flow b/flow-typedefs/Bubble.js.flow
index 07efe8118..4a192bf45 100644
--- a/flow-typedefs/Bubble.js.flow
+++ b/flow-typedefs/Bubble.js.flow
@@ -49,6 +49,8 @@ export type BubbleProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   containerToPreviousStyle?: LeftRightStyle<ViewStyleProp>,
   usernameStyle?: TextStyleProp,
   quickReplyStyle?: ViewStyleProp,
+  quickReplyTextStyle?: TextStyleProp,
+  quickReplyContainerStyle?: ViewStyleProp,
   onLongPress?: (context?: any, message?: any) => void,
   onQuickReply?: (Array<Reply>) => void,
   renderMessageImage?: (RenderMessageImageProps<TMessage>) => React.Node,
diff --git a/flow-typedefs/GiftedChat.js.flow b/flow-typedefs/GiftedChat.js.flow
index fcf307888..fd64325a5 100644
--- a/flow-typedefs/GiftedChat.js.flow
+++ b/flow-typedefs/GiftedChat.js.flow
@@ -84,6 +84,8 @@ export type GiftedChatProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   },
   optionTintColor?: string,
   quickReplyStyle?: ViewStyleProp,
+  quickReplyTextStyle?: TextStyleProp,
+  quickReplyContainerStyle?: ViewStyleProp,
   isCustomViewBottom?: boolean,
   timeTextStyle?: LeftRightStyle<TextStyleProp>,
   onPressAvatar?: User => void,
diff --git a/flow-typedefs/QuickReplies.js.flow b/flow-typedefs/QuickReplies.js.flow
index 06ea81eab..d545e24fb 100644
--- a/flow-typedefs/QuickReplies.js.flow
+++ b/flow-typedefs/QuickReplies.js.flow
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import type { IMessage, Reply } from './types'
-import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'
+import type { ViewStyleProp, TextStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type QuickRepliesProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   nextMessage?: TMessage,
@@ -9,6 +9,8 @@ export type QuickRepliesProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   color?: string,
   sendText?: string,
   quickReplyStyle?: ViewStyleProp,
+  quickReplyTextStyle?: TextStyleProp,
+  quickReplyContainerStyle?: ViewStyleProp,
   onQuickReply: (Array<Reply>) => void,
   renderQuickReplySend?: () => React.Node,
 |}>
diff --git a/src/Bubble.tsx b/src/Bubble.tsx
index 5bb30d8ea..e49755db4 100644
--- a/src/Bubble.tsx
+++ b/src/Bubble.tsx
@@ -149,6 +149,7 @@ export interface BubbleProps<TMessage extends IMessage> {
   usernameStyle?: TextStyle
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
+  quickReplyContainerStyle?: StyleProp<ViewStyle>
   onPress?(context?: any, message?: any): void
   onLongPress?(context?: any, message?: any): void
   onQuickReply?(replies: Reply[]): void
@@ -335,6 +336,7 @@ export default class Bubble<
       renderQuickReplySend,
       quickReplyStyle,
       quickReplyTextStyle,
+      quickReplyContainerStyle,
     } = this.props
     if (currentMessage && currentMessage.quickReplies) {
       const { containerStyle, wrapperStyle, ...quickReplyProps } = this.props
@@ -348,6 +350,7 @@ export default class Bubble<
           renderQuickReplySend={renderQuickReplySend}
           quickReplyStyle={quickReplyStyle}
           quickReplyTextStyle={quickReplyTextStyle}
+          quickReplyContainerStyle={quickReplyContainerStyle}
           nextMessage={nextMessage}
         />
       )
diff --git a/src/GiftedChat.tsx b/src/GiftedChat.tsx
index eaa351ae6..37822d093 100644
--- a/src/GiftedChat.tsx
+++ b/src/GiftedChat.tsx
@@ -129,6 +129,7 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
   optionTintColor?: string
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
+  quickReplyContainerStyle?: StyleProp<ViewStyle>
   /* optional prop used to place customView below text, image and video views; default is false */
   isCustomViewBottom?: boolean
   /* infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
diff --git a/src/QuickReplies.tsx b/src/QuickReplies.tsx
index af90da2ae..11a31524c 100644
--- a/src/QuickReplies.tsx
+++ b/src/QuickReplies.tsx
@@ -52,6 +52,7 @@ export interface QuickRepliesProps<TMessage extends IMessage = IMessage> {
   sendText?: string
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
+  quickReplyContainerStyle?: StyleProp<ViewStyle>
   onQuickReply?(reply: Reply[]): void
   renderQuickReplySend?(): React.ReactNode
 }
@@ -68,6 +69,7 @@ export function QuickReplies({
   color = Color.peterRiver,
   quickReplyStyle,
   quickReplyTextStyle,
+  quickReplyContainerStyle,
   onQuickReply,
   sendText = 'Send',
   renderQuickReplySend,
@@ -132,7 +134,7 @@ export function QuickReplies({
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, quickReplyContainerStyle]}>
       {currentMessage!.quickReplies!.values.map(
         (reply: Reply, index: number) => {
           const selected = type === 'checkbox' && replies.find(sameReply(reply))