Feat: Allow QuickReplies component container styles to be customised (F…

…aridSafi#2271)

- closes FaridSafi#2270

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,

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,

flow-typedefs/QuickReplies.js.flow

@@ -1,14 +1,16 @@
 // @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,
   currentMessage?: TMessage,
   color?: string,
   sendText?: string,
   quickReplyStyle?: ViewStyleProp,
+  quickReplyTextStyle?: TextStyleProp,
+  quickReplyContainerStyle?: ViewStyleProp,
   onQuickReply: (Array<Reply>) => void,
   renderQuickReplySend?: () => React.Node,
 |}>

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}
         />
       )

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 */

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))