stream-chat-react-native-core 4.0.0 → 4.1.0

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

@@ -11,7 +11,6 @@ exports[`Thread should match thread snapshot 1`] = `
   }
 >
   <View
-    collapsable={false}
     style={
       Object {
         "height": "100%",
@@ -19,29 +18,48 @@ exports[`Thread should match thread snapshot 1`] = `
     }
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "alignItems": "center",
-          "flex": 1,
-          "width": "100%",
-        }
+        Array [
+          Object {
+            "alignItems": "center",
+            "flex": 1,
+            "width": "100%",
+          },
+          Object {
+            "backgroundColor": "#FCFCFC",
+          },
+          Object {},
+        ]
       }
+      testID="message-flat-list-wrapper"
     >
       <RCTScrollView
+        ListEmptyComponent={[Function]}
         ListFooterComponent={null}
+        ListHeaderComponent={[Function]}
+        contentContainerStyle={
+          Array [
+            Object {
+              "flexGrow": 1,
+              "paddingBottom": 4,
+            },
+            Object {},
+          ]
+        }
         data={
           Array [
             Object {
               "__html": "<p>regular</p>",
               "attachments": Array [],
               "created_at": 2020-05-05T14:50:00.000Z,
+              "dateSeparator": undefined,
               "groupStyles": Array [
                 "single",
               ],
               "html": "<p>regular</p>",
               "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+              "pinned_at": null,
               "readBy": false,
               "status": "received",
               "text": "Message6",
@@ -50,9 +68,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "GrantyBoi2",
-                "image": "https://i.imgur.com/SLx06PP.png",
-                "name": "Grant",
+                "id": "arthur",
+                "image": "https://i.imgur.com/LuuGvh0.png",
+                "name": "Arthur",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -62,12 +80,14 @@ exports[`Thread should match thread snapshot 1`] = `
               "__html": "<p>regular</p>",
               "attachments": Array [],
               "created_at": 2020-05-05T14:50:00.000Z,
+              "dateSeparator": undefined,
               "groupStyles": Array [
                 "single",
               ],
               "html": "<p>regular</p>",
               "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+              "pinned_at": null,
               "readBy": false,
               "status": "received",
               "text": "Message5",
@@ -76,9 +96,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "NeiliBoi3",
-                "image": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
-                "name": "Neil",
+                "id": "finn",
+                "image": "https://i.imgur.com/spueyAP.png",
+                "name": "Finn",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -88,12 +108,14 @@ exports[`Thread should match thread snapshot 1`] = `
               "__html": "<p>regular</p>",
               "attachments": Array [],
               "created_at": 2020-05-05T14:50:00.000Z,
+              "dateSeparator": 2020-05-05T14:50:00.000Z,
               "groupStyles": Array [
                 "single",
               ],
               "html": "<p>regular</p>",
               "id": "82a83b16-b611-527c-b3ac-765ef6220490",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
+              "pinned_at": null,
               "readBy": false,
               "status": "received",
               "text": "Message4",
@@ -102,20 +124,14 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "GrantyBoi2",
-                "image": "https://i.imgur.com/SLx06PP.png",
-                "name": "Grant",
+                "id": "arthur",
+                "image": "https://i.imgur.com/LuuGvh0.png",
+                "name": "Arthur",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
               },
             },
-            Object {
-              "date": 2020-05-05T14:50:00.000Z,
-              "groupStyles": Array [],
-              "readBy": false,
-              "type": "message.date",
-            },
           ]
         }
         disableVirtualization={false}
@@ -135,17 +151,18 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         }
         maxToRenderPerBatch={10}
-        numColumns={1}
         onContentSizeChange={[Function]}
-        onEndReached={[Function]}
         onEndReachedThreshold={2}
         onLayout={[Function]}
         onMomentumScrollEnd={[Function]}
         onScroll={[Function]}
         onScrollBeginDrag={[Function]}
         onScrollEndDrag={[Function]}
+        onTouchEnd={[Function]}
+        onViewableItemsChanged={[Function]}
         removeClippedSubviews={false}
         renderItem={[Function]}
+        scrollEnabled={false}
         scrollEventThrottle={50}
         stickyHeaderIndices={Array []}
         style={
@@ -160,7 +177,6 @@ exports[`Thread should match thread snapshot 1`] = `
             Array [
               Object {
                 "flex": 1,
-                "paddingHorizontal": 10,
                 "width": "100%",
               },
               Object {},
@@ -169,10 +185,36 @@ exports[`Thread should match thread snapshot 1`] = `
         }
         testID="message-flat-list"
         updateCellsBatchingPeriod={50}
-        viewabilityConfigCallbackPairs={Array []}
+        viewabilityConfig={
+          Object {
+            "viewAreaCoveragePercentThreshold": 1,
+          }
+        }
+        viewabilityConfigCallbackPairs={
+          Array [
+            Object {
+              "onViewableItemsChanged": [Function],
+              "viewabilityConfig": Object {
+                "viewAreaCoveragePercentThreshold": 1,
+              },
+            },
+          ]
+        }
         windowSize={21}
       >
         <View>
+          <View
+            onLayout={[Function]}
+            style={
+              Object {
+                "transform": Array [
+                  Object {
+                    "scaleY": -1,
+                  },
+                ],
+              }
+            }
+          />
           <View
             onLayout={[Function]}
             style={
@@ -191,191 +233,232 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "flex-end",
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "justifyContent": "flex-start",
-                    "marginBottom": 8,
-                    "marginTop": 0,
-                  },
-                  Object {},
-                ]
-              }
-              testID="message-simple-wrapper"
+              testID="message-list-item-0"
             >
               <View
                 style={
                   Array [
-                    Object {
-                      "marginRight": 8,
-                    },
-                    Object {},
+                    undefined,
                   ]
                 }
-                testID="message-avatar"
+                testID="message-wrapper"
               >
                 <View
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "justifyContent": "center",
+                        "paddingHorizontal": 8,
                       },
-                      Object {},
-                      undefined,
-                    ]
-                  }
-                >
-                  <Image
-                    accessibilityLabel="initials"
-                    onError={[Function]}
-                    resizeMethod="resize"
-                    source={
                       Object {
-                        "uri": "https://i.imgur.com/SLx06PP.png",
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "borderRadius": 16,
-                          "height": 32,
-                          "width": 32,
-                        },
-                        Object {},
-                      ]
-                    }
-                    testID="avatar-image"
-                  />
-                </View>
-              </View>
-              <View
-                accessible={true}
-                focusable={false}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "alignItems": "flex-start",
-                    "borderBottomLeftRadius": 2,
-                    "borderBottomRightRadius": 16,
-                    "borderTopLeftRadius": 16,
-                    "borderTopRightRadius": 16,
-                    "justifyContent": "flex-start",
-                    "opacity": 1,
+                        "backgroundColor": undefined,
+                      },
+                    ]
                   }
-                }
-              >
-                <View
-                  onLayout={[Function]}
                 >
                   <View
                     style={
                       Array [
-                        Object {
-                          "alignItems": "flex-start",
-                        },
                         Object {},
                       ]
                     }
-                    testID="message-content-wrapper"
                   >
                     <View
                       style={
                         Array [
                           Object {
-                            "marginTop": 2,
-                            "maxWidth": 250,
-                            "paddingHorizontal": 16,
+                            "alignItems": "flex-end",
+                            "flexDirection": "row",
                           },
                           Object {
-                            "alignSelf": "flex-start",
-                            "borderColor": "#00000014",
-                            "borderWidth": 0.5,
-                          },
-                          Object {
-                            "backgroundColor": "#FFFFFF",
-                            "borderBottomLeftRadius": 2,
-                            "borderBottomRightRadius": 16,
-                            "borderTopLeftRadius": 16,
-                            "borderTopRightRadius": 16,
+                            "justifyContent": "flex-start",
+                            "marginBottom": 8,
+                            "marginTop": 0,
                           },
                           Object {},
                         ]
                       }
-                      testID="message-text-container"
+                      testID="message-simple-wrapper"
                     >
                       <View
                         style={
                           Array [
                             Object {
-                              "alignSelf": "stretch",
+                              "marginRight": 8,
                             },
-                            undefined,
+                            Object {},
                           ]
                         }
+                        testID="message-avatar"
+                      >
+                        <View>
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "borderRadius": 16,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                                Object {},
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Image
+                              accessibilityLabel="avatar-image"
+                              onError={[Function]}
+                              source={
+                                Object {
+                                  "uri": "https://i.imgur.com/LuuGvh0.png",
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  undefined,
+                                ]
+                              }
+                              testID="avatar-image"
+                            />
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        style={
+                          Object {
+                            "alignItems": "flex-start",
+                            "opacity": 1,
+                            "paddingTop": 2,
+                          }
+                        }
+                        testID="message-content"
                       >
-                        <Text
+                        <View
+                          onLayout={[Function]}
+                          style={Object {}}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "borderTopLeftRadius": 16,
+                                  "borderTopRightRadius": 16,
+                                  "borderWidth": 1,
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderBottomLeftRadius": 0,
+                                  "borderBottomRightRadius": 16,
+                                  "borderColor": "#ECEBEB",
+                                },
+                                Object {},
+                                Object {},
+                              ]
+                            }
+                            testID="message-content-wrapper"
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "maxWidth": 250,
+                                    "paddingHorizontal": 16,
+                                  },
+                                  Object {},
+                                  undefined,
+                                ]
+                              }
+                              testID="message-text-container"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignSelf": "stretch",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                <Text
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-start",
+                                      "flexDirection": "row",
+                                      "flexWrap": "wrap",
+                                      "justifyContent": "flex-start",
+                                      "marginBottom": 8,
+                                      "marginTop": 8,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      Object {
+                                        "color": "#000000",
+                                      }
+                                    }
+                                  >
+                                    Message6
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
                           style={
                             Object {
-                              "alignItems": "flex-start",
                               "flexDirection": "row",
-                              "flexWrap": "wrap",
-                              "justifyContent": "flex-start",
-                              "marginBottom": 0,
-                              "marginTop": 0,
+                              "marginTop": 4,
                             }
                           }
+                          testID="message-status-time"
                         >
                           <Text
                             style={
-                              Object {
-                                "color": "#222222",
-                              }
+                              Array [
+                                Object {
+                                  "color": "#7A7A7A",
+                                  "textAlign": "left",
+                                },
+                                Object {
+                                  "fontSize": 12,
+                                },
+                              ]
                             }
                           >
-                            Message6
+                            2:50 PM
                           </Text>
-                        </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                      "marginTop": 4,
-                    }
-                  }
-                  testID="message-status-time"
-                >
-                  <Text
-                    style={
-                      Array [
-                        Object {
-                          "textAlign": "left",
-                        },
-                        Object {
-                          "color": "#00000080",
-                          "fontSize": 12,
-                        },
-                      ]
-                    }
-                  >
-                    2:50 PM
-                  </Text>
-                </View>
               </View>
             </View>
           </View>
@@ -397,191 +480,232 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "flex-end",
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "justifyContent": "flex-start",
-                    "marginBottom": 8,
-                    "marginTop": 0,
-                  },
-                  Object {},
-                ]
-              }
-              testID="message-simple-wrapper"
+              testID="message-list-item-1"
             >
               <View
                 style={
                   Array [
-                    Object {
-                      "marginRight": 8,
-                    },
-                    Object {},
+                    undefined,
                   ]
                 }
-                testID="message-avatar"
+                testID="message-wrapper"
               >
                 <View
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "justifyContent": "center",
+                        "paddingHorizontal": 8,
                       },
-                      Object {},
-                      undefined,
-                    ]
-                  }
-                >
-                  <Image
-                    accessibilityLabel="initials"
-                    onError={[Function]}
-                    resizeMethod="resize"
-                    source={
                       Object {
-                        "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "borderRadius": 16,
-                          "height": 32,
-                          "width": 32,
-                        },
-                        Object {},
-                      ]
-                    }
-                    testID="avatar-image"
-                  />
-                </View>
-              </View>
-              <View
-                accessible={true}
-                focusable={false}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "alignItems": "flex-start",
-                    "borderBottomLeftRadius": 2,
-                    "borderBottomRightRadius": 16,
-                    "borderTopLeftRadius": 16,
-                    "borderTopRightRadius": 16,
-                    "justifyContent": "flex-start",
-                    "opacity": 1,
+                        "backgroundColor": undefined,
+                      },
+                    ]
                   }
-                }
-              >
-                <View
-                  onLayout={[Function]}
                 >
                   <View
                     style={
                       Array [
-                        Object {
-                          "alignItems": "flex-start",
-                        },
                         Object {},
                       ]
                     }
-                    testID="message-content-wrapper"
                   >
                     <View
                       style={
                         Array [
                           Object {
-                            "marginTop": 2,
-                            "maxWidth": 250,
-                            "paddingHorizontal": 16,
-                          },
-                          Object {
-                            "alignSelf": "flex-start",
-                            "borderColor": "#00000014",
-                            "borderWidth": 0.5,
+                            "alignItems": "flex-end",
+                            "flexDirection": "row",
                           },
                           Object {
-                            "backgroundColor": "#FFFFFF",
-                            "borderBottomLeftRadius": 2,
-                            "borderBottomRightRadius": 16,
-                            "borderTopLeftRadius": 16,
-                            "borderTopRightRadius": 16,
+                            "justifyContent": "flex-start",
+                            "marginBottom": 8,
+                            "marginTop": 0,
                           },
                           Object {},
                         ]
                       }
-                      testID="message-text-container"
+                      testID="message-simple-wrapper"
                     >
                       <View
                         style={
                           Array [
                             Object {
-                              "alignSelf": "stretch",
+                              "marginRight": 8,
                             },
-                            undefined,
+                            Object {},
                           ]
                         }
+                        testID="message-avatar"
+                      >
+                        <View>
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "borderRadius": 16,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                                Object {},
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Image
+                              accessibilityLabel="avatar-image"
+                              onError={[Function]}
+                              source={
+                                Object {
+                                  "uri": "https://i.imgur.com/spueyAP.png",
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  undefined,
+                                ]
+                              }
+                              testID="avatar-image"
+                            />
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        style={
+                          Object {
+                            "alignItems": "flex-start",
+                            "opacity": 1,
+                            "paddingTop": 2,
+                          }
+                        }
+                        testID="message-content"
                       >
-                        <Text
+                        <View
+                          onLayout={[Function]}
+                          style={Object {}}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "borderTopLeftRadius": 16,
+                                  "borderTopRightRadius": 16,
+                                  "borderWidth": 1,
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderBottomLeftRadius": 0,
+                                  "borderBottomRightRadius": 16,
+                                  "borderColor": "#ECEBEB",
+                                },
+                                Object {},
+                                Object {},
+                              ]
+                            }
+                            testID="message-content-wrapper"
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "maxWidth": 250,
+                                    "paddingHorizontal": 16,
+                                  },
+                                  Object {},
+                                  undefined,
+                                ]
+                              }
+                              testID="message-text-container"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignSelf": "stretch",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                <Text
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-start",
+                                      "flexDirection": "row",
+                                      "flexWrap": "wrap",
+                                      "justifyContent": "flex-start",
+                                      "marginBottom": 8,
+                                      "marginTop": 8,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      Object {
+                                        "color": "#000000",
+                                      }
+                                    }
+                                  >
+                                    Message5
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
                           style={
                             Object {
-                              "alignItems": "flex-start",
                               "flexDirection": "row",
-                              "flexWrap": "wrap",
-                              "justifyContent": "flex-start",
-                              "marginBottom": 0,
-                              "marginTop": 0,
+                              "marginTop": 4,
                             }
                           }
+                          testID="message-status-time"
                         >
                           <Text
                             style={
-                              Object {
-                                "color": "#222222",
-                              }
+                              Array [
+                                Object {
+                                  "color": "#7A7A7A",
+                                  "textAlign": "left",
+                                },
+                                Object {
+                                  "fontSize": 12,
+                                },
+                              ]
                             }
                           >
-                            Message5
+                            2:50 PM
                           </Text>
-                        </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                      "marginTop": 4,
-                    }
-                  }
-                  testID="message-status-time"
-                >
-                  <Text
-                    style={
-                      Array [
-                        Object {
-                          "textAlign": "left",
-                        },
-                        Object {
-                          "color": "#00000080",
-                          "fontSize": 12,
-                        },
-                      ]
-                    }
-                  >
-                    2:50 PM
-                  </Text>
-                </View>
               </View>
             </View>
           </View>
@@ -603,283 +727,271 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "flex-end",
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "justifyContent": "flex-start",
-                    "marginBottom": 8,
-                    "marginTop": 0,
-                  },
-                  Object {},
-                ]
-              }
-              testID="message-simple-wrapper"
+              testID="message-list-item-2"
             >
               <View
                 style={
                   Array [
-                    Object {
-                      "marginRight": 8,
-                    },
-                    Object {},
+                    undefined,
                   ]
                 }
-                testID="message-avatar"
+                testID="message-wrapper"
               >
                 <View
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "justifyContent": "center",
+                        "paddingHorizontal": 8,
                       },
-                      Object {},
-                      undefined,
-                    ]
-                  }
-                >
-                  <Image
-                    accessibilityLabel="initials"
-                    onError={[Function]}
-                    resizeMethod="resize"
-                    source={
                       Object {
-                        "uri": "https://i.imgur.com/SLx06PP.png",
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "borderRadius": 16,
-                          "height": 32,
-                          "width": 32,
-                        },
-                        Object {},
-                      ]
-                    }
-                    testID="avatar-image"
-                  />
-                </View>
-              </View>
-              <View
-                accessible={true}
-                focusable={false}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "alignItems": "flex-start",
-                    "borderBottomLeftRadius": 2,
-                    "borderBottomRightRadius": 16,
-                    "borderTopLeftRadius": 16,
-                    "borderTopRightRadius": 16,
-                    "justifyContent": "flex-start",
-                    "opacity": 1,
+                        "backgroundColor": undefined,
+                      },
+                    ]
                   }
-                }
-              >
-                <View
-                  onLayout={[Function]}
                 >
                   <View
                     style={
                       Array [
-                        Object {
-                          "alignItems": "flex-start",
-                        },
                         Object {},
                       ]
                     }
-                    testID="message-content-wrapper"
                   >
                     <View
                       style={
                         Array [
                           Object {
-                            "marginTop": 2,
-                            "maxWidth": 250,
-                            "paddingHorizontal": 16,
-                          },
-                          Object {
-                            "alignSelf": "flex-start",
-                            "borderColor": "#00000014",
-                            "borderWidth": 0.5,
+                            "alignItems": "flex-end",
+                            "flexDirection": "row",
                           },
                           Object {
-                            "backgroundColor": "#FFFFFF",
-                            "borderBottomLeftRadius": 2,
-                            "borderBottomRightRadius": 16,
-                            "borderTopLeftRadius": 16,
-                            "borderTopRightRadius": 16,
+                            "justifyContent": "flex-start",
+                            "marginBottom": 8,
+                            "marginTop": 0,
                           },
                           Object {},
                         ]
                       }
-                      testID="message-text-container"
+                      testID="message-simple-wrapper"
                     >
                       <View
                         style={
                           Array [
                             Object {
-                              "alignSelf": "stretch",
+                              "marginRight": 8,
                             },
-                            undefined,
+                            Object {},
                           ]
                         }
+                        testID="message-avatar"
                       >
-                        <Text
-                          style={
-                            Object {
-                              "alignItems": "flex-start",
-                              "flexDirection": "row",
-                              "flexWrap": "wrap",
-                              "justifyContent": "flex-start",
-                              "marginBottom": 0,
-                              "marginTop": 0,
+                        <View>
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "borderRadius": 16,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                                Object {},
+                                undefined,
+                              ]
                             }
+                          >
+                            <Image
+                              accessibilityLabel="avatar-image"
+                              onError={[Function]}
+                              source={
+                                Object {
+                                  "uri": "https://i.imgur.com/LuuGvh0.png",
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  undefined,
+                                ]
+                              }
+                              testID="avatar-image"
+                            />
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        style={
+                          Object {
+                            "alignItems": "flex-start",
+                            "opacity": 1,
+                            "paddingTop": 2,
                           }
+                        }
+                        testID="message-content"
+                      >
+                        <View
+                          onLayout={[Function]}
+                          style={Object {}}
                         >
-                          <Text
+                          <View
                             style={
-                              Object {
-                                "color": "#222222",
-                              }
+                              Array [
+                                Object {
+                                  "borderTopLeftRadius": 16,
+                                  "borderTopRightRadius": 16,
+                                  "borderWidth": 1,
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderBottomLeftRadius": 0,
+                                  "borderBottomRightRadius": 16,
+                                  "borderColor": "#ECEBEB",
+                                },
+                                Object {},
+                                Object {},
+                              ]
                             }
+                            testID="message-content-wrapper"
                           >
-                            Message4
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "maxWidth": 250,
+                                    "paddingHorizontal": 16,
+                                  },
+                                  Object {},
+                                  undefined,
+                                ]
+                              }
+                              testID="message-text-container"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignSelf": "stretch",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                <Text
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-start",
+                                      "flexDirection": "row",
+                                      "flexWrap": "wrap",
+                                      "justifyContent": "flex-start",
+                                      "marginBottom": 8,
+                                      "marginTop": 8,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      Object {
+                                        "color": "#000000",
+                                      }
+                                    }
+                                  >
+                                    Message4
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "flexDirection": "row",
+                              "marginTop": 4,
+                            }
+                          }
+                          testID="message-status-time"
+                        >
+                          <Text
+                            style={
+                              Array [
+                                Object {
+                                  "color": "#7A7A7A",
+                                  "textAlign": "left",
+                                },
+                                Object {
+                                  "fontSize": 12,
+                                },
+                              ]
+                            }
+                          >
+                            2:50 PM
                           </Text>
-                        </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                      "marginTop": 4,
-                    }
-                  }
-                  testID="message-status-time"
-                >
-                  <Text
-                    style={
-                      Array [
-                        Object {
-                          "textAlign": "left",
-                        },
-                        Object {
-                          "color": "#00000080",
-                          "fontSize": 12,
-                        },
-                      ]
-                    }
-                  >
-                    2:50 PM
-                  </Text>
-                </View>
               </View>
             </View>
-          </View>
-          <View
-            onLayout={[Function]}
-            style={
-              Array [
-                Object {
-                  "flexDirection": "column-reverse",
-                },
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleY": -1,
-                    },
-                  ],
-                },
-              ]
-            }
-          >
             <View
               style={
                 Array [
                   Object {
                     "alignItems": "center",
-                    "flexDirection": "row",
+                    "alignSelf": "center",
+                    "borderRadius": 8,
+                    "height": 16,
                     "justifyContent": "center",
-                    "marginVertical": 20,
+                    "marginVertical": 4,
+                    "paddingHorizontal": 8,
+                  },
+                  Object {
+                    "backgroundColor": "#000000CC",
                   },
                   Object {},
                 ]
               }
               testID="date-separator"
             >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "height": 0.5,
-                    },
-                    Object {
-                      "backgroundColor": "#EBEBEB",
-                    },
-                    Object {},
-                  ]
-                }
-              />
               <Text
                 style={
                   Array [
                     Object {
-                      "fontSize": 10,
-                      "marginHorizontal": 5,
-                      "opacity": 0.8,
+                      "fontSize": 12,
                       "textAlign": "center",
-                      "textTransform": "uppercase",
+                      "textAlignVertical": "center",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                <Text
-                  style={
-                    Array [
-                      Object {
-                        "fontSize": 10,
-                        "fontWeight": "700",
-                        "opacity": 0.8,
-                        "textTransform": "uppercase",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  05/05/2020
-                </Text>
-              </Text>
-              <View
-                style={
-                  Array [
                     Object {
-                      "flex": 1,
-                      "height": 0.5,
-                    },
-                    Object {
-                      "backgroundColor": "#EBEBEB",
+                      "color": "#FFFFFF",
                     },
                     Object {},
                   ]
                 }
-              />
+              >
+                May 5, 2020
+              </Text>
             </View>
           </View>
           <View
@@ -896,631 +1008,382 @@ exports[`Thread should match thread snapshot 1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
-                    "alignItems": "flex-end",
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "justifyContent": "flex-start",
-                    "marginBottom": 30,
-                    "marginTop": 0,
-                  },
-                  Object {},
-                ]
+                Object {
+                  "marginVertical": 8,
+                }
               }
-              testID="message-simple-wrapper"
+              testID="thread-footer-component"
             >
               <View
                 style={
-                  Array [
-                    Object {
-                      "marginRight": 8,
-                    },
-                    Object {},
-                  ]
+                  Object {
+                    "paddingHorizontal": 8,
+                  }
                 }
-                testID="message-avatar"
               >
                 <View
                   style={
                     Array [
-                      Object {
-                        "alignItems": "center",
-                        "justifyContent": "center",
-                      },
-                      Object {},
                       undefined,
                     ]
                   }
-                >
-                  <Image
-                    accessibilityLabel="initials"
-                    onError={[Function]}
-                    resizeMethod="resize"
-                    source={
-                      Object {
-                        "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "borderRadius": 16,
-                          "height": 32,
-                          "width": 32,
-                        },
-                        Object {},
-                      ]
-                    }
-                    testID="avatar-image"
-                  />
-                </View>
-              </View>
-              <View
-                accessible={true}
-                focusable={false}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "alignItems": "flex-start",
-                    "borderBottomLeftRadius": 2,
-                    "borderBottomRightRadius": 16,
-                    "borderTopLeftRadius": 16,
-                    "borderTopRightRadius": 16,
-                    "justifyContent": "flex-start",
-                    "opacity": 1,
-                  }
-                }
-              >
-                <View
-                  onLayout={[Function]}
+                  testID="message-wrapper"
                 >
                   <View
                     style={
                       Array [
+                        undefined,
                         Object {
-                          "alignItems": "flex-start",
+                          "backgroundColor": undefined,
                         },
-                        Object {},
                       ]
                     }
-                    testID="message-content-wrapper"
                   >
                     <View
                       style={
                         Array [
-                          Object {
-                            "marginTop": 2,
-                            "maxWidth": 250,
-                            "paddingHorizontal": 16,
-                          },
-                          Object {
-                            "alignSelf": "flex-start",
-                            "borderColor": "#00000014",
-                            "borderWidth": 0.5,
-                          },
-                          Object {
-                            "backgroundColor": "#FFFFFF",
-                            "borderBottomLeftRadius": 2,
-                            "borderBottomRightRadius": 16,
-                            "borderTopLeftRadius": 16,
-                            "borderTopRightRadius": 16,
-                          },
                           Object {},
                         ]
                       }
-                      testID="message-text-container"
                     >
                       <View
                         style={
                           Array [
                             Object {
-                              "alignSelf": "stretch",
+                              "alignItems": "flex-end",
+                              "flexDirection": "row",
+                            },
+                            Object {
+                              "justifyContent": "flex-start",
+                              "marginBottom": 30,
+                              "marginTop": 0,
                             },
-                            undefined,
+                            Object {},
                           ]
                         }
+                        testID="message-simple-wrapper"
                       >
-                        <Text
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "marginRight": 8,
+                              },
+                              Object {},
+                            ]
+                          }
+                          testID="message-avatar"
+                        >
+                          <View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "justifyContent": "center",
+                                    "overflow": "hidden",
+                                  },
+                                  Object {
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "width": 32,
+                                  },
+                                  Object {},
+                                  undefined,
+                                ]
+                              }
+                            >
+                              <Image
+                                accessibilityLabel="avatar-image"
+                                onError={[Function]}
+                                source={
+                                  Object {
+                                    "uri": "https://i.imgur.com/spueyAP.png",
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "borderRadius": 16,
+                                      "height": 32,
+                                      "width": 32,
+                                    },
+                                    Object {
+                                      "borderRadius": 16,
+                                      "height": 32,
+                                      "width": 32,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="avatar-image"
+                              />
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          accessible={true}
+                          focusable={true}
+                          onClick={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
                             Object {
                               "alignItems": "flex-start",
-                              "flexDirection": "row",
-                              "flexWrap": "wrap",
-                              "justifyContent": "flex-start",
-                              "marginBottom": 0,
-                              "marginTop": 0,
+                              "opacity": 1,
+                              "paddingTop": 2,
                             }
                           }
+                          testID="message-content"
                         >
-                          <Text
+                          <View
+                            onLayout={[Function]}
+                            style={Object {}}
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "borderTopLeftRadius": 16,
+                                    "borderTopRightRadius": 16,
+                                    "borderWidth": 1,
+                                    "overflow": "hidden",
+                                  },
+                                  Object {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderBottomLeftRadius": 0,
+                                    "borderBottomRightRadius": 16,
+                                    "borderColor": "#ECEBEB",
+                                  },
+                                  Object {},
+                                  Object {},
+                                ]
+                              }
+                              testID="message-content-wrapper"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "maxWidth": 250,
+                                      "paddingHorizontal": 16,
+                                    },
+                                    Object {},
+                                    undefined,
+                                  ]
+                                }
+                                testID="message-text-container"
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "stretch",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      Object {
+                                        "alignItems": "flex-start",
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "justifyContent": "flex-start",
+                                        "marginBottom": 8,
+                                        "marginTop": 8,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        Object {
+                                          "color": "#000000",
+                                        }
+                                      }
+                                    >
+                                      Message3
+                                    </Text>
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View
                             style={
                               Object {
-                                "color": "#222222",
+                                "flexDirection": "row",
+                                "marginTop": 4,
                               }
                             }
+                            testID="message-status-time"
                           >
-                            Message3
-                          </Text>
-                        </Text>
+                            <Text
+                              style={
+                                Array [
+                                  Object {
+                                    "color": "#7A7A7A",
+                                    "textAlign": "left",
+                                  },
+                                  Object {
+                                    "fontSize": 12,
+                                  },
+                                ]
+                              }
+                            >
+                              2:50 PM
+                            </Text>
+                          </View>
+                        </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                      "marginTop": 4,
-                    }
-                  }
-                  testID="message-status-time"
-                >
-                  <Text
-                    style={
-                      Array [
-                        Object {
-                          "textAlign": "left",
-                        },
-                        Object {
-                          "color": "#00000080",
-                          "fontSize": 12,
-                        },
-                      ]
-                    }
-                  >
-                    2:50 PM
-                  </Text>
-                </View>
               </View>
-            </View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#F4F9FF",
-                    "borderRadius": 4,
-                    "margin": 10,
-                    "padding": 8,
-                  },
-                  Object {},
-                ]
-              }
-            >
-              <Text
-                style={Object {}}
-              >
-                Start of a new thread
-              </Text>
-            </View>
-          </View>
-        </View>
-      </RCTScrollView>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#0000000D",
-            "borderRadius": 10,
-            "marginHorizontal": 10,
-          },
-          Object {
-            "paddingTop": 0,
-          },
-          Object {},
-        ]
-      }
-    >
-      <Modal
-        animationType="none"
-        hardwareAccelerated={false}
-        onRequestClose={[Function]}
-        transparent={true}
-        visible={false}
-      >
-        <View
-          style={
-            Array [
-              Array [
-                Object {
-                  "flex": 1,
-                  "flexDirection": "row",
-                },
-              ],
-            ]
-          }
-        >
-          <Text
-            onPress={[Function]}
-            style={
-              Array [
-                Array [
-                  Object {
-                    "backgroundColor": "#000",
-                    "bottom": 0,
-                    "left": 0,
-                    "opacity": 0.4,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                ],
-              ]
-            }
-          />
-          <View
-            style={
-              Object {
-                "alignSelf": "flex-end",
-                "backgroundColor": "#e5e5e5",
-                "flex": 1,
-                "height": 141,
-                "transform": Array [
-                  Object {
-                    "translateY": 141,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#fff",
-                    "height": 40,
-                    "justifyContent": "center",
-                  },
-                ]
-              }
-            >
               <View
                 style={
                   Array [
                     Object {
                       "alignItems": "center",
-                      "flexDirection": "row",
-                      "height": "100%",
-                      "justifyContent": "space-between",
-                      "paddingHorizontal": 20,
-                      "width": "100%",
+                      "height": 24,
+                      "justifyContent": "center",
+                      "marginTop": 8,
                     },
                     Object {},
                   ]
                 }
               >
-                <Text
+                <RNSVGSvgView
+                  bbHeight={24}
+                  bbWidth={750}
+                  focusable={false}
+                  height={24}
                   style={
                     Array [
                       Object {
-                        "fontWeight": "bold",
+                        "backgroundColor": "transparent",
+                        "borderWidth": 0,
                       },
-                      Object {},
-                    ]
-                  }
-                >
-                  Add a file
-                </Text>
-                <View
-                  accessible={true}
-                  focusable={true}
-                  isTVSelectable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#0000000D",
-                      "borderRadius": 5,
-                      "opacity": 1,
-                      "padding": 5,
-                    }
-                  }
-                  testID="icon-square"
-                >
-                  <Image
-                    source={
                       Object {
-                        "testUri": "../../../src/images/icons/icon_close.png",
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "height": 15,
-                          "width": 15,
-                        },
-                        Object {},
-                      ]
-                    }
-                  />
-                </View>
-              </View>
-            </View>
-            <RCTScrollView
-              scrollEnabled={false}
-            >
-              <View>
-                <View
-                  accessible={true}
-                  focusable={true}
-                  isTVSelectable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    Array [
+                        "position": "absolute",
+                      },
                       Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#fff",
-                        "height": 50,
-                        "justifyContent": "center",
-                        "marginTop": 0.5,
+                        "flex": 0,
+                        "height": 24,
+                        "width": 750,
                       },
                     ]
                   }
+                  width={750}
                 >
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "justifyContent": "flex-start",
-                          "paddingLeft": 20,
-                          "width": "100%",
-                        },
-                        Object {},
-                      ]
-                    }
-                    testID="upload-photo-item"
-                  >
-                    <View
-                      style={
+                  <RNSVGGroup>
+                    <RNSVGRect
+                      fill={
                         Array [
-                          Object {
-                            "backgroundColor": "#0000000D",
-                            "borderRadius": 5,
-                            "padding": 5,
-                          },
-                          Object {},
+                          1,
+                          "gradient",
                         ]
                       }
-                      testID="icon-square"
-                    >
-                      <Image
-                        source={
-                          Object {
-                            "testUri": "../../../src/images/icons/icon_attach-media.png",
-                          }
-                        }
-                        style={
+                      height={24}
+                      propList={
+                        Array [
+                          "fill",
+                        ]
+                      }
+                      width={750}
+                      x={0}
+                      y={0}
+                    />
+                    <RNSVGDefs>
+                      <RNSVGLinearGradient
+                        gradient={
                           Array [
-                            Object {
-                              "height": 15,
-                              "width": 15,
-                            },
-                            Object {},
+                            0,
+                            -197380,
+                            1,
+                            -526345,
                           ]
                         }
+                        gradientTransform={null}
+                        gradientUnits={1}
+                        name="gradient"
+                        x1={0}
+                        x2={0}
+                        y1={0}
+                        y2={24}
                       />
-                    </View>
-                    <Text
-                      style={Object {}}
-                    >
-                      Upload a photo
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  accessible={true}
-                  focusable={true}
-                  isTVSelectable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
+                    </RNSVGDefs>
+                  </RNSVGGroup>
+                </RNSVGSvgView>
+                <Text
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#fff",
-                        "height": 50,
-                        "justifyContent": "center",
-                        "marginTop": 0.5,
+                        "fontSize": 12,
+                        "textAlign": "center",
                       },
+                      Object {
+                        "color": "#7A7A7A",
+                      },
+                      Object {},
                     ]
                   }
                 >
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "justifyContent": "flex-start",
-                          "paddingLeft": 20,
-                          "width": "100%",
-                        },
-                        Object {},
-                      ]
-                    }
-                    testID="upload-file-item"
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#0000000D",
-                            "borderRadius": 5,
-                            "padding": 5,
-                          },
-                          Object {},
-                        ]
-                      }
-                      testID="icon-square"
-                    >
-                      <Image
-                        source={
-                          Object {
-                            "testUri": "../../../src/images/icons/icon_folder.png",
-                          }
-                        }
-                        style={
-                          Array [
-                            Object {
-                              "height": 15,
-                              "width": 15,
-                            },
-                            Object {},
-                          ]
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={Object {}}
-                    >
-                      Upload a file
-                    </Text>
-                  </View>
-                </View>
+                   Replies
+                </Text>
               </View>
-            </RCTScrollView>
+            </View>
           </View>
         </View>
-      </Modal>
+      </RCTScrollView>
       <View
+        style={
+          Object {
+            "position": "absolute",
+            "top": 0,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderTopWidth": 1,
+            "height": 50,
+            "justifyContent": "center",
+          },
+          Object {
+            "borderTopColor": "#00000014",
+            "height": 50,
+          },
+          Object {},
+        ]
+      }
+      testID="send-message-disallowed-indicator"
+    >
+      <Text
         style={
           Array [
             Object {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "margin": 10,
-              "minHeight": 46,
-              "paddingHorizontal": 10,
+              "fontSize": 17,
+              "fontWeight": "400",
+            },
+            Object {
+              "color": "#72767E",
             },
             Object {},
           ]
         }
       >
-        <View
-          accessible={true}
-          focusable={true}
-          isTVSelectable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "marginRight": 8,
-              "opacity": 1,
-            }
-          }
-          testID="attach-button"
-        >
-          <Image
-            source={
-              Object {
-                "testUri": "../../../src/images/icons/plus-outline.png",
-              }
-            }
-            style={
-              Array [
-                Object {
-                  "height": 15,
-                  "width": 15,
-                },
-                Object {},
-              ]
-            }
-          />
-        </View>
-        <TextInput
-          allowFontScaling={true}
-          autoFocus={true}
-          editable={true}
-          multiline={true}
-          onChangeText={[Function]}
-          onSelectionChange={[Function]}
-          placeholder="Write your message"
-          rejectResponderTermination={true}
-          style={
-            Array [
-              Object {
-                "flex": 1,
-                "margin": -5,
-                "maxHeight": 60,
-              },
-              Object {},
-            ]
-          }
-          testID="auto-complete-text-input"
-          underlineColorAndroid="transparent"
-          value=""
-        />
-        <View
-          accessible={true}
-          focusable={true}
-          isTVSelectable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "marginLeft": 8,
-              "opacity": 1,
-            }
-          }
-          testID="send-button"
-        >
-          <Image
-            source={
-              Object {
-                "testUri": "../../../src/images/icons/icon_new_message.png",
-              }
-            }
-            style={
-              Array [
-                Object {
-                  "height": 15,
-                  "width": 15,
-                },
-                Object {},
-              ]
-            }
-          />
-        </View>
-      </View>
+        You can't send messages in this channel
+      </Text>
     </View>
   </View>
 </View>