stream-chat-react-native-core 3.10.2 → 4.0.0-beta.1

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

@@ -1,44 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MessageInput should render MessageInput 1`] = `
-<View
-  keyboardVerticalOffset={86.5}
-  onLayout={[Function]}
-  style={
-    Object {
-      "paddingBottom": 0,
-    }
-  }
->
+Array [
   <View
+    keyboardVerticalOffset={86.5}
+    onLayout={[Function]}
     style={
       Object {
-        "height": "100%",
+        "paddingBottom": 0,
       }
     }
   >
     <View
-      onLayout={[Function]}
       style={
-        Array [
-          Object {
-            "borderTopWidth": 1,
-            "padding": 10,
-          },
-          Object {
-            "backgroundColor": "#FFFFFF",
-            "borderColor": "#00000014",
-          },
-          Object {},
-        ]
+        Object {
+          "height": "100%",
+        }
       }
     >
       <View
+        onLayout={[Function]}
         style={
           Array [
             Object {
-              "alignItems": "flex-end",
-              "flexDirection": "row",
+              "borderTopWidth": 1,
+              "padding": 10,
+            },
+            Object {
+              "backgroundColor": "#FFFFFF",
+              "borderColor": "#00000014",
             },
             Object {},
           ]
@@ -48,9 +38,8 @@ exports[`MessageInput should render MessageInput 1`] = `
           style={
             Array [
               Object {
+                "alignItems": "flex-end",
                 "flexDirection": "row",
-                "paddingBottom": 10,
-                "paddingRight": 10,
               },
               Object {},
             ]
@@ -60,31 +49,26 @@ exports[`MessageInput should render MessageInput 1`] = `
             style={
               Array [
                 Object {
+                  "flexDirection": "row",
+                  "paddingBottom": 10,
                   "paddingRight": 10,
                 },
                 Object {},
               ]
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              hitSlop={
-                Object {
-                  "bottom": 15,
-                  "left": 15,
-                  "right": 5,
-                  "top": 15,
-                }
+            <View
+              style={
+                Array [
+                  Object {
+                    "paddingRight": 10,
+                  },
+                  Object {},
+                ]
               }
-              onGestureEvent={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onHandlerStateChange={[Function]}
-              rippleColor={0}
-              testID="attach-button"
             >
-              <View
-                accessible={true}
+              <RNGestureHandlerButton
+                collapsable={false}
                 hitSlop={
                   Object {
                     "bottom": 15,
@@ -93,87 +77,243 @@ exports[`MessageInput should render MessageInput 1`] = `
                     "top": 15,
                   }
                 }
-                style={
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                rippleColor={0}
+                testID="attach-button"
+              >
+                <View
+                  accessible={true}
+                  hitSlop={
+                    Object {
+                      "bottom": 15,
+                      "left": 15,
+                      "right": 5,
+                      "top": 15,
+                    }
+                  }
+                  style={
+                    Object {
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight={24}
+                    bbWidth={24}
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    pathFill="#005FFF"
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        Object {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={24}
+                    vbWidth={24}
+                    width={24}
+                  >
+                    <RNSVGGroup>
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
+                        fill={4278214655}
+                        fillRule={0}
+                        propList={
+                          Array [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+            <View
+              style={Object {}}
+            >
+              <RNGestureHandlerButton
+                collapsable={false}
+                hitSlop={
                   Object {
-                    "opacity": 1,
+                    "bottom": 15,
+                    "left": 5,
+                    "right": 15,
+                    "top": 15,
                   }
                 }
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                rippleColor={0}
+                testID="commands-button"
               >
-                <RNSVGSvgView
-                  align="xMidYMid"
-                  bbHeight={24}
-                  bbWidth={24}
-                  focusable={false}
-                  height={24}
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  pathFill="#005FFF"
+                <View
+                  accessible={true}
+                  hitSlop={
+                    Object {
+                      "bottom": 15,
+                      "left": 5,
+                      "right": 15,
+                      "top": 15,
+                    }
+                  }
                   style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
+                    Object {
+                      "opacity": 1,
+                    }
                   }
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
                 >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
-                      fill={4278214655}
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </RNGestureHandlerButton>
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight={24}
+                    bbWidth={24}
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    pathFill="#7A7A7A"
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        Object {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={24}
+                    vbWidth={24}
+                    width={24}
+                  >
+                    <RNSVGGroup>
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M11.636 4H16l-2.91 5.818H16L10.546 20l1.09-7.273H8L11.636 4z"
+                        fill={4286216826}
+                        fillRule={0}
+                        propList={
+                          Array [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 20,
+                  "borderWidth": 1,
+                  "flex": 1,
+                },
+                Object {
+                  "borderColor": "#ECEBEB",
+                  "paddingVertical": 12,
+                },
+                Object {},
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                  Object {
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <TextInput
+                allowFontScaling={true}
+                maxLength={5000}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onContentSizeChange={[Function]}
+                onSelectionChange={[Function]}
+                placeholder="Send a message"
+                placeholderTextColor="#7A7A7A"
+                rejectResponderTermination={true}
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "fontSize": 14,
+                      "includeFontPadding": false,
+                      "padding": 0,
+                      "paddingTop": 0,
+                      "textAlignVertical": "center",
+                    },
+                    Object {
+                      "color": "#000000",
+                      "maxHeight": 85,
+                    },
+                    Object {},
+                  ]
+                }
+                testID="auto-complete-text-input"
+                underlineColorAndroid="transparent"
+                value=""
+              />
+            </View>
           </View>
           <View
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingBottom": 10,
+                  "paddingLeft": 10,
+                },
+                Object {},
+              ]
+            }
           >
             <RNGestureHandlerButton
               collapsable={false}
-              hitSlop={
-                Object {
-                  "bottom": 15,
-                  "left": 5,
-                  "right": 15,
-                  "top": 15,
-                }
-              }
               onGestureEvent={[Function]}
               onGestureHandlerEvent={[Function]}
               onGestureHandlerStateChange={[Function]}
               onHandlerStateChange={[Function]}
               rippleColor={0}
-              testID="commands-button"
+              testID="send-button"
             >
               <View
                 accessible={true}
-                hitSlop={
-                  Object {
-                    "bottom": 15,
-                    "left": 5,
-                    "right": 15,
-                    "top": 15,
-                  }
-                }
                 style={
                   Object {
                     "opacity": 1,
@@ -189,7 +329,7 @@ exports[`MessageInput should render MessageInput 1`] = `
                   meetOrSlice={0}
                   minX={0}
                   minY={0}
-                  pathFill="#7A7A7A"
+                  pathFill="#DBDBDB"
                   style={
                     Array [
                       Object {
@@ -210,8 +350,8 @@ exports[`MessageInput should render MessageInput 1`] = `
                   <RNSVGGroup>
                     <RNSVGPath
                       clipRule={0}
-                      d="M11.636 4H16l-2.91 5.818H16L10.546 20l1.09-7.273H8L11.636 4z"
-                      fill={4286216826}
+                      d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
+                      fill={4292598747}
                       fillRule={0}
                       propList={
                         Array [
@@ -226,98 +366,65 @@ exports[`MessageInput should render MessageInput 1`] = `
             </RNGestureHandlerButton>
           </View>
         </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#F2F2F2",
+              "height": 360,
+            },
+            Object {},
+          ]
+        }
+      >
         <View
           style={
             Array [
               Object {
-                "borderRadius": 20,
-                "borderWidth": 1,
-                "flex": 1,
+                "alignItems": "center",
+                "flexDirection": "row",
+                "paddingHorizontal": 6,
               },
+              Object {},
               Object {
-                "borderColor": "#ECEBEB",
-                "paddingVertical": 12,
+                "height": 52,
               },
-              Object {},
             ]
           }
         >
           <View
+            accessible={true}
+            focusable={true}
+            hitSlop={
+              Object {
+                "bottom": 15,
+                "top": 15,
+              }
+            }
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                },
-                Object {
-                  "paddingLeft": 16,
-                  "paddingRight": 16,
-                },
-                Object {},
-              ]
+              Object {
+                "opacity": 1,
+              }
             }
+            testID="upload-photo-touchable"
           >
-            <TextInput
-              allowFontScaling={true}
-              maxLength={5000}
-              multiline={true}
-              onBlur={[Function]}
-              onChangeText={[Function]}
-              onContentSizeChange={[Function]}
-              onSelectionChange={[Function]}
-              placeholder="Send a message"
-              placeholderTextColor="#7A7A7A"
-              rejectResponderTermination={true}
+            <View
               style={
                 Array [
                   Object {
-                    "flex": 1,
-                    "fontSize": 14,
-                    "includeFontPadding": false,
-                    "padding": 0,
-                    "paddingTop": 0,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "#000000",
-                    "maxHeight": 85,
+                    "marginHorizontal": 12,
                   },
                   Object {},
                 ]
               }
-              testID="auto-complete-text-input"
-              underlineColorAndroid="transparent"
-              value=""
-            />
-          </View>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "paddingBottom": 10,
-                "paddingLeft": 10,
-              },
-              Object {},
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            collapsable={false}
-            onGestureEvent={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onHandlerStateChange={[Function]}
-            rippleColor={0}
-            testID="send-button"
-          >
-            <View
-              accessible={true}
-              style={
-                Object {
-                  "opacity": 1,
-                }
-              }
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -328,7 +435,7 @@ exports[`MessageInput should render MessageInput 1`] = `
                 meetOrSlice={0}
                 minX={0}
                 minY={0}
-                pathFill="#DBDBDB"
+                pathFill="#005FFF"
                 style={
                   Array [
                     Object {
@@ -349,8 +456,20 @@ exports[`MessageInput should render MessageInput 1`] = `
                 <RNSVGGroup>
                   <RNSVGPath
                     clipRule={0}
-                    d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
-                    fill={4292598747}
+                    d="M2 8a3 3 0 013-3h14a3 3 0 013 3v8a3 3 0 01-3 3H5a3 3 0 01-3-3V8zm3-1a1 1 0 00-1 1v8a1 1 0 001 1h14a1 1 0 001-1V8a1 1 0 00-1-1H5z"
+                    fill={4278214655}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M15.99 9a1 1 0 01.778.36l5 6a1 1 0 11-1.536 1.28l-4.216-5.059-3.235 4.044a1 1 0 01-1.381.175l-3.306-2.48-3.387 3.387a1 1 0 01-1.414-1.414l4-4A1 1 0 018.6 11.2l3.225 2.418 3.394-4.243A1 1 0 0115.99 9z"
+                    fill={4278214655}
                     fillRule={0}
                     propList={
                       Array [
@@ -362,140 +481,906 @@ exports[`MessageInput should render MessageInput 1`] = `
                 </RNSVGGroup>
               </RNSVGSvgView>
             </View>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#F2F2F2",
-            "height": 360,
-          },
-          Object {},
-        ]
-      }
-    >
-      <View
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingHorizontal": 6,
-            },
-            Object {},
-            Object {
-              "height": 52,
-            },
-          ]
-        }
-      >
-        <View
-          accessible={true}
-          focusable={true}
-          hitSlop={
-            Object {
-              "bottom": 15,
-              "top": 15,
-            }
-          }
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          testID="upload-photo-touchable"
-        >
+          </View>
           <View
-            style={
-              Array [
-                Object {
-                  "marginHorizontal": 12,
-                },
-                Object {},
-              ]
+            accessible={true}
+            focusable={true}
+            hitSlop={
+              Object {
+                "bottom": 15,
+                "top": 15,
+              }
             }
-          />
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+            testID="upload-file-touchable"
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "marginHorizontal": 12,
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={24}
+                bbWidth={24}
+                focusable={false}
+                height={24}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                pathFill="#7A7A7A"
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
+                    Object {
+                      "flex": 0,
+                      "height": 24,
+                      "width": 24,
+                    },
+                  ]
+                }
+                vbHeight={24}
+                vbWidth={24}
+                width={24}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M21 5h-8.586l-2-2H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V6a1 1 0 00-1-1zM4 19V7h16v12H4z"
+                    fill={4286216826}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
+            </View>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            hitSlop={
+              Object {
+                "bottom": 15,
+                "top": 15,
+              }
+            }
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+            testID="take-photo-touchable"
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "marginHorizontal": 12,
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={24}
+                bbWidth={24}
+                focusable={false}
+                height={24}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                pathFill="#7A7A7A"
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
+                    Object {
+                      "flex": 0,
+                      "height": 24,
+                      "width": 24,
+                    },
+                  ]
+                }
+                vbHeight={24}
+                vbWidth={24}
+                width={24}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M15 3H9L7 5H3a1 1 0 00-1 1v14a1 1 0 001 1h18a1 1 0 001-1V6a1 1 0 00-1-1h-4l-2-2zM7.828 7l2-2h4.344l2 2H20v12H4V7h3.828zM12 18a5.5 5.5 0 110-11 5.5 5.5 0 010 11zm3.5-5.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z"
+                    fill={4286216826}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
+            </View>
+          </View>
         </View>
+      </View>
+    </View>
+  </View>,
+  <View
+    animatedStyle={
+      Object {
+        "value": Object {
+          "opacity": 0,
+        },
+      }
+    }
+    collapsable={false}
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#000000CC",
+          },
+          Array [
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            Object {
+              "height": 1334,
+              "width": 750,
+            },
+          ],
+        ]
+      }
+    />
+  </View>,
+  <View
+    animatedStyle={
+      Object {
+        "value": Object {
+          "opacity": 0,
+          "transform": Array [
+            Object {
+              "translateY": 1334,
+            },
+          ],
+        },
+      }
+    }
+    collapsable={false}
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": 1334,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      animatedStyle={
+        Object {
+          "value": Object {
+            "backgroundColor": "#FCFCFC",
+            "opacity": 1,
+          },
+        }
+      }
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#FCFCFC",
+          "bottom": 0,
+          "left": 0,
+          "opacity": 1,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      animatedStyle={
+        Object {
+          "value": Object {},
+        }
+      }
+      collapsable={false}
+      forwardedRef={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        animatedStyle={
+          Object {
+            "value": Object {},
+          }
+        }
+        collapsable={false}
+        forwardedRef={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
         <View
-          accessible={true}
-          focusable={true}
-          hitSlop={
+          animatedStyle={
             Object {
-              "bottom": 15,
-              "top": 15,
+              "value": Object {},
             }
           }
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+          collapsable={false}
+          forwardedRef={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
           style={
             Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            animatedStyle={
+              Object {
+                "value": Object {},
+              }
+            }
+            collapsable={false}
+            forwardedRef={[Function]}
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          >
+            <View
+              animatedStyle={
+                Object {
+                  "value": Object {
+                    "transform": Array [
+                      Object {
+                        "scaleX": -1,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  },
+                }
+              }
+              collapsable={false}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "transform": Array [
+                    Object {
+                      "scaleX": -1,
+                    },
+                    Object {
+                      "translateX": 0,
+                    },
+                  ],
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <RCTSafeAreaView
+        animatedStyle={
+          Object {
+            "value": Object {
               "opacity": 1,
+              "transform": Array [
+                Object {
+                  "translateY": 0,
+                },
+              ],
+            },
+          }
+        }
+        collapsable={false}
+        emulateUnlessSupported={true}
+        style={
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "opacity": 1,
+            "paddingTop": undefined,
+            "transform": Array [
+              Object {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "height": 56,
+              },
+              Object {},
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "justifyContent": "center",
+                    "marginLeft": 8,
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={24}
+                bbWidth={24}
+                focusable={false}
+                height={24}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
+                    Object {
+                      "flex": 0,
+                      "height": 24,
+                      "width": 24,
+                    },
+                  ]
+                }
+                vbHeight={24}
+                vbWidth={24}
+                width={24}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M7.05 7.05a1 1 0 000 1.414L10.586 12 7.05 15.536a1 1 0 101.414 1.414L12 13.414l3.536 3.536a1 1 0 001.414-1.414L13.414 12l3.536-3.536a1 1 0 00-1.414-1.414L12 10.586 8.464 7.05a1 1 0 00-1.414 0z"
+                    fill={4278190080}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "justifyContent": "center",
+                },
+                Object {},
+              ]
             }
-          }
-          testID="upload-file-touchable"
-        >
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "fontSize": 16,
+                    "fontWeight": "700",
+                  },
+                  Object {
+                    "color": "#000000",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              Unknown User
+            </Text>
+          </View>
           <View
             style={
               Array [
                 Object {
-                  "marginHorizontal": 12,
+                  "marginRight": 8,
+                  "width": 24,
                 },
                 Object {},
               ]
             }
           />
         </View>
-        <View
-          accessible={true}
-          focusable={true}
-          hitSlop={
-            Object {
-              "bottom": 15,
-              "top": 15,
-            }
+      </RCTSafeAreaView>
+    </View>
+    <View
+      animatedStyle={
+        Object {
+          "value": Object {},
+        }
+      }
+      collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="box-none"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    >
+      <RCTSafeAreaView
+        animatedStyle={
+          Object {
+            "value": Object {
+              "opacity": 1,
+              "transform": Array [
+                Object {
+                  "translateY": 0,
+                },
+              ],
+            },
+          }
+        }
+        collapsable={false}
+        emulateUnlessSupported={true}
+        style={
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "opacity": 1,
+            "transform": Array [
+              Object {
+                "translateY": 0,
+              },
+            ],
           }
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        }
+      >
+        <View
           style={
-            Object {
-              "opacity": 1,
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+                "height": 56,
+              },
+              Object {},
+            ]
           }
-          testID="take-photo-touchable"
         >
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "justifyContent": "center",
+                    "marginLeft": 8,
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={24}
+                bbWidth={24}
+                focusable={false}
+                height={24}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
+                    Object {
+                      "flex": 0,
+                      "height": 24,
+                      "width": 24,
+                    },
+                  ]
+                }
+                vbHeight={24}
+                vbWidth={24}
+                width={24}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M5.306 9.695a1.043 1.043 0 001.476 0l5.219-5.225 5.218 5.224a1.043 1.043 0 001.476 0 1.046 1.046 0 000-1.478l-5.904-5.91a1.04 1.04 0 00-.8-.304 1.04 1.04 0 00-.781.305l-5.904 5.91a1.046 1.046 0 000 1.478z"
+                    fill={4278190080}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                  <RNSVGRect
+                    fill={4278190080}
+                    height={16}
+                    propList={
+                      Array [
+                        "fill",
+                      ]
+                    }
+                    rx={1}
+                    width={2}
+                    x={11}
+                    y={2}
+                  />
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M4 12a2 2 0 00-2 2v6a2 2 0 002 2h16a2 2 0 002-2v-6a2 2 0 00-2-2h-5v2h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4a1 1 0 011-1h4v-2H4z"
+                    fill={4278190080}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
+            </View>
+          </View>
           <View
             style={
               Array [
                 Object {
-                  "marginHorizontal": 12,
+                  "alignItems": "center",
+                  "flex": 1,
+                  "justifyContent": "center",
                 },
                 Object {},
               ]
             }
-          />
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "fontSize": 16,
+                    "fontWeight": "600",
+                  },
+                  Object {
+                    "color": "#000000",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              0 of 0
+            </Text>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "justifyContent": "center",
+                    "marginRight": 8,
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={24}
+                bbWidth={24}
+                focusable={false}
+                height={24}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
+                    Object {
+                      "flex": 0,
+                      "height": 24,
+                      "width": 24,
+                    },
+                  ]
+                }
+                vbHeight={24}
+                vbWidth={24}
+                width={24}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M4 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM10 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V5zM17 4a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V5a1 1 0 00-1-1h-2zM4 11a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM11 10a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM16 11a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM5 16a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1H5zM10 17a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM17 16a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2z"
+                    fill={4278190080}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
+                    }
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
+            </View>
+          </View>
         </View>
-      </View>
+      </RCTSafeAreaView>
+    </View>
+    <View
+      animatedIndex={
+        MutableValue {
+          "_animation": null,
+          "_id": 4,
+          "_listeners": Array [
+            [Function],
+          ],
+          "_setter": [Function],
+          "_value": 0,
+        }
+      }
+      containerHeight={1334}
+      handleComponent={[Function]}
+      handleHeight={40}
+      index={0}
+      onChange={[Function]}
+      snapPoints={
+        Array [
+          0,
+          1200.6,
+        ]
+      }
+    >
+      <RCTScrollView
+        contentContainerStyle={
+          Array [
+            Object {
+              "flexGrow": 1,
+            },
+            Object {
+              "backgroundColor": "#FFFFFF",
+            },
+            Object {},
+          ]
+        }
+        data={Array []}
+        disableVirtualization={false}
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={false}
+        initialNumToRender={10}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={10}
+        onContentSizeChange={[Function]}
+        onEndReachedThreshold={2}
+        onLayout={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        stickyHeaderIndices={Array []}
+        updateCellsBatchingPeriod={50}
+        viewabilityConfigCallbackPairs={Array []}
+        windowSize={21}
+      >
+        <View />
+      </RCTScrollView>
     </View>
-  </View>
-</View>
+  </View>,
+  <View
+    containerHeight={1334}
+    handleComponent={[Function]}
+    handleHeight={20}
+    index={-1}
+    onChange={[Function]}
+    snapPoints={
+      Array [
+        288,
+        1314,
+      ]
+    }
+  >
+    <RCTScrollView
+      contentContainerStyle={
+        Array [
+          Object {
+            "flexGrow": 1,
+          },
+          Object {
+            "backgroundColor": "#FFFFFF",
+          },
+          Object {},
+          Object {
+            "opacity": 1,
+          },
+        ]
+      }
+      data={Array []}
+      disableVirtualization={false}
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={false}
+      initialNumToRender={10}
+      keyExtractor={[Function]}
+      maxToRenderPerBatch={10}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={2}
+      onLayout={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      updateCellsBatchingPeriod={50}
+      viewabilityConfigCallbackPairs={Array []}
+      windowSize={21}
+    >
+      <View />
+    </RCTScrollView>
+  </View>,
+]
 `;