feat: customize message padding (#2202)

* feat: customize message padding * chore: revert back to normal default * chore: update snapshot
GetStream · Sep 2, 2023 · b2f3708 · b2f3708
1 parent 2b912c5
commit b2f3708
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -84,9 +84,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
   },
-  messagePadding: {
-    paddingHorizontal: 8,
-  },
   stickyHeader: {
     position: 'absolute',
     top: 0,
@@ -292,7 +289,8 @@ const MessageListWithContext = <
 
   const {
     colors: { white_snow },
-    messageList: { container, contentContainer, listContainer },
+    messageList: { container, contentContainer, listContainer, messageContainer },
+    screenPadding,
   } = theme;
 
   const modifiedTheme = useMemo(
@@ -562,7 +560,10 @@ const MessageListWithContext = <
       return (
         <>
           <View testID={`message-list-item-${index}`}>
-            <MessageSystem message={message} style={styles.messagePadding} />
+            <MessageSystem
+              message={message}
+              style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+            />
           </View>
           {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
         </>
@@ -587,7 +588,7 @@ const MessageListWithContext = <
               message={message}
               onThreadSelect={onThreadSelect}
               showUnreadUnderlay={showUnreadUnderlay}
-              style={styles.messagePadding}
+              style={[{ paddingHorizontal: screenPadding }, messageContainer]}
               threadList={threadList}
             />
           </View>
@@ -618,7 +619,7 @@ const MessageListWithContext = <
             message={message}
             onThreadSelect={onThreadSelect}
             showUnreadUnderlay={showUnreadUnderlay}
-            style={styles.messagePadding}
+            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
             threadList={threadList}
           />
         </View>

diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -248,9 +248,12 @@ exports[`Thread should match thread snapshot 1`] = `
                 <View
                   style={
                     Array [
-                      Object {
-                        "paddingHorizontal": 8,
-                      },
+                      Array [
+                        Object {
+                          "paddingHorizontal": 8,
+                        },
+                        Object {},
+                      ],
                       Object {
                         "backgroundColor": undefined,
                       },
@@ -497,9 +500,12 @@ exports[`Thread should match thread snapshot 1`] = `
                 <View
                   style={
                     Array [
-                      Object {
-                        "paddingHorizontal": 8,
-                      },
+                      Array [
+                        Object {
+                          "paddingHorizontal": 8,
+                        },
+                        Object {},
+                      ],
                       Object {
                         "backgroundColor": undefined,
                       },
@@ -746,9 +752,12 @@ exports[`Thread should match thread snapshot 1`] = `
                 <View
                   style={
                     Array [
-                      Object {
-                        "paddingHorizontal": 8,
-                      },
+                      Array [
+                        Object {
+                          "paddingHorizontal": 8,
+                        },
+                        Object {},
+                      ],
                       Object {
                         "backgroundColor": undefined,
                       },

diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
@@ -338,6 +338,7 @@ export type Theme = {
       text: TextStyle;
     };
     listContainer: ViewStyle;
+    messageContainer: ViewStyle;
     messageSystem: {
       container: ViewStyle;
       dateText: TextStyle;
@@ -841,6 +842,7 @@ export const defaultTheme: Theme = {
       text: {},
     },
     listContainer: {},
+    messageContainer: {},
     messageSystem: {
       container: {},
       dateText: {},