stream-chat-react-native-core 8.13.7 → 9.0.0-beta.10

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

@@ -19,17 +19,11 @@ exports[`Thread should match thread snapshot 1`] = `
   >
     <View
       style={
-        [
-          {
-            "alignItems": "center",
-            "flex": 1,
-            "width": "100%",
-          },
-          {
-            "backgroundColor": "#FCFCFC",
-          },
-          {},
-        ]
+        {
+          "backgroundColor": "#ffffff",
+          "flex": 1,
+          "width": "100%",
+        }
       }
       testID="message-flat-list-wrapper"
     >
@@ -38,98 +32,220 @@ exports[`Thread should match thread snapshot 1`] = `
         ListHeaderComponent={[Function]}
         contentContainerStyle={
           [
+            {
+              "paddingTop": 0,
+            },
             {
               "paddingBottom": 4,
             },
             undefined,
-            {},
           ]
         }
         data={
           [
             {
-              "attachments": [],
-              "cid": "messaging:test-channel",
-              "created_at": 2020-05-05T14:50:00.000Z,
-              "deleted_at": null,
-              "error": null,
-              "html": "<p>regular</p>",
-              "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
-              "message_text_updated_at": "2020-05-05T14:50:00.000Z",
-              "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-              "pinned_at": null,
-              "quoted_message": null,
-              "reaction_groups": null,
-              "status": "received",
-              "text": "Message6",
-              "type": "regular",
-              "updated_at": 2020-05-05T14:50:00.000Z,
-              "user": {
-                "banned": false,
-                "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "arthur",
-                "image": "https://i.imgur.com/LuuGvh0.png",
-                "name": "Arthur",
-                "online": false,
-                "role": "user",
-                "updated_at": "2020-04-27T13:39:49.332087Z",
+              "message": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message6",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "arthur",
+                  "image": "https://i.imgur.com/LuuGvh0.png",
+                  "name": "Arthur",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
+              },
+              "nextMessage": undefined,
+              "previousMessage": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message5",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "finn",
+                  "image": "https://i.imgur.com/spueyAP.png",
+                  "name": "Finn",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
               },
             },
             {
-              "attachments": [],
-              "cid": "messaging:test-channel",
-              "created_at": 2020-05-05T14:50:00.000Z,
-              "deleted_at": null,
-              "error": null,
-              "html": "<p>regular</p>",
-              "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
-              "message_text_updated_at": "2020-05-05T14:50:00.000Z",
-              "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-              "pinned_at": null,
-              "quoted_message": null,
-              "reaction_groups": null,
-              "status": "received",
-              "text": "Message5",
-              "type": "regular",
-              "updated_at": 2020-05-05T14:50:00.000Z,
-              "user": {
-                "banned": false,
-                "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "finn",
-                "image": "https://i.imgur.com/spueyAP.png",
-                "name": "Finn",
-                "online": false,
-                "role": "user",
-                "updated_at": "2020-04-27T13:39:49.332087Z",
+              "message": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message5",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "finn",
+                  "image": "https://i.imgur.com/spueyAP.png",
+                  "name": "Finn",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
+              },
+              "nextMessage": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message6",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "arthur",
+                  "image": "https://i.imgur.com/LuuGvh0.png",
+                  "name": "Arthur",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
+              },
+              "previousMessage": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "82a83b16-b611-527c-b3ac-765ef6220490",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message4",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "arthur",
+                  "image": "https://i.imgur.com/LuuGvh0.png",
+                  "name": "Arthur",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
               },
             },
             {
-              "attachments": [],
-              "cid": "messaging:test-channel",
-              "created_at": 2020-05-05T14:50:00.000Z,
-              "deleted_at": null,
-              "error": null,
-              "html": "<p>regular</p>",
-              "id": "82a83b16-b611-527c-b3ac-765ef6220490",
-              "message_text_updated_at": "2020-05-05T14:50:00.000Z",
-              "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
-              "pinned_at": null,
-              "quoted_message": null,
-              "reaction_groups": null,
-              "status": "received",
-              "text": "Message4",
-              "type": "regular",
-              "updated_at": 2020-05-05T14:50:00.000Z,
-              "user": {
-                "banned": false,
-                "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "arthur",
-                "image": "https://i.imgur.com/LuuGvh0.png",
-                "name": "Arthur",
-                "online": false,
-                "role": "user",
-                "updated_at": "2020-04-27T13:39:49.332087Z",
+              "message": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "82a83b16-b611-527c-b3ac-765ef6220490",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message4",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "arthur",
+                  "image": "https://i.imgur.com/LuuGvh0.png",
+                  "name": "Arthur",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
               },
+              "nextMessage": {
+                "attachments": [],
+                "cid": "messaging:test-channel",
+                "created_at": 2020-05-05T14:50:00.000Z,
+                "deleted_at": null,
+                "error": null,
+                "html": "<p>regular</p>",
+                "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
+                "message_text_updated_at": "2020-05-05T14:50:00.000Z",
+                "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+                "pinned_at": null,
+                "quoted_message": null,
+                "reaction_groups": null,
+                "status": "received",
+                "text": "Message5",
+                "type": "regular",
+                "updated_at": 2020-05-05T14:50:00.000Z,
+                "user": {
+                  "banned": false,
+                  "created_at": "2020-04-27T13:39:49.331742Z",
+                  "id": "finn",
+                  "image": "https://i.imgur.com/spueyAP.png",
+                  "name": "Finn",
+                  "online": false,
+                  "role": "user",
+                  "updated_at": "2020-04-27T13:39:49.332087Z",
+                },
+              },
+              "previousMessage": undefined,
             },
           ]
         }
@@ -141,6 +257,7 @@ exports[`Thread should match thread snapshot 1`] = `
         isInvertedVirtualizedList={true}
         keyExtractor={[Function]}
         keyboardShouldPersistTaps="handled"
+        layout={BaseAnimationMock {}}
         maintainVisibleContentPosition={
           {
             "autoscrollToTopThreshold": 10,
@@ -177,7 +294,6 @@ exports[`Thread should match thread snapshot 1`] = `
                 "flex": 1,
                 "width": "100%",
               },
-              {},
               undefined,
             ],
           ]
@@ -244,341 +360,308 @@ exports[`Thread should match thread snapshot 1`] = `
                         {},
                       ],
                       {
-                        "backgroundColor": undefined,
+                        "paddingHorizontal": 16,
                       },
                     ]
                   }
+                  testID="message-wrapper"
                 >
-                  <View
-                    style={
-                      [
-                        {
-                          "marginTop": 2,
-                          "paddingHorizontal": 8,
-                        },
-                        {},
-                        {},
-                      ]
-                    }
-                    testID="message-wrapper"
-                  >
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "flex-end",
-                            "flexDirection": "row",
-                          },
-                          {
-                            "marginBottom": 8,
-                          },
-                          {
-                            "justifyContent": "flex-start",
-                          },
-                          {},
-                        ]
-                      }
-                      testID="message-simple-wrapper"
-                    >
+                  <View />
+                  <View>
+                    <View>
                       <View
-                        style={
-                          [
-                            {
-                              "marginRight": 8,
-                            },
-                            {},
-                          ]
+                        collapsable={false}
+                        hitSlop={
+                          {
+                            "left": 750,
+                            "right": 750,
+                          }
                         }
-                        testID="message-avatar"
-                      >
-                        <View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "justifyContent": "center",
-                                  "overflow": "hidden",
-                                },
-                                {
-                                  "borderRadius": 16,
-                                  "height": 32,
-                                  "width": 32,
-                                },
-                                {},
-                                undefined,
-                              ]
-                            }
-                          >
-                            <Image
-                              accessibilityLabel="Avatar Image"
-                              onError={[Function]}
-                              source={
-                                {
-                                  "uri": "https://i.imgur.com/LuuGvh0.png",
-                                }
-                              }
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
-                                  },
-                                  {
-                                    "backgroundColor": "#ececec",
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
-                                  },
-                                  undefined,
-                                ]
-                              }
-                              testID="avatar-image"
-                            />
-                          </View>
-                        </View>
-                      </View>
-                      <View
                         style={
-                          [
-                            {},
-                            {
-                              "alignItems": "flex-start",
-                            },
-                            {},
-                            {
-                              "borderRadiusL": 16,
-                              "borderRadiusS": 0,
-                            },
-                          ]
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                            "zIndex": 1,
+                          }
                         }
-                        testID="message-components"
                       >
                         <View
+                          pointerEvents="box-none"
                           style={
-                            [
-                              {
-                                "paddingBottom": 2,
-                              },
-                              {},
-                            ]
-                          }
-                        />
-                        <View
-                          collapsable={false}
-                          hitSlop={
                             {
-                              "left": 750,
-                              "right": 750,
+                              "alignItems": "flex-end",
+                              "flexDirection": "row",
+                              "gap": 8,
+                              "paddingVertical": 8,
+                              "width": "100%",
                             }
                           }
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                              },
-                              {},
-                              {},
-                            ]
-                          }
+                          testID="message-item-view-wrapper"
                         >
+                          <View
+                            style={{}}
+                            testID="message-author"
+                          >
+                            <View
+                              testID="user-avatar"
+                            >
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "borderRadius": 9999,
+                                      "justifyContent": "center",
+                                      "overflow": "hidden",
+                                    },
+                                    {
+                                      "height": 32,
+                                      "width": 32,
+                                    },
+                                    {
+                                      "backgroundColor": "#fcd579",
+                                    },
+                                    {
+                                      "borderColor": "rgba(26, 27, 37, 0.1)",
+                                      "borderWidth": 1,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="avatar-image"
+                              >
+                                <Image
+                                  onError={[Function]}
+                                  source={
+                                    {
+                                      "uri": "https://i.imgur.com/LuuGvh0.png",
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {},
+                                      {
+                                        "height": 32,
+                                        "width": 32,
+                                      },
+                                    ]
+                                  }
+                                />
+                              </View>
+                            </View>
+                          </View>
                           <View
                             style={
                               [
                                 {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
+                                  "gap": 4,
+                                },
+                                {
+                                  "alignItems": "flex-start",
                                 },
                                 {},
                               ]
                             }
+                            testID="message-components"
                           >
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                [
-                                  {
-                                    "opacity": 1,
-                                  },
-                                  {},
-                                ]
-                              }
+                              style={{}}
                             >
                               <View
-                                onLayout={[Function]}
-                                style={{}}
+                                style={
+                                  {
+                                    "alignSelf": "flex-end",
+                                  }
+                                }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "alignSelf": "flex-start",
+                                  }
+                                }
                               >
                                 <View
-                                  style={
-                                    [
-                                      {
-                                        "borderTopLeftRadius": 16,
-                                        "borderTopRightRadius": 16,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
-                                      },
-                                      {
-                                        "backgroundColor": "#E9EAED",
-                                        "borderBottomLeftRadius": 0,
-                                        "borderBottomRightRadius": 16,
-                                        "borderColor": "#ECEBEB",
-                                      },
-                                      {},
-                                      {},
-                                      {},
-                                    ]
+                                  accessibilityState={
+                                    {
+                                      "busy": undefined,
+                                      "checked": undefined,
+                                      "disabled": undefined,
+                                      "expanded": undefined,
+                                      "selected": undefined,
+                                    }
+                                  }
+                                  accessibilityValue={
+                                    {
+                                      "max": undefined,
+                                      "min": undefined,
+                                      "now": undefined,
+                                      "text": undefined,
+                                    }
                                   }
-                                  testID="message-content-wrapper"
+                                  accessible={true}
+                                  collapsable={false}
+                                  focusable={true}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
+                                  style={{}}
                                 >
                                   <View
-                                    style={
-                                      [
-                                        {
-                                          "maxWidth": 250,
-                                          "paddingHorizontal": 16,
-                                        },
-                                        {},
-                                        undefined,
-                                      ]
-                                    }
-                                    testID="message-text-container"
+                                    style={{}}
                                   >
                                     <View
                                       style={
                                         [
                                           {
-                                            "alignSelf": "stretch",
+                                            "borderTopLeftRadius": 20,
+                                            "borderTopRightRadius": 20,
+                                            "overflow": "hidden",
                                           },
-                                          undefined,
+                                          {
+                                            "backgroundColor": "#ebeef1",
+                                            "borderBottomLeftRadius": 0,
+                                            "borderBottomRightRadius": 20,
+                                          },
+                                          {},
+                                          {},
+                                          {},
                                         ]
                                       }
+                                      testID="message-content-wrapper"
                                     >
-                                      <Text
+                                      <View
                                         style={
-                                          {
-                                            "alignItems": "flex-start",
-                                            "flexDirection": "row",
-                                            "flexWrap": "wrap",
-                                            "justifyContent": "flex-start",
-                                            "marginBottom": 8,
-                                            "marginTop": 8,
-                                          }
+                                          [
+                                            {
+                                              "gap": 8,
+                                              "paddingBottom": 0,
+                                              "paddingHorizontal": 8,
+                                              "paddingTop": 0,
+                                            },
+                                            {},
+                                          ]
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          [
+                                            {
+                                              "maxWidth": 256,
+                                              "paddingHorizontal": 12,
+                                            },
+                                            {},
+                                            undefined,
+                                          ]
                                         }
+                                        testID="message-text-container"
                                       >
-                                        <Text
+                                        <View
                                           style={
-                                            {
-                                              "color": "#000000",
-                                            }
+                                            [
+                                              {
+                                                "alignSelf": "stretch",
+                                              },
+                                              undefined,
+                                            ]
                                           }
                                         >
-                                          Message6
-                                        </Text>
-                                      </Text>
+                                          <Text
+                                            style={
+                                              {
+                                                "alignItems": "flex-start",
+                                                "flexDirection": "row",
+                                                "flexWrap": "wrap",
+                                                "fontSize": 17,
+                                                "justifyContent": "flex-start",
+                                                "lineHeight": 20,
+                                                "marginBottom": 8,
+                                                "marginTop": 8,
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              style={
+                                                {
+                                                  "color": "#1a1b25",
+                                                  "fontSize": 17,
+                                                  "lineHeight": 20,
+                                                }
+                                              }
+                                            >
+                                              Message6
+                                            </Text>
+                                          </Text>
+                                        </View>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
+                            <View
+                              style={
+                                {
+                                  "marginTop": -4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "justifyContent": "center",
+                                    "maxWidth": "100%",
+                                    "paddingVertical": 4,
+                                  },
+                                  {},
+                                ]
+                              }
+                              testID="message-status-time"
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  }
+                                }
+                              >
+                                2:50 PM
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "color": "#687385",
+                                      "fontSize": 13,
+                                      "fontWeight": 400,
+                                      "lineHeight": 16,
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                Edited
+                              </Text>
+                            </View>
                           </View>
                         </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "marginTop": 4,
-                              },
-                              {},
-                            ]
-                          }
-                          testID="message-status-time"
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            2:50 PM
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "fontSize": 12,
-                                },
-                              ]
-                            }
-                          >
-                            ⦁
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            Edited
-                          </Text>
-                        </View>
                       </View>
                     </View>
                   </View>
+                  <View />
                 </View>
               </View>
             </View>
@@ -614,341 +697,308 @@ exports[`Thread should match thread snapshot 1`] = `
                         {},
                       ],
                       {
-                        "backgroundColor": undefined,
+                        "paddingHorizontal": 16,
                       },
                     ]
                   }
+                  testID="message-wrapper"
                 >
-                  <View
-                    style={
-                      [
-                        {
-                          "marginTop": 2,
-                          "paddingHorizontal": 8,
-                        },
-                        {},
-                        {},
-                      ]
-                    }
-                    testID="message-wrapper"
-                  >
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "flex-end",
-                            "flexDirection": "row",
-                          },
-                          {
-                            "marginBottom": 8,
-                          },
-                          {
-                            "justifyContent": "flex-start",
-                          },
-                          {},
-                        ]
-                      }
-                      testID="message-simple-wrapper"
-                    >
+                  <View />
+                  <View>
+                    <View>
                       <View
-                        style={
-                          [
-                            {
-                              "marginRight": 8,
-                            },
-                            {},
-                          ]
+                        collapsable={false}
+                        hitSlop={
+                          {
+                            "left": 750,
+                            "right": 750,
+                          }
                         }
-                        testID="message-avatar"
-                      >
-                        <View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "justifyContent": "center",
-                                  "overflow": "hidden",
-                                },
-                                {
-                                  "borderRadius": 16,
-                                  "height": 32,
-                                  "width": 32,
-                                },
-                                {},
-                                undefined,
-                              ]
-                            }
-                          >
-                            <Image
-                              accessibilityLabel="Avatar Image"
-                              onError={[Function]}
-                              source={
-                                {
-                                  "uri": "https://i.imgur.com/spueyAP.png",
-                                }
-                              }
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
-                                  },
-                                  {
-                                    "backgroundColor": "#ececec",
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
-                                  },
-                                  undefined,
-                                ]
-                              }
-                              testID="avatar-image"
-                            />
-                          </View>
-                        </View>
-                      </View>
-                      <View
                         style={
-                          [
-                            {},
-                            {
-                              "alignItems": "flex-start",
-                            },
-                            {},
-                            {
-                              "borderRadiusL": 16,
-                              "borderRadiusS": 0,
-                            },
-                          ]
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                            "zIndex": 1,
+                          }
                         }
-                        testID="message-components"
                       >
                         <View
+                          pointerEvents="box-none"
                           style={
-                            [
-                              {
-                                "paddingBottom": 2,
-                              },
-                              {},
-                            ]
-                          }
-                        />
-                        <View
-                          collapsable={false}
-                          hitSlop={
                             {
-                              "left": 750,
-                              "right": 750,
+                              "alignItems": "flex-end",
+                              "flexDirection": "row",
+                              "gap": 8,
+                              "paddingVertical": 8,
+                              "width": "100%",
                             }
                           }
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                              },
-                              {},
-                              {},
-                            ]
-                          }
+                          testID="message-item-view-wrapper"
                         >
+                          <View
+                            style={{}}
+                            testID="message-author"
+                          >
+                            <View
+                              testID="user-avatar"
+                            >
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "borderRadius": 9999,
+                                      "justifyContent": "center",
+                                      "overflow": "hidden",
+                                    },
+                                    {
+                                      "height": 32,
+                                      "width": 32,
+                                    },
+                                    {
+                                      "backgroundColor": "#8febbd",
+                                    },
+                                    {
+                                      "borderColor": "rgba(26, 27, 37, 0.1)",
+                                      "borderWidth": 1,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="avatar-image"
+                              >
+                                <Image
+                                  onError={[Function]}
+                                  source={
+                                    {
+                                      "uri": "https://i.imgur.com/spueyAP.png",
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {},
+                                      {
+                                        "height": 32,
+                                        "width": 32,
+                                      },
+                                    ]
+                                  }
+                                />
+                              </View>
+                            </View>
+                          </View>
                           <View
                             style={
                               [
                                 {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
+                                  "gap": 4,
+                                },
+                                {
+                                  "alignItems": "flex-start",
                                 },
                                 {},
                               ]
                             }
+                            testID="message-components"
                           >
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                [
-                                  {
-                                    "opacity": 1,
-                                  },
-                                  {},
-                                ]
-                              }
+                              style={{}}
                             >
                               <View
-                                onLayout={[Function]}
-                                style={{}}
+                                style={
+                                  {
+                                    "alignSelf": "flex-end",
+                                  }
+                                }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "alignSelf": "flex-start",
+                                  }
+                                }
                               >
                                 <View
-                                  style={
-                                    [
-                                      {
-                                        "borderTopLeftRadius": 16,
-                                        "borderTopRightRadius": 16,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
-                                      },
-                                      {
-                                        "backgroundColor": "#E9EAED",
-                                        "borderBottomLeftRadius": 0,
-                                        "borderBottomRightRadius": 16,
-                                        "borderColor": "#ECEBEB",
-                                      },
-                                      {},
-                                      {},
-                                      {},
-                                    ]
+                                  accessibilityState={
+                                    {
+                                      "busy": undefined,
+                                      "checked": undefined,
+                                      "disabled": undefined,
+                                      "expanded": undefined,
+                                      "selected": undefined,
+                                    }
+                                  }
+                                  accessibilityValue={
+                                    {
+                                      "max": undefined,
+                                      "min": undefined,
+                                      "now": undefined,
+                                      "text": undefined,
+                                    }
                                   }
-                                  testID="message-content-wrapper"
+                                  accessible={true}
+                                  collapsable={false}
+                                  focusable={true}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
+                                  style={{}}
                                 >
                                   <View
-                                    style={
-                                      [
-                                        {
-                                          "maxWidth": 250,
-                                          "paddingHorizontal": 16,
-                                        },
-                                        {},
-                                        undefined,
-                                      ]
-                                    }
-                                    testID="message-text-container"
+                                    style={{}}
                                   >
                                     <View
                                       style={
                                         [
                                           {
-                                            "alignSelf": "stretch",
+                                            "borderTopLeftRadius": 20,
+                                            "borderTopRightRadius": 20,
+                                            "overflow": "hidden",
                                           },
-                                          undefined,
+                                          {
+                                            "backgroundColor": "#ebeef1",
+                                            "borderBottomLeftRadius": 0,
+                                            "borderBottomRightRadius": 20,
+                                          },
+                                          {},
+                                          {},
+                                          {},
                                         ]
                                       }
+                                      testID="message-content-wrapper"
                                     >
-                                      <Text
+                                      <View
                                         style={
-                                          {
-                                            "alignItems": "flex-start",
-                                            "flexDirection": "row",
-                                            "flexWrap": "wrap",
-                                            "justifyContent": "flex-start",
-                                            "marginBottom": 8,
-                                            "marginTop": 8,
-                                          }
+                                          [
+                                            {
+                                              "gap": 8,
+                                              "paddingBottom": 0,
+                                              "paddingHorizontal": 8,
+                                              "paddingTop": 0,
+                                            },
+                                            {},
+                                          ]
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          [
+                                            {
+                                              "maxWidth": 256,
+                                              "paddingHorizontal": 12,
+                                            },
+                                            {},
+                                            undefined,
+                                          ]
                                         }
+                                        testID="message-text-container"
                                       >
-                                        <Text
+                                        <View
                                           style={
-                                            {
-                                              "color": "#000000",
-                                            }
+                                            [
+                                              {
+                                                "alignSelf": "stretch",
+                                              },
+                                              undefined,
+                                            ]
                                           }
                                         >
-                                          Message5
-                                        </Text>
-                                      </Text>
+                                          <Text
+                                            style={
+                                              {
+                                                "alignItems": "flex-start",
+                                                "flexDirection": "row",
+                                                "flexWrap": "wrap",
+                                                "fontSize": 17,
+                                                "justifyContent": "flex-start",
+                                                "lineHeight": 20,
+                                                "marginBottom": 8,
+                                                "marginTop": 8,
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              style={
+                                                {
+                                                  "color": "#1a1b25",
+                                                  "fontSize": 17,
+                                                  "lineHeight": 20,
+                                                }
+                                              }
+                                            >
+                                              Message5
+                                            </Text>
+                                          </Text>
+                                        </View>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "marginTop": 4,
-                              },
-                              {},
-                            ]
-                          }
-                          testID="message-status-time"
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            2:50 PM
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "fontSize": 12,
-                                },
-                              ]
-                            }
-                          >
-                            ⦁
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
+                            <View
+                              style={
                                 {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            Edited
-                          </Text>
+                                  "marginTop": -4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "justifyContent": "center",
+                                    "maxWidth": "100%",
+                                    "paddingVertical": 4,
+                                  },
+                                  {},
+                                ]
+                              }
+                              testID="message-status-time"
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  }
+                                }
+                              >
+                                2:50 PM
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "color": "#687385",
+                                      "fontSize": 13,
+                                      "fontWeight": 400,
+                                      "lineHeight": 16,
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                Edited
+                              </Text>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View />
                 </View>
               </View>
             </View>
@@ -979,41 +1029,36 @@ exports[`Thread should match thread snapshot 1`] = `
               >
                 <View
                   style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "alignSelf": "center",
-                        "borderRadius": 8,
-                        "height": 16,
-                        "justifyContent": "center",
-                        "marginVertical": 4,
-                        "paddingHorizontal": 8,
-                      },
-                      {
-                        "backgroundColor": "#000000CC",
-                      },
-                      {},
-                    ]
+                    {
+                      "paddingVertical": 8,
+                    }
                   }
-                  testID="date-separator"
                 >
-                  <Text
+                  <View
                     style={
-                      [
-                        {
-                          "fontSize": 12,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        },
-                        {
-                          "color": "#FFFFFF",
-                        },
-                        {},
-                      ]
+                      {
+                        "alignSelf": "center",
+                        "backgroundColor": "#f6f8fa",
+                        "borderRadius": 9999,
+                        "paddingHorizontal": 12,
+                        "paddingVertical": 4,
+                      }
                     }
+                    testID="date-separator"
                   >
-                    05/05/2020
-                  </Text>
+                    <Text
+                      style={
+                        {
+                          "color": "#414552",
+                          "fontSize": 13,
+                          "fontWeight": 600,
+                          "lineHeight": 16,
+                        }
+                      }
+                    >
+                      05/05/2020
+                    </Text>
+                  </View>
                 </View>
                 <View
                   style={
@@ -1022,341 +1067,308 @@ exports[`Thread should match thread snapshot 1`] = `
                         {},
                       ],
                       {
-                        "backgroundColor": undefined,
+                        "paddingHorizontal": 16,
                       },
                     ]
                   }
+                  testID="message-wrapper"
                 >
-                  <View
-                    style={
-                      [
-                        {
-                          "marginTop": 2,
-                          "paddingHorizontal": 8,
-                        },
-                        {},
-                        {},
-                      ]
-                    }
-                    testID="message-wrapper"
-                  >
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "flex-end",
-                            "flexDirection": "row",
-                          },
-                          {
-                            "marginBottom": 8,
-                          },
-                          {
-                            "justifyContent": "flex-start",
-                          },
-                          {},
-                        ]
-                      }
-                      testID="message-simple-wrapper"
-                    >
+                  <View />
+                  <View>
+                    <View>
                       <View
-                        style={
-                          [
-                            {
-                              "marginRight": 8,
-                            },
-                            {},
-                          ]
+                        collapsable={false}
+                        hitSlop={
+                          {
+                            "left": 750,
+                            "right": 750,
+                          }
                         }
-                        testID="message-avatar"
-                      >
-                        <View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "justifyContent": "center",
-                                  "overflow": "hidden",
-                                },
-                                {
-                                  "borderRadius": 16,
-                                  "height": 32,
-                                  "width": 32,
-                                },
-                                {},
-                                undefined,
-                              ]
-                            }
-                          >
-                            <Image
-                              accessibilityLabel="Avatar Image"
-                              onError={[Function]}
-                              source={
-                                {
-                                  "uri": "https://i.imgur.com/LuuGvh0.png",
-                                }
-                              }
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
-                                  },
-                                  {
-                                    "backgroundColor": "#ececec",
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
-                                  },
-                                  undefined,
-                                ]
-                              }
-                              testID="avatar-image"
-                            />
-                          </View>
-                        </View>
-                      </View>
-                      <View
                         style={
-                          [
-                            {},
-                            {
-                              "alignItems": "flex-start",
-                            },
-                            {},
-                            {
-                              "borderRadiusL": 16,
-                              "borderRadiusS": 0,
-                            },
-                          ]
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                            "zIndex": 1,
+                          }
                         }
-                        testID="message-components"
                       >
                         <View
+                          pointerEvents="box-none"
                           style={
-                            [
-                              {
-                                "paddingBottom": 2,
-                              },
-                              {},
-                            ]
-                          }
-                        />
-                        <View
-                          collapsable={false}
-                          hitSlop={
                             {
-                              "left": 750,
-                              "right": 750,
+                              "alignItems": "flex-end",
+                              "flexDirection": "row",
+                              "gap": 8,
+                              "paddingVertical": 8,
+                              "width": "100%",
                             }
                           }
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                              },
-                              {},
-                              {},
-                            ]
-                          }
+                          testID="message-item-view-wrapper"
                         >
+                          <View
+                            style={{}}
+                            testID="message-author"
+                          >
+                            <View
+                              testID="user-avatar"
+                            >
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "borderRadius": 9999,
+                                      "justifyContent": "center",
+                                      "overflow": "hidden",
+                                    },
+                                    {
+                                      "height": 32,
+                                      "width": 32,
+                                    },
+                                    {
+                                      "backgroundColor": "#fcd579",
+                                    },
+                                    {
+                                      "borderColor": "rgba(26, 27, 37, 0.1)",
+                                      "borderWidth": 1,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="avatar-image"
+                              >
+                                <Image
+                                  onError={[Function]}
+                                  source={
+                                    {
+                                      "uri": "https://i.imgur.com/LuuGvh0.png",
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {},
+                                      {
+                                        "height": 32,
+                                        "width": 32,
+                                      },
+                                    ]
+                                  }
+                                />
+                              </View>
+                            </View>
+                          </View>
                           <View
                             style={
                               [
                                 {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
+                                  "gap": 4,
+                                },
+                                {
+                                  "alignItems": "flex-start",
                                 },
                                 {},
                               ]
                             }
+                            testID="message-components"
                           >
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                [
-                                  {
-                                    "opacity": 1,
-                                  },
-                                  {},
-                                ]
-                              }
+                              style={{}}
                             >
                               <View
-                                onLayout={[Function]}
-                                style={{}}
+                                style={
+                                  {
+                                    "alignSelf": "flex-end",
+                                  }
+                                }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "alignSelf": "flex-start",
+                                  }
+                                }
                               >
                                 <View
-                                  style={
-                                    [
-                                      {
-                                        "borderTopLeftRadius": 16,
-                                        "borderTopRightRadius": 16,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
-                                      },
-                                      {
-                                        "backgroundColor": "#E9EAED",
-                                        "borderBottomLeftRadius": 0,
-                                        "borderBottomRightRadius": 16,
-                                        "borderColor": "#ECEBEB",
-                                      },
-                                      {},
-                                      {},
-                                      {},
-                                    ]
+                                  accessibilityState={
+                                    {
+                                      "busy": undefined,
+                                      "checked": undefined,
+                                      "disabled": undefined,
+                                      "expanded": undefined,
+                                      "selected": undefined,
+                                    }
                                   }
-                                  testID="message-content-wrapper"
+                                  accessibilityValue={
+                                    {
+                                      "max": undefined,
+                                      "min": undefined,
+                                      "now": undefined,
+                                      "text": undefined,
+                                    }
+                                  }
+                                  accessible={true}
+                                  collapsable={false}
+                                  focusable={true}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
+                                  style={{}}
                                 >
                                   <View
-                                    style={
-                                      [
-                                        {
-                                          "maxWidth": 250,
-                                          "paddingHorizontal": 16,
-                                        },
-                                        {},
-                                        undefined,
-                                      ]
-                                    }
-                                    testID="message-text-container"
+                                    style={{}}
                                   >
                                     <View
                                       style={
                                         [
                                           {
-                                            "alignSelf": "stretch",
+                                            "borderTopLeftRadius": 20,
+                                            "borderTopRightRadius": 20,
+                                            "overflow": "hidden",
                                           },
-                                          undefined,
+                                          {
+                                            "backgroundColor": "#ebeef1",
+                                            "borderBottomLeftRadius": 0,
+                                            "borderBottomRightRadius": 20,
+                                          },
+                                          {},
+                                          {},
+                                          {},
                                         ]
                                       }
+                                      testID="message-content-wrapper"
                                     >
-                                      <Text
+                                      <View
                                         style={
-                                          {
-                                            "alignItems": "flex-start",
-                                            "flexDirection": "row",
-                                            "flexWrap": "wrap",
-                                            "justifyContent": "flex-start",
-                                            "marginBottom": 8,
-                                            "marginTop": 8,
-                                          }
+                                          [
+                                            {
+                                              "gap": 8,
+                                              "paddingBottom": 0,
+                                              "paddingHorizontal": 8,
+                                              "paddingTop": 0,
+                                            },
+                                            {},
+                                          ]
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          [
+                                            {
+                                              "maxWidth": 256,
+                                              "paddingHorizontal": 12,
+                                            },
+                                            {},
+                                            undefined,
+                                          ]
                                         }
+                                        testID="message-text-container"
                                       >
-                                        <Text
+                                        <View
                                           style={
-                                            {
-                                              "color": "#000000",
-                                            }
+                                            [
+                                              {
+                                                "alignSelf": "stretch",
+                                              },
+                                              undefined,
+                                            ]
                                           }
                                         >
-                                          Message4
-                                        </Text>
-                                      </Text>
+                                          <Text
+                                            style={
+                                              {
+                                                "alignItems": "flex-start",
+                                                "flexDirection": "row",
+                                                "flexWrap": "wrap",
+                                                "fontSize": 17,
+                                                "justifyContent": "flex-start",
+                                                "lineHeight": 20,
+                                                "marginBottom": 8,
+                                                "marginTop": 8,
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              style={
+                                                {
+                                                  "color": "#1a1b25",
+                                                  "fontSize": 17,
+                                                  "lineHeight": 20,
+                                                }
+                                              }
+                                            >
+                                              Message4
+                                            </Text>
+                                          </Text>
+                                        </View>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "marginTop": 4,
-                              },
-                              {},
-                            ]
-                          }
-                          testID="message-status-time"
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            2:50 PM
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "fontSize": 12,
-                                },
-                              ]
-                            }
-                          >
-                            ⦁
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
+                            <View
+                              style={
                                 {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            Edited
-                          </Text>
+                                  "marginTop": -4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "justifyContent": "center",
+                                    "maxWidth": "100%",
+                                    "paddingVertical": 4,
+                                  },
+                                  {},
+                                ]
+                              }
+                              testID="message-status-time"
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  }
+                                }
+                              >
+                                2:50 PM
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "color": "#687385",
+                                      "fontSize": 13,
+                                      "fontWeight": 400,
+                                      "lineHeight": 16,
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                Edited
+                              </Text>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View />
                 </View>
               </View>
             </View>
@@ -1374,459 +1386,341 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              style={
-                {
-                  "marginVertical": 8,
-                }
-              }
+              style={{}}
               testID="thread-footer-component"
             >
               <View
                 style={
-                  {
-                    "paddingHorizontal": 8,
-                  }
+                  [
+                    undefined,
+                    {
+                      "paddingHorizontal": 16,
+                    },
+                  ]
                 }
+                testID="message-wrapper"
               >
-                <View
-                  style={
-                    [
-                      undefined,
-                      {
-                        "backgroundColor": undefined,
-                      },
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "marginTop": 2,
-                          "paddingHorizontal": 8,
-                        },
-                        {},
-                        {},
-                      ]
-                    }
-                    testID="message-wrapper"
-                  >
+                <View />
+                <View>
+                  <View>
                     <View
+                      collapsable={false}
+                      hitSlop={
+                        {
+                          "left": 750,
+                          "right": 750,
+                        }
+                      }
                       style={
-                        [
-                          {
-                            "alignItems": "flex-end",
-                            "flexDirection": "row",
-                          },
-                          [
-                            {
-                              "marginBottom": 12,
-                            },
-                            {},
-                          ],
-                          {
-                            "justifyContent": "flex-start",
-                          },
-                          {},
-                        ]
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "zIndex": 1,
+                        }
                       }
-                      testID="message-simple-wrapper"
                     >
                       <View
+                        pointerEvents="box-none"
                         style={
-                          [
-                            {
-                              "marginRight": 8,
-                            },
-                            {},
-                          ]
+                          {
+                            "alignItems": "flex-end",
+                            "flexDirection": "row",
+                            "gap": 8,
+                            "marginBottom": 12,
+                            "paddingVertical": 8,
+                            "width": "100%",
+                          }
                         }
-                        testID="message-avatar"
+                        testID="message-item-view-wrapper"
                       >
-                        <View>
+                        <View
+                          style={{}}
+                          testID="message-author"
+                        >
                           <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "justifyContent": "center",
-                                  "overflow": "hidden",
-                                },
-                                {
-                                  "borderRadius": 16,
-                                  "height": 32,
-                                  "width": 32,
-                                },
-                                {},
-                                undefined,
-                              ]
-                            }
+                            testID="user-avatar"
                           >
-                            <Image
-                              accessibilityLabel="Avatar Image"
-                              onError={[Function]}
-                              source={
-                                {
-                                  "uri": "https://i.imgur.com/spueyAP.png",
-                                }
-                              }
+                            <View
                               style={
                                 [
                                   {
-                                    "borderRadius": 16,
-                                    "height": 32,
-                                    "width": 32,
+                                    "alignItems": "center",
+                                    "borderRadius": 9999,
+                                    "justifyContent": "center",
+                                    "overflow": "hidden",
                                   },
                                   {
-                                    "backgroundColor": "#ececec",
-                                    "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
                                   },
+                                  {
+                                    "backgroundColor": "#8febbd",
+                                  },
+                                  {
+                                    "borderColor": "rgba(26, 27, 37, 0.1)",
+                                    "borderWidth": 1,
+                                  },
                                   undefined,
                                 ]
                               }
                               testID="avatar-image"
-                            />
+                            >
+                              <Image
+                                onError={[Function]}
+                                source={
+                                  {
+                                    "uri": "https://i.imgur.com/spueyAP.png",
+                                  }
+                                }
+                                style={
+                                  [
+                                    {},
+                                    {
+                                      "height": 32,
+                                      "width": 32,
+                                    },
+                                  ]
+                                }
+                              />
+                            </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          [
-                            {},
-                            {
-                              "alignItems": "flex-start",
-                            },
-                            {},
-                            {
-                              "borderRadiusL": 16,
-                              "borderRadiusS": 0,
-                            },
-                          ]
-                        }
-                        testID="message-components"
-                      >
                         <View
                           style={
                             [
                               {
-                                "paddingBottom": 2,
+                                "gap": 4,
                               },
-                              {},
-                            ]
-                          }
-                        />
-                        <View
-                          collapsable={false}
-                          hitSlop={
-                            {
-                              "left": 750,
-                              "right": 750,
-                            }
-                          }
-                          style={
-                            [
                               {
-                                "alignItems": "center",
-                                "flexDirection": "row",
+                                "alignItems": "flex-start",
                               },
                               {},
-                              {},
                             ]
                           }
+                          testID="message-components"
                         >
                           <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                },
-                                {},
-                              ]
-                            }
+                            style={{}}
                           >
                             <View
-                              accessibilityState={
+                              style={
                                 {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": true,
-                                  "expanded": undefined,
-                                  "selected": undefined,
+                                  "alignSelf": "flex-end",
                                 }
                               }
-                              accessibilityValue={
+                            />
+                            <View
+                              style={
                                 {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                                  "alignSelf": "flex-start",
                                 }
                               }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                [
-                                  {
-                                    "opacity": 1,
-                                  },
-                                  {},
-                                ]
-                              }
                             >
                               <View
-                                onLayout={[Function]}
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": true,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={{}}
                               >
                                 <View
-                                  style={
-                                    [
-                                      {
-                                        "borderTopLeftRadius": 16,
-                                        "borderTopRightRadius": 16,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
-                                      },
-                                      {
-                                        "backgroundColor": "#E9EAED",
-                                        "borderBottomLeftRadius": 0,
-                                        "borderBottomRightRadius": 16,
-                                        "borderColor": "#ECEBEB",
-                                      },
-                                      {},
-                                      {},
-                                      {},
-                                    ]
-                                  }
-                                  testID="message-content-wrapper"
+                                  style={{}}
                                 >
                                   <View
                                     style={
                                       [
                                         {
-                                          "maxWidth": 250,
-                                          "paddingHorizontal": 16,
+                                          "borderTopLeftRadius": 20,
+                                          "borderTopRightRadius": 20,
+                                          "overflow": "hidden",
+                                        },
+                                        {
+                                          "backgroundColor": "#ebeef1",
+                                          "borderBottomLeftRadius": 0,
+                                          "borderBottomRightRadius": 20,
                                         },
                                         {},
-                                        undefined,
+                                        {},
+                                        {},
                                       ]
                                     }
-                                    testID="message-text-container"
+                                    testID="message-content-wrapper"
                                   >
                                     <View
                                       style={
                                         [
                                           {
-                                            "alignSelf": "stretch",
+                                            "gap": 8,
+                                            "paddingBottom": 0,
+                                            "paddingHorizontal": 8,
+                                            "paddingTop": 0,
+                                          },
+                                          {},
+                                        ]
+                                      }
+                                    />
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "maxWidth": 256,
+                                            "paddingHorizontal": 12,
                                           },
+                                          {},
                                           undefined,
                                         ]
                                       }
+                                      testID="message-text-container"
                                     >
-                                      <Text
+                                      <View
                                         style={
-                                          {
-                                            "alignItems": "flex-start",
-                                            "flexDirection": "row",
-                                            "flexWrap": "wrap",
-                                            "justifyContent": "flex-start",
-                                            "marginBottom": 8,
-                                            "marginTop": 8,
-                                          }
+                                          [
+                                            {
+                                              "alignSelf": "stretch",
+                                            },
+                                            undefined,
+                                          ]
                                         }
                                       >
                                         <Text
                                           style={
                                             {
-                                              "color": "#000000",
+                                              "alignItems": "flex-start",
+                                              "flexDirection": "row",
+                                              "flexWrap": "wrap",
+                                              "fontSize": 17,
+                                              "justifyContent": "flex-start",
+                                              "lineHeight": 20,
+                                              "marginBottom": 8,
+                                              "marginTop": 8,
                                             }
                                           }
                                         >
-                                          Message3
+                                          <Text
+                                            style={
+                                              {
+                                                "color": "#1a1b25",
+                                                "fontSize": 17,
+                                                "lineHeight": 20,
+                                              }
+                                            }
+                                          >
+                                            Message3
+                                          </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "marginTop": 4,
-                              },
-                              {},
-                            ]
-                          }
-                          testID="message-status-time"
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "fontSize": 12,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            2:50 PM
-                          </Text>
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "fontSize": 12,
-                                },
-                              ]
+                              {
+                                "marginTop": -4,
+                              }
                             }
-                          >
-                            ⦁
-                          </Text>
-                          <Text
+                          />
+                          <View
                             style={
                               [
                                 {
-                                  "fontSize": 12,
-                                },
-                                {
-                                  "color": "#7A7A7A",
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                  "justifyContent": "center",
+                                  "maxWidth": "100%",
+                                  "paddingVertical": 4,
                                 },
                                 {},
                               ]
                             }
+                            testID="message-status-time"
                           >
-                            Edited
-                          </Text>
+                            <Text
+                              style={
+                                {
+                                  "color": "#687385",
+                                  "fontSize": 13,
+                                  "fontWeight": 400,
+                                  "lineHeight": 16,
+                                }
+                              }
+                            >
+                              2:50 PM
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              Edited
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
+                <View />
               </View>
               <View
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "height": 24,
-                      "justifyContent": "center",
-                      "marginTop": 8,
-                    },
-                    {},
-                  ]
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#f6f8fa",
+                    "borderBottomColor": "#ebeef1",
+                    "borderBottomWidth": 1,
+                    "borderTopColor": "#ebeef1",
+                    "borderTopWidth": 1,
+                    "justifyContent": "center",
+                    "marginVertical": 8,
+                    "paddingVertical": 8,
+                  }
                 }
               >
-                <RNSVGSvgView
-                  bbHeight={24}
-                  bbWidth={750}
-                  focusable={false}
-                  height={24}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      {
-                        "position": "absolute",
-                      },
-                      {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 750,
-                      },
-                    ]
-                  }
-                  width={750}
-                >
-                  <RNSVGGroup
-                    fill={
-                      {
-                        "payload": 4278190080,
-                        "type": 0,
-                      }
-                    }
-                  >
-                    <RNSVGRect
-                      fill={
-                        {
-                          "brushRef": "gradient",
-                          "type": 1,
-                        }
-                      }
-                      height={24}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                      width={750}
-                      x={0}
-                      y={0}
-                    />
-                    <RNSVGDefs>
-                      <RNSVGLinearGradient
-                        gradient={
-                          [
-                            0,
-                            -197380,
-                            1,
-                            -526345,
-                          ]
-                        }
-                        gradientTransform={null}
-                        gradientUnits={1}
-                        name="gradient"
-                        x1={0}
-                        x2={0}
-                        y1={0}
-                        y2={24}
-                      />
-                    </RNSVGDefs>
-                  </RNSVGGroup>
-                </RNSVGSvgView>
                 <Text
                   style={
-                    [
-                      {
-                        "fontSize": 12,
-                        "textAlign": "center",
-                      },
-                      {
-                        "color": "#7A7A7A",
-                      },
-                      {},
-                    ]
+                    {
+                      "color": "#414552",
+                      "fontSize": 13,
+                      "fontWeight": 600,
+                      "lineHeight": 16,
+                    }
                   }
                 >
                    Replies
@@ -1839,206 +1733,789 @@ exports[`Thread should match thread snapshot 1`] = `
       <View
         style={
           {
+            "left": 0,
             "position": "absolute",
-            "top": 0,
+            "right": 0,
+            "top": 16,
           }
         }
       />
     </View>
     <View
-      onLayout={[Function]}
-      style={
-        [
-          {
-            "borderTopWidth": 1,
-            "padding": 10,
-          },
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderColor": "#00000014",
-          },
-          {},
-        ]
-      }
+      layout={BaseAnimationMock {}}
+      style={null}
     >
       <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-            },
-            {},
-          ]
-        }
+        name="message-composer"
       >
         <View
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              {},
-            ]
-          }
+          collapsable={false}
+          onLayout={[Function]}
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
-                  "paddingRight": 5,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 16,
+                },
+                {
+                  "backgroundColor": "#ffffff",
+                  "borderColor": "#d5dbe1",
+                  "borderTopWidth": 1,
+                  "paddingBottom": 16,
                 },
                 {},
               ]
             }
           >
             <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": false,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onLayout={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
               style={
                 [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 8,
+                    "justifyContent": "space-between",
+                  },
                   {},
                 ]
               }
-              testID="attach-button"
             >
-              <RNSVGSvgView
-                align="xMidYMid"
-                bbHeight={32}
-                bbWidth={32}
-                fill="#7A7A7A"
-                focusable={false}
-                height={32}
-                meetOrSlice={0}
-                minX={0}
-                minY={0}
+              <View
+                layout={BaseAnimationMock {}}
                 style={
                   [
                     {
-                      "backgroundColor": "transparent",
-                      "borderWidth": 0,
+                      "alignSelf": "flex-end",
                     },
+                    null,
+                    {},
+                  ]
+                }
+              >
+                <View
+                  entering={BaseAnimationMock {}}
+                  exiting={BaseAnimationMock {}}
+                >
+                  <View
+                    style={
+                      [
+                        {},
+                        {},
+                        {
+                          "transform": [
+                            {
+                              "rotate": "0deg",
+                            },
+                          ],
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 9999,
+                          },
+                          {
+                            "backgroundColor": undefined,
+                            "borderColor": "#d5dbe1",
+                            "borderWidth": 1,
+                            "height": 48,
+                            "width": 48,
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <View
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": false,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "paddingHorizontal": 0,
+                            },
+                            {
+                              "alignItems": "center",
+                              "borderRadius": 9999,
+                              "flex": 1,
+                              "flexDirection": "row",
+                              "gap": 8,
+                              "justifyContent": "center",
+                            },
+                          ]
+                        }
+                        testID="attach-button"
+                      >
+                        <RNSVGSvgView
+                          align="xMidYMid"
+                          bbHeight={20}
+                          bbWidth={20}
+                          focusable={false}
+                          height={20}
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
+                          stroke="#1a1b25"
+                          strokeWidth={1.5}
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              {
+                                "flex": 0,
+                                "height": 20,
+                                "width": 20,
+                              },
+                            ]
+                          }
+                          vbHeight={20}
+                          vbWidth={20}
+                          width={20}
+                        >
+                          <RNSVGGroup
+                            fill={
+                              {
+                                "payload": 4278190080,
+                                "type": 0,
+                              }
+                            }
+                            propList={
+                              [
+                                "stroke",
+                                "strokeWidth",
+                              ]
+                            }
+                            stroke={
+                              {
+                                "payload": 4279900965,
+                                "type": 0,
+                              }
+                            }
+                            strokeWidth={1.5}
+                          >
+                            <RNSVGPath
+                              d="M10 3.125V10M10 10V16.875M10 10H3.125M10 10H16.875"
+                              fill={
+                                {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                [
+                                  "stroke",
+                                  "strokeWidth",
+                                ]
+                              }
+                              stroke={
+                                {
+                                  "payload": 4279900965,
+                                  "type": 0,
+                                }
+                              }
+                              strokeWidth={1.5}
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+              <View
+                layout={BaseAnimationMock {}}
+                style={
+                  [
                     {
-                      "flex": 0,
-                      "height": 32,
-                      "width": 32,
+                      "backgroundColor": "#ffffff",
+                      "borderColor": "#d5dbe1",
+                      "borderRadius": 24,
+                      "borderWidth": 1,
+                      "flex": 1,
+                      "flexDirection": "row",
                     },
+                    null,
+                    {},
+                    null,
                   ]
                 }
-                vbHeight={32}
-                vbWidth={32}
-                width={32}
               >
-                <RNSVGGroup
-                  fill={
-                    {
-                      "payload": 4286216826,
-                      "type": 0,
-                    }
-                  }
-                  propList={
+                <View
+                  style={
                     [
-                      "fill",
+                      {
+                        "flex": 1,
+                      },
+                      {},
                     ]
                   }
                 >
-                  <RNSVGGroup
-                    clipPath="id"
-                    fill={
-                      {
-                        "payload": 4278190080,
-                        "type": 0,
-                      }
+                  <View
+                    layout={BaseAnimationMock {}}
+                    style={
+                      [
+                        {
+                          "gap": 4,
+                          "overflow": "hidden",
+                          "paddingHorizontal": 8,
+                        },
+                        {
+                          "paddingTop": 0,
+                        },
+                        {},
+                      ]
                     }
-                  >
-                    <RNSVGPath
-                      d="M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z"
-                      fill={
+                  />
+                  <View
+                    layout={BaseAnimationMock {}}
+                    style={
+                      [
                         {
-                          "payload": 4286216826,
-                          "type": 0,
-                        }
-                      }
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                  <RNSVGDefs>
-                    <RNSVGClipPath
-                      fill={
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "justifyContent": "space-between",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    <View
+                      style={
                         {
-                          "payload": 4278190080,
-                          "type": 0,
+                          "flex": 1,
                         }
                       }
-                      name="id"
                     >
-                      <RNSVGRect
-                        fill={
+                      <View
+                        style={
                           {
-                            "payload": 4278190080,
-                            "type": 0,
+                            "flexDirection": "row",
                           }
                         }
-                        height={32}
-                        matrix={
+                      >
+                        <TextInput
+                          autoFocus={false}
+                          editable={true}
+                          layout={BaseAnimationMock {}}
+                          maxLength={5000}
+                          multiline={true}
+                          onChangeText={[Function]}
+                          onSelectionChange={[Function]}
+                          placeholder="Send a message"
+                          placeholderTextColor="#687385"
+                          style={
+                            [
+                              {
+                                "alignSelf": "center",
+                                "color": "#1a1b25",
+                                "flex": 1,
+                                "fontSize": 16,
+                                "includeFontPadding": false,
+                                "lineHeight": 20,
+                                "paddingLeft": 16,
+                                "paddingVertical": 12,
+                                "textAlignVertical": "center",
+                              },
+                              {
+                                "maxHeight": 114,
+                                "paddingLeft": 16,
+                                "paddingRight": 8,
+                                "textAlign": "left",
+                              },
+                              {},
+                            ]
+                          }
+                          testID="auto-complete-text-input"
+                          value=""
+                        />
+                      </View>
+                      <View
+                        layout={BaseAnimationMock {}}
+                        style={
                           [
-                            1,
-                            0,
-                            0,
-                            1,
-                            0.191406,
-                            0,
+                            {
+                              "flexDirection": "row",
+                              "paddingBottom": 12,
+                              "paddingLeft": 12,
+                            },
+                            {},
                           ]
                         }
-                        width={32}
-                        x={0}
-                        y={0}
-                      />
-                    </RNSVGClipPath>
-                  </RNSVGDefs>
-                </RNSVGGroup>
-              </RNSVGSvgView>
+                        testID="show-thread-message-in-channel-button"
+                      >
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            {
+                              "opacity": 1,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                },
+                                {},
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderColor": "#d5dbe1",
+                                    "borderRadius": 6,
+                                    "borderWidth": 1,
+                                    "height": 20,
+                                    "justifyContent": "center",
+                                    "width": 20,
+                                  },
+                                  {},
+                                ]
+                              }
+                            />
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "lineHeight": 16,
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              Also send to channel
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                    <View
+                      layout={BaseAnimationMock {}}
+                      style={
+                        [
+                          {
+                            "alignSelf": "flex-end",
+                            "padding": 8,
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      <View
+                        entering={BaseAnimationMock {}}
+                        exiting={BaseAnimationMock {}}
+                        style={{}}
+                      >
+                        <View
+                          style={
+                            [
+                              {
+                                "borderRadius": 9999,
+                              },
+                              {
+                                "backgroundColor": "#ebeef1",
+                                "borderColor": undefined,
+                                "borderWidth": undefined,
+                                "height": 32,
+                                "width": 32,
+                              },
+                              undefined,
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": true,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "paddingHorizontal": 0,
+                                },
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 9999,
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                  "justifyContent": "center",
+                                },
+                              ]
+                            }
+                            testID="send-button"
+                          >
+                            <RNSVGSvgView
+                              align="xMidYMid"
+                              bbHeight={20}
+                              bbWidth={20}
+                              fill="none"
+                              focusable={false}
+                              height={20}
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              stroke="#a3acba"
+                              strokeWidth={1.5}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  {
+                                    "flex": 0,
+                                    "height": 20,
+                                    "width": 20,
+                                  },
+                                ]
+                              }
+                              testID="send-right"
+                              vbHeight={20}
+                              vbWidth={20}
+                              width={20}
+                            >
+                              <RNSVGGroup
+                                fill={null}
+                                propList={
+                                  [
+                                    "fill",
+                                    "stroke",
+                                    "strokeWidth",
+                                  ]
+                                }
+                                stroke={
+                                  {
+                                    "payload": 4288916666,
+                                    "type": 0,
+                                  }
+                                }
+                                strokeWidth={1.5}
+                              >
+                                <RNSVGPath
+                                  d="M4.99998 9.99996H7.70832M4.99998 9.99996L2.81076 4.05778C2.54973 3.34929 3.29006 2.68668 3.96538 3.02433L16.4259 9.25463C17.0402 9.56171 17.0402 10.4382 16.4259 10.7453L3.96538 16.9756C3.29006 17.3133 2.54973 16.6506 2.81076 15.9421L4.99998 9.99996Z"
+                                  fill={
+                                    {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                  propList={
+                                    [
+                                      "stroke",
+                                      "strokeWidth",
+                                    ]
+                                  }
+                                  stroke={
+                                    {
+                                      "payload": 4288916666,
+                                      "type": 0,
+                                    }
+                                  }
+                                  strokeWidth={1.5}
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
             </View>
           </View>
+          <View
+            style={
+              [
+                {
+                  "backgroundColor": "#ffffff",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                {
+                  "bottom": 0,
+                },
+                {},
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "flexDirection": "row",
+              "paddingBottom": 12,
+              "paddingHorizontal": 16,
+            },
+            {},
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "borderRadius": 9999,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
+                "borderWidth": undefined,
+                "height": 48,
+                "width": 48,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            hitSlop={
+              {
+                "bottom": 15,
+                "top": 15,
+              }
+            }
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "paddingHorizontal": 0,
+                },
+                {
+                  "alignItems": "center",
+                  "borderRadius": 9999,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "gap": 8,
+                  "justifyContent": "center",
+                },
+              ]
+            }
+            testID="upload-photo-touchable"
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={14}
+              bbWidth={14}
+              fill="#1a1b25"
+              focusable={false}
+              height={14}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              strokeWidth={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "flex": 0,
+                    "height": 14,
+                    "width": 14,
+                  },
+                ]
+              }
+              vbHeight={16}
+              vbWidth={16}
+              width={14}
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4279900965,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "fill",
+                    "strokeWidth",
+                  ]
+                }
+                strokeWidth={0}
+              >
+                <RNSVGPath
+                  d="M5.47018 8.8035L6.00051 8.27317L6.00049 8.27316L5.47018 8.8035ZM3.11316 8.8035L2.58284 8.27316L2.58283 8.27317L3.11316 8.8035ZM11.1667 14.5L11.697 13.9697L6.00051 8.27317L5.47018 8.8035L4.93984 9.33383L10.6363 15.0303L11.1667 14.5ZM5.47018 8.8035L6.00049 8.27316C5.05674 7.32945 3.5266 7.32945 2.58284 8.27316L3.11316 8.8035L3.64347 9.33384C4.00145 8.97589 4.58188 8.97589 4.93986 9.33384L5.47018 8.8035ZM3.11316 8.8035L2.58283 8.27317L0.219669 10.6363L0.75 11.1667L1.28033 11.697L3.64349 9.33383L3.11316 8.8035ZM11.1667 14.5V15.25H12.8333V14.5V13.75H11.1667V14.5ZM12.8333 14.5V15.25C14.168 15.25 15.25 14.168 15.25 12.8333H14.5H13.75C13.75 13.3396 13.3396 13.75 12.8333 13.75V14.5ZM14.5 12.8333H15.25V2.41667H14.5H13.75V12.8333H14.5ZM14.5 2.41667H15.25C15.25 1.08199 14.1681 0 12.8333 0V0.75V1.5C13.3396 1.5 13.75 1.9104 13.75 2.41667H14.5ZM12.8333 0.75V0H2.41667V0.75V1.5H12.8333V0.75ZM2.41667 0.75V0C1.08198 0 0 1.08198 0 2.41667H0.75H1.5C1.5 1.91041 1.91041 1.5 2.41667 1.5V0.75ZM0.75 2.41667H0V11.1667H0.75H1.5V2.41667H0.75ZM11.1667 14.5V13.75H2.41667V14.5V15.25H11.1667V14.5ZM2.41667 14.5V13.75C1.9104 13.75 1.5 13.3396 1.5 12.8333H0.75H0C0 14.1681 1.08199 15.25 2.41667 15.25V14.5ZM0.75 12.8333H1.5V11.1667H0.75H0V12.8333H0.75ZM9.70833 7.20833V7.95833C11.043 7.95833 12.125 6.87638 12.125 5.54167H11.375H10.625C10.625 6.04795 10.2146 6.45833 9.70833 6.45833V7.20833ZM11.375 5.54167H12.125C12.125 4.20699 11.0431 3.125 9.70833 3.125V3.875V4.625C10.2146 4.625 10.625 5.0354 10.625 5.54167H11.375ZM9.70833 3.875V3.125C8.37361 3.125 7.29167 4.20699 7.29167 5.54167H8.04167H8.79167C8.79167 5.0354 9.20205 4.625 9.70833 4.625V3.875ZM8.04167 5.54167H7.29167C7.29167 6.87638 8.37362 7.95833 9.70833 7.95833V7.20833V6.45833C9.20205 6.45833 8.79167 6.04795 8.79167 5.54167H8.04167Z"
+                  fill={
+                    {
+                      "payload": 4279900965,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                      "strokeWidth",
+                    ]
+                  }
+                  strokeWidth={0}
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "borderRadius": 9999,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
+                "borderWidth": undefined,
+                "height": 48,
+                "width": 48,
+              },
+              undefined,
+            ]
+          }
+        >
           <View
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
-                "disabled": undefined,
+                "disabled": false,
                 "expanded": undefined,
                 "selected": undefined,
               }
@@ -2054,6 +2531,12 @@ exports[`Thread should match thread snapshot 1`] = `
             accessible={true}
             collapsable={false}
             focusable={true}
+            hitSlop={
+              {
+                "bottom": 15,
+                "top": 15,
+              }
+            }
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2065,21 +2548,35 @@ exports[`Thread should match thread snapshot 1`] = `
             onStartShouldSetResponder={[Function]}
             style={
               [
-                {},
+                {
+                  "backgroundColor": "transparent",
+                  "paddingHorizontal": 0,
+                },
+                {
+                  "alignItems": "center",
+                  "borderRadius": 9999,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "gap": 8,
+                  "justifyContent": "center",
+                },
               ]
             }
-            testID="commands-button"
+            testID="take-photo-touchable"
           >
             <RNSVGSvgView
               align="xMidYMid"
-              bbHeight={32}
-              bbWidth={32}
-              fill="#7A7A7A"
+              bbHeight={14}
+              bbWidth={14}
+              fill="none"
               focusable={false}
-              height={32}
+              height={14}
               meetOrSlice={0}
               minX={0}
               minY={0}
+              stroke="#1a1b25"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
               style={
                 [
                   {
@@ -2088,41 +2585,77 @@ exports[`Thread should match thread snapshot 1`] = `
                   },
                   {
                     "flex": 0,
-                    "height": 32,
-                    "width": 32,
+                    "height": 14,
+                    "width": 14,
                   },
                 ]
               }
-              vbHeight={32}
-              vbWidth={32}
-              width={32}
+              vbHeight={16}
+              vbWidth={17}
+              width={14}
             >
               <RNSVGGroup
-                fill={
-                  {
-                    "payload": 4286216826,
-                    "type": 0,
-                  }
-                }
+                fill={null}
                 propList={
                   [
                     "fill",
+                    "stroke",
+                    "strokeWidth",
+                    "strokeLinejoin",
                   ]
                 }
+                stroke={
+                  {
+                    "payload": 4279900965,
+                    "type": 0,
+                  }
+                }
+                strokeLinejoin={1}
+                strokeWidth={1.5}
               >
                 <RNSVGPath
-                  d="M14.8522 28H13.5188L14.8522 18.6667H10.1855C9.01218 18.6667 9.74551 17.6667 9.77218 17.6267C11.4922 14.5867 14.0788 10.0533 17.5322 4H18.8655L17.5322 13.3333H22.2122C22.7455 13.3333 23.0388 13.5867 22.7455 14.2133C17.4788 23.4 14.8522 28 14.8522 28Z"
+                  d="M2.41667 3.25H3.81636C4.37362 3.25 4.894 2.9715 5.20311 2.50783L5.88022 1.49217C6.18933 1.0285 6.70972 0.75 7.267 0.75H9.64967C10.2069 0.75 10.7273 1.0285 11.0364 1.49217L11.7136 2.50783C12.0227 2.9715 12.5431 3.25 13.1003 3.25H14.5C15.4205 3.25 16.1667 3.99619 16.1667 4.91667V12.8333C16.1667 13.7538 15.4205 14.5 14.5 14.5H2.41667C1.49619 14.5 0.75 13.7538 0.75 12.8333V4.91667C0.75 3.99619 1.49619 3.25 2.41667 3.25Z"
                   fill={
                     {
-                      "payload": 4286216826,
+                      "payload": 4278190080,
                       "type": 0,
                     }
                   }
                   propList={
                     [
-                      "fill",
+                      "stroke",
+                      "strokeWidth",
+                    ]
+                  }
+                  stroke={
+                    {
+                      "payload": 4279900965,
+                      "type": 0,
+                    }
+                  }
+                  strokeWidth={1.5}
+                />
+                <RNSVGPath
+                  d="M11.1667 8.45833C11.1667 9.95408 9.95408 11.1667 8.45833 11.1667C6.96258 11.1667 5.75 9.95408 5.75 8.45833C5.75 6.96258 6.96258 5.75 8.45833 5.75C9.95408 5.75 11.1667 6.96258 11.1667 8.45833Z"
+                  fill={
+                    {
+                      "payload": 4278190080,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "stroke",
+                      "strokeWidth",
                     ]
                   }
+                  stroke={
+                    {
+                      "payload": 4279900965,
+                      "type": 0,
+                    }
+                  }
+                  strokeWidth={1.5}
                 />
               </RNSVGGroup>
             </RNSVGSvgView>
@@ -2132,68 +2665,161 @@ exports[`Thread should match thread snapshot 1`] = `
           style={
             [
               {
-                "borderRadius": 20,
-                "borderWidth": 1,
-                "flex": 1,
-                "marginHorizontal": 10,
+                "borderRadius": 9999,
               },
               {
-                "borderColor": "#ECEBEB",
+                "backgroundColor": undefined,
+                "borderColor": undefined,
+                "borderWidth": undefined,
+                "height": 48,
+                "width": 48,
               },
-              {},
-              null,
+              undefined,
             ]
           }
         >
           <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            hitSlop={
+              {
+                "bottom": 15,
+                "top": 15,
+              }
+            }
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
+                {
+                  "backgroundColor": "transparent",
+                  "paddingHorizontal": 0,
+                },
                 {
                   "alignItems": "center",
+                  "borderRadius": 9999,
+                  "flex": 1,
                   "flexDirection": "row",
+                  "gap": 8,
+                  "justifyContent": "center",
                 },
-                {},
               ]
             }
+            testID="upload-file-touchable"
           >
-            <TextInput
-              autoFocus={true}
-              editable={true}
-              maxLength={5000}
-              multiline={true}
-              onChangeText={[Function]}
-              onContentSizeChange={[Function]}
-              onSelectionChange={[Function]}
-              placeholder="Send a message"
-              placeholderTextColor="#7A7A7A"
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={14}
+              bbWidth={14}
+              fill="none"
+              focusable={false}
+              height={14}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              stroke="#1a1b25"
+              strokeWidth={1.5}
               style={
                 [
                   {
-                    "flex": 1,
-                    "fontSize": 16,
-                    "includeFontPadding": false,
-                    "paddingVertical": 12,
-                    "textAlignVertical": "center",
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
                   },
                   {
-                    "color": "#000000",
-                    "maxHeight": 85,
-                    "paddingHorizontal": 16,
-                    "textAlign": "left",
+                    "flex": 0,
+                    "height": 14,
+                    "width": 14,
                   },
-                  {},
                 ]
               }
-              testID="auto-complete-text-input"
-              value=""
-            />
+              vbHeight={17}
+              vbWidth={14}
+              width={14}
+            >
+              <RNSVGGroup
+                fill={null}
+                propList={
+                  [
+                    "fill",
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4279900965,
+                    "type": 0,
+                  }
+                }
+                strokeWidth={1.5}
+              >
+                <RNSVGPath
+                  d="M7.41667 1.16667V4.5C7.41667 5.42047 8.16283 6.16667 9.08333 6.16667H12.4167M6.72633 0.75H2.41667C1.49619 0.75 0.75 1.49619 0.75 2.41667V14.5C0.75 15.4205 1.49619 16.1667 2.41667 16.1667H11.1667C12.0872 16.1667 12.8333 15.4205 12.8333 14.5V6.857C12.8333 6.41499 12.6578 5.99108 12.3452 5.67851L7.90483 1.23816C7.59225 0.925592 7.16833 0.75 6.72633 0.75Z"
+                  fill={
+                    {
+                      "payload": 4278190080,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinejoin",
+                    ]
+                  }
+                  stroke={
+                    {
+                      "payload": 4279900965,
+                      "type": 0,
+                    }
+                  }
+                  strokeLinejoin={1}
+                  strokeWidth={1.5}
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
           </View>
         </View>
         <View
           style={
             [
-              {},
-              {},
+              {
+                "borderRadius": 9999,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
+                "borderWidth": undefined,
+                "height": 48,
+                "width": 48,
+              },
+              undefined,
             ]
           }
         >
@@ -2202,7 +2828,7 @@ exports[`Thread should match thread snapshot 1`] = `
               {
                 "busy": undefined,
                 "checked": undefined,
-                "disabled": true,
+                "disabled": false,
                 "expanded": undefined,
                 "selected": undefined,
               }
@@ -2218,6 +2844,12 @@ exports[`Thread should match thread snapshot 1`] = `
             accessible={true}
             collapsable={false}
             focusable={true}
+            hitSlop={
+              {
+                "bottom": 15,
+                "top": 15,
+              }
+            }
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2229,21 +2861,34 @@ exports[`Thread should match thread snapshot 1`] = `
             onStartShouldSetResponder={[Function]}
             style={
               [
-                {},
+                {
+                  "backgroundColor": "transparent",
+                  "paddingHorizontal": 0,
+                },
+                {
+                  "alignItems": "center",
+                  "borderRadius": 9999,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "gap": 8,
+                  "justifyContent": "center",
+                },
               ]
             }
-            testID="send-button"
+            testID="commands-touchable"
           >
             <RNSVGSvgView
               align="xMidYMid"
-              bbHeight={32}
-              bbWidth={32}
-              fill="#DBDBDB"
+              bbHeight={14}
+              bbWidth={14}
+              fill="none"
               focusable={false}
-              height={32}
+              height={14}
               meetOrSlice={0}
               minX={0}
               minY={0}
+              stroke="#1a1b25"
+              strokeWidth={1.5}
               style={
                 [
                   {
@@ -2252,220 +2897,62 @@ exports[`Thread should match thread snapshot 1`] = `
                   },
                   {
                     "flex": 0,
-                    "height": 32,
-                    "width": 32,
+                    "height": 14,
+                    "width": 14,
                   },
                 ]
               }
-              testID="send-right"
-              vbHeight={32}
-              vbWidth={32}
-              width={32}
+              vbHeight={16}
+              vbWidth={16}
+              width={14}
             >
               <RNSVGGroup
-                fill={
-                  {
-                    "payload": 4292598747,
-                    "type": 0,
-                  }
-                }
+                fill={null}
                 propList={
                   [
                     "fill",
+                    "stroke",
+                    "strokeWidth",
                   ]
                 }
+                stroke={
+                  {
+                    "payload": 4279900965,
+                    "type": 0,
+                  }
+                }
+                strokeWidth={1.5}
               >
-                <RNSVGCircle
-                  cx={16}
-                  cy={16}
+                <RNSVGPath
+                  d="M5.75 11.5833L9.5 3.66667M2.41667 0.75H12.8333C13.7538 0.75 14.5 1.49619 14.5 2.41667V12.8333C14.5 13.7538 13.7538 14.5 12.8333 14.5H2.41667C1.49619 14.5 0.75 13.7538 0.75 12.8333V2.41667C0.75 1.49619 1.49619 0.75 2.41667 0.75Z"
                   fill={
                     {
-                      "payload": 4292598747,
+                      "payload": 4278190080,
                       "type": 0,
                     }
                   }
                   propList={
                     [
-                      "fill",
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinejoin",
                     ]
                   }
-                  r={16}
-                />
-                <RNSVGPath
-                  clipRule={0}
-                  d="M9.33398 14.6666H16.0007V9.33325L22.6673 15.9999L16.0007 22.6666V17.3333H9.33398V14.6666Z"
-                  fill={
+                  stroke={
                     {
-                      "payload": 4294967295,
+                      "payload": 4279900965,
                       "type": 0,
                     }
                   }
-                  fillRule={0}
-                  propList={
-                    [
-                      "fill",
-                      "fillRule",
-                    ]
-                  }
+                  strokeLinejoin={1}
+                  strokeWidth={1.5}
                 />
               </RNSVGGroup>
             </RNSVGSvgView>
           </View>
         </View>
       </View>
-      <View
-        style={
-          [
-            {
-              "flexDirection": "row",
-              "marginHorizontal": 2,
-              "marginTop": 8,
-            },
-            {},
-          ]
-        }
-        testID="show-thread-message-in-channel-button"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                },
-                {},
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "borderRadius": 3,
-                    "borderWidth": 2,
-                    "height": 16,
-                    "justifyContent": "center",
-                    "width": 16,
-                  },
-                  {
-                    "borderColor": "#7A7A7A",
-                  },
-                ]
-              }
-            />
-            <Text
-              style={
-                [
-                  {
-                    "fontSize": 13,
-                    "marginLeft": 12,
-                  },
-                  {
-                    "color": "#7A7A7A",
-                  },
-                  {},
-                ]
-              }
-            >
-              Also send to channel
-            </Text>
-          </View>
-        </View>
-      </View>
     </View>
-    <View
-      style={
-        [
-          {
-            "position": "absolute",
-            "width": "100%",
-          },
-          {
-            "bottom": 0,
-          },
-          {},
-        ]
-      }
-    />
-  </View>
-  <View
-    enablePanDownToClose={true}
-    handleComponent={[Function]}
-    handleHeight={20}
-    index={-1}
-    onChange={[Function]}
-    snapPoints={
-      [
-        600.3000000000001,
-        1334,
-      ]
-    }
-  >
-    <RCTScrollView
-      contentContainerStyle={
-        {
-          "backgroundColor": "#FFFFFF",
-          "flexGrow": 1,
-          "opacity": 1,
-        }
-      }
-      data={[]}
-      getItem={[Function]}
-      getItemCount={[Function]}
-      keyExtractor={[Function]}
-      onContentSizeChange={[Function]}
-      onEndReached={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      removeClippedSubviews={false}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      stickyHeaderIndices={[]}
-      testID="attachment-picker-list"
-      viewabilityConfigCallbackPairs={[]}
-    >
-      <View />
-    </RCTScrollView>
   </View>
 </View>
 `;