fix: add property to customize the wrapper style of message (#3052)

* fix: add property to customize the wrapper style of message

* fix: add property to customize the wrapper style of message

* tests: update snapshot

Author: khushal87

package/src/components/Message/Message.tsx

@@ -296,7 +296,7 @@ const MessageWithContext = <
   const {
     theme: {
       colors: { targetedMessageBackground },
-      messageSimple: { targetedMessageContainer, unreadUnderlayColor },
+      messageSimple: { targetedMessageContainer, unreadUnderlayColor, wrapper },
       screenPadding,
     },
   } = useTheme();
@@ -737,8 +737,12 @@ const MessageWithContext = <
         <View
           style={[
             { marginTop: 2, paddingHorizontal: screenPadding },
+            wrapper,
             (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
-              ? { backgroundColor: targetedMessageBackground, ...targetedMessageContainer }
+              ? {
+                  backgroundColor: targetedMessageBackground,
+                  ...targetedMessageContainer,
+                }
               : {},
           ]}
           testID='message-wrapper'

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -276,6 +276,7 @@ exports[`Thread should match thread snapshot 1`] = `
                           "paddingHorizontal": 8,
                         },
                         {},
+                        {},
                       ]
                     }
                     testID="message-wrapper"
@@ -787,6 +788,7 @@ exports[`Thread should match thread snapshot 1`] = `
                           "paddingHorizontal": 8,
                         },
                         {},
+                        {},
                       ]
                     }
                     testID="message-wrapper"
@@ -1336,6 +1338,7 @@ exports[`Thread should match thread snapshot 1`] = `
                           "paddingHorizontal": 8,
                         },
                         {},
+                        {},
                       ]
                     }
                     testID="message-wrapper"
@@ -1837,6 +1840,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             "paddingHorizontal": 8,
                           },
                           {},
+                          {},
                         ]
                       }
                       testID="message-wrapper"

package/src/contexts/themeContext/utils/theme.ts

@@ -674,6 +674,7 @@ export type Theme = {
       roundedView: ViewStyle;
     };
     unreadUnderlayColor?: ColorValue;
+    wrapper: ViewStyle;
   };
   poll: {
     allOptions: {
@@ -1466,6 +1467,7 @@ export const defaultTheme: Theme = {
       container: {},
       roundedView: {},
     },
+    wrapper: {},
   },
   poll: {
     allOptions: {