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

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

@@ -1,80 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ImageUploadPreview should render ImageUploadPreview with 1 uploading, 1 uploaded, and 1 failed image 1`] = `
-<View
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-1",
+        "state": "uploading",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-2",
+        "state": "uploaded",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-3",
+        "state": "upload_failed",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={true}
+  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 []}
   style={
     Array [
       Object {
-        "height": 70,
-        "padding": 10,
+        "paddingBottom": 12,
       },
       Object {},
     ]
   }
+  updateCellsBatchingPeriod={50}
+  viewabilityConfigCallbackPairs={Array []}
+  windowSize={21}
 >
-  <RCTScrollView
-    data={
-      Array [
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "0",
-          "state": "uploading",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "1",
-          "state": "uploaded",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
           },
-          "id": "2",
-          "state": "upload_failed",
-        },
-      ]
-    }
-    disableVirtualization={false}
-    getItem={[Function]}
-    getItemCount={[Function]}
-    horizontal={true}
-    initialNumToRender={10}
-    keyExtractor={[Function]}
-    maxToRenderPerBatch={10}
-    numColumns={1}
-    onContentSizeChange={[Function]}
-    onEndReachedThreshold={2}
-    onLayout={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={Array []}
-    style={
-      Object {
-        "flex": 1,
+          null,
+        ]
       }
-    }
-    updateCellsBatchingPeriod={50}
-    viewabilityConfigCallbackPairs={Array []}
-    windowSize={21}
-  >
-    <View>
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -82,144 +86,180 @@ exports[`ImageUploadPreview should render ImageUploadPreview with 1 uploading, 1
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <ActivityIndicator
-                  animating={true}
-                  color="grey"
-                  hidesWhenStopped={true}
-                  size="small"
-                  testID="upload-progress-indicator"
-                />
-              </View>
+              <ActivityIndicator
+                animating={true}
+                color="#F2F2F2"
+                hidesWhenStopped={true}
+                size="small"
+                testID="upload-progress-indicator"
+              />
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -227,91 +267,125 @@ exports[`ImageUploadPreview should render ImageUploadPreview with 1 uploading, 1
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="inactive-upload-progress-indicator"
         >
-          <View
-            testID="inactive-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
-                Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
+          <Image
+            resizeMode="cover"
+            source={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
               }
             }
-            testID="remove-image-upload-preview"
-          >
-            <Image
-              source={
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
+            style={
+              Array [
                 Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+                  "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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
+            },
+            Object {
+              "marginRight": 8,
             },
-            null,
+            Object {},
           ]
         }
       >
@@ -319,234 +393,289 @@ exports[`ImageUploadPreview should render ImageUploadPreview with 1 uploading, 1
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
+              accessible={true}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                accessible={true}
-                focusable={true}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={18}
+                bbWidth={18}
+                focusable={false}
+                height={18}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                pathFill="#F2F2F2"
                 style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "opacity": 1,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <Image
-                  source={
+                  Array [
                     Object {
-                      "testUri": "../../../src/images/reload1.png",
-                    }
-                  }
-                  style={
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
                     Object {
+                      "flex": 0,
                       "height": 18,
                       "width": 18,
+                    },
+                  ]
+                }
+                testID="retry-upload-progress-indicator"
+                vbHeight={24}
+                vbWidth={24}
+                width={18}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M12.868 4.221a8 8 0 102.834 14.251 1 1 0 00-1.175-1.618A6 6 0 1112.4 6.166c1.31.314 2.52.803 3.31 2.12.154.254.266.485.348.708h-1.152a1 1 0 00-.81 1.585l2.375 3.291a1 1 0 001.621 0l2.376-3.291a1 1 0 00-.811-1.585h-1.509c-.128-.639-.377-1.24-.867-1.947a8 8 0 00-4.414-2.826z"
+                    fill={4294111986}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
                     }
-                  }
-                  testID="retry-upload-progress-indicator"
-                />
-              </View>
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
     </View>
-  </RCTScrollView>
-</View>
+  </View>
+</RCTScrollView>
 `;
 
 exports[`ImageUploadPreview should render ImageUploadPreview with all failed images 1`] = `
-<View
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-1",
+        "state": "upload_failed",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-2",
+        "state": "upload_failed",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-3",
+        "state": "upload_failed",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={true}
+  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 []}
   style={
     Array [
       Object {
-        "height": 70,
-        "padding": 10,
+        "paddingBottom": 12,
       },
       Object {},
     ]
   }
+  updateCellsBatchingPeriod={50}
+  viewabilityConfigCallbackPairs={Array []}
+  windowSize={21}
 >
-  <RCTScrollView
-    data={
-      Array [
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "0",
-          "state": "upload_failed",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "1",
-          "state": "upload_failed",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
           },
-          "id": "2",
-          "state": "upload_failed",
-        },
-      ]
-    }
-    disableVirtualization={false}
-    getItem={[Function]}
-    getItemCount={[Function]}
-    horizontal={true}
-    initialNumToRender={10}
-    keyExtractor={[Function]}
-    maxToRenderPerBatch={10}
-    numColumns={1}
-    onContentSizeChange={[Function]}
-    onEndReachedThreshold={2}
-    onLayout={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={Array []}
-    style={
-      Object {
-        "flex": 1,
+          null,
+        ]
       }
-    }
-    updateCellsBatchingPeriod={50}
-    viewabilityConfigCallbackPairs={Array []}
-    windowSize={21}
-  >
-    <View>
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -554,162 +683,226 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all failed ima
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
+              accessible={true}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                accessible={true}
-                focusable={true}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={18}
+                bbWidth={18}
+                focusable={false}
+                height={18}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                pathFill="#F2F2F2"
                 style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "opacity": 1,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <Image
-                  source={
+                  Array [
                     Object {
-                      "testUri": "../../../src/images/reload1.png",
-                    }
-                  }
-                  style={
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
                     Object {
+                      "flex": 0,
                       "height": 18,
                       "width": 18,
+                    },
+                  ]
+                }
+                testID="retry-upload-progress-indicator"
+                vbHeight={24}
+                vbWidth={24}
+                width={18}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M12.868 4.221a8 8 0 102.834 14.251 1 1 0 00-1.175-1.618A6 6 0 1112.4 6.166c1.31.314 2.52.803 3.31 2.12.154.254.266.485.348.708h-1.152a1 1 0 00-.81 1.585l2.375 3.291a1 1 0 001.621 0l2.376-3.291a1 1 0 00-.811-1.585h-1.509c-.128-.639-.377-1.24-.867-1.947a8 8 0 00-4.414-2.826z"
+                    fill={4294111986}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
                     }
-                  }
-                  testID="retry-upload-progress-indicator"
-                />
-              </View>
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -717,162 +910,228 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all failed ima
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
+              accessible={true}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                accessible={true}
-                focusable={true}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={18}
+                bbWidth={18}
+                focusable={false}
+                height={18}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                pathFill="#F2F2F2"
                 style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "opacity": 1,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <Image
-                  source={
+                  Array [
                     Object {
-                      "testUri": "../../../src/images/reload1.png",
-                    }
-                  }
-                  style={
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
                     Object {
+                      "flex": 0,
                       "height": 18,
                       "width": 18,
+                    },
+                  ]
+                }
+                testID="retry-upload-progress-indicator"
+                vbHeight={24}
+                vbWidth={24}
+                width={18}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M12.868 4.221a8 8 0 102.834 14.251 1 1 0 00-1.175-1.618A6 6 0 1112.4 6.166c1.31.314 2.52.803 3.31 2.12.154.254.266.485.348.708h-1.152a1 1 0 00-.81 1.585l2.375 3.291a1 1 0 001.621 0l2.376-3.291a1 1 0 00-.811-1.585h-1.509c-.128-.639-.377-1.24-.867-1.947a8 8 0 00-4.414-2.826z"
+                    fill={4294111986}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
                     }
-                  }
-                  testID="retry-upload-progress-indicator"
-                />
-              </View>
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
+            },
+            Object {
+              "marginRight": 8,
             },
-            null,
+            Object {},
           ]
         }
       >
@@ -880,234 +1139,289 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all failed ima
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
+              accessible={true}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                accessible={true}
-                focusable={true}
-                isTVSelectable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              <RNSVGSvgView
+                align="xMidYMid"
+                bbHeight={18}
+                bbWidth={18}
+                focusable={false}
+                height={18}
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                pathFill="#F2F2F2"
                 style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "opacity": 1,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <Image
-                  source={
+                  Array [
                     Object {
-                      "testUri": "../../../src/images/reload1.png",
-                    }
-                  }
-                  style={
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
                     Object {
+                      "flex": 0,
                       "height": 18,
                       "width": 18,
+                    },
+                  ]
+                }
+                testID="retry-upload-progress-indicator"
+                vbHeight={24}
+                vbWidth={24}
+                width={18}
+              >
+                <RNSVGGroup>
+                  <RNSVGPath
+                    clipRule={0}
+                    d="M12.868 4.221a8 8 0 102.834 14.251 1 1 0 00-1.175-1.618A6 6 0 1112.4 6.166c1.31.314 2.52.803 3.31 2.12.154.254.266.485.348.708h-1.152a1 1 0 00-.81 1.585l2.375 3.291a1 1 0 001.621 0l2.376-3.291a1 1 0 00-.811-1.585h-1.509c-.128-.639-.377-1.24-.867-1.947a8 8 0 00-4.414-2.826z"
+                    fill={4294111986}
+                    fillRule={0}
+                    propList={
+                      Array [
+                        "fill",
+                        "fillRule",
+                      ]
                     }
-                  }
-                  testID="retry-upload-progress-indicator"
-                />
-              </View>
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
     </View>
-  </RCTScrollView>
-</View>
+  </View>
+</RCTScrollView>
 `;
 
 exports[`ImageUploadPreview should render ImageUploadPreview with all uploaded images 1`] = `
-<View
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-1",
+        "state": "uploaded",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-2",
+        "state": "uploaded",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-3",
+        "state": "uploaded",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={true}
+  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 []}
   style={
     Array [
       Object {
-        "height": 70,
-        "padding": 10,
+        "paddingBottom": 12,
       },
       Object {},
     ]
   }
+  updateCellsBatchingPeriod={50}
+  viewabilityConfigCallbackPairs={Array []}
+  windowSize={21}
 >
-  <RCTScrollView
-    data={
-      Array [
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "0",
-          "state": "uploaded",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
           },
-          "id": "1",
-          "state": "uploaded",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "2",
-          "state": "uploaded",
-        },
-      ]
-    }
-    disableVirtualization={false}
-    getItem={[Function]}
-    getItemCount={[Function]}
-    horizontal={true}
-    initialNumToRender={10}
-    keyExtractor={[Function]}
-    maxToRenderPerBatch={10}
-    numColumns={1}
-    onContentSizeChange={[Function]}
-    onEndReachedThreshold={2}
-    onLayout={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={Array []}
-    style={
-      Object {
-        "flex": 1,
+          null,
+        ]
       }
-    }
-    updateCellsBatchingPeriod={50}
-    viewabilityConfigCallbackPairs={Array []}
-    windowSize={21}
-  >
-    <View>
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -1115,91 +1429,123 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all uploaded i
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="inactive-upload-progress-indicator"
         >
-          <View
-            testID="inactive-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
-                Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
+          <Image
+            resizeMode="cover"
+            source={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
               }
             }
-            testID="remove-image-upload-preview"
-          >
-            <Image
-              source={
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
+            style={
+              Array [
                 Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+                  "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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -1207,91 +1553,125 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all uploaded i
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="inactive-upload-progress-indicator"
         >
-          <View
-            testID="inactive-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
-                Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
+          <Image
+            resizeMode="cover"
+            source={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
               }
             }
-            testID="remove-image-upload-preview"
-          >
-            <Image
-              source={
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
                 Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+                  "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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {
+              "marginRight": 8,
+            },
+            Object {},
           ]
         }
       >
@@ -1299,163 +1679,186 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all uploaded i
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="inactive-upload-progress-indicator"
         >
-          <View
-            testID="inactive-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
-                Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
+          <Image
+            resizeMode="cover"
+            source={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
               }
             }
-            testID="remove-image-upload-preview"
-          >
-            <Image
-              source={
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
                 Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+                  "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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
     </View>
-  </RCTScrollView>
-</View>
+  </View>
+</RCTScrollView>
 `;
 
 exports[`ImageUploadPreview should render ImageUploadPreview with all uploading images 1`] = `
-<View
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-1",
+        "state": "uploading",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-2",
+        "state": "uploading",
+      },
+      Object {
+        "file": Object {
+          "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+        },
+        "id": "image-upload-preview-3",
+        "state": "uploading",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={true}
+  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 []}
   style={
     Array [
       Object {
-        "height": 70,
-        "padding": 10,
+        "paddingBottom": 12,
       },
       Object {},
     ]
   }
+  updateCellsBatchingPeriod={50}
+  viewabilityConfigCallbackPairs={Array []}
+  windowSize={21}
 >
-  <RCTScrollView
-    data={
-      Array [
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
           },
-          "id": "0",
-          "state": "uploading",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "1",
-          "state": "uploading",
-        },
-        Object {
-          "file": Object {
-            "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-          },
-          "id": "2",
-          "state": "uploading",
-        },
-      ]
-    }
-    disableVirtualization={false}
-    getItem={[Function]}
-    getItemCount={[Function]}
-    horizontal={true}
-    initialNumToRender={10}
-    keyExtractor={[Function]}
-    maxToRenderPerBatch={10}
-    numColumns={1}
-    onContentSizeChange={[Function]}
-    onEndReachedThreshold={2}
-    onLayout={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={Array []}
-    style={
-      Object {
-        "flex": 1,
+          null,
+        ]
       }
-    }
-    updateCellsBatchingPeriod={50}
-    viewabilityConfigCallbackPairs={Array []}
-    windowSize={21}
-  >
-    <View>
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -1463,144 +1866,180 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all uploading
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <ActivityIndicator
-                  animating={true}
-                  color="grey"
-                  hidesWhenStopped={true}
-                  size="small"
-                  testID="upload-progress-indicator"
-                />
-              </View>
+              <ActivityIndicator
+                animating={true}
+                color="#F2F2F2"
+                hidesWhenStopped={true}
+                size="small"
+                testID="upload-progress-indicator"
+              />
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {},
+            Object {},
           ]
         }
       >
@@ -1608,144 +2047,182 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all uploading
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <ActivityIndicator
-                  animating={true}
-                  color="grey"
-                  hidesWhenStopped={true}
-                  size="small"
-                  testID="upload-progress-indicator"
-                />
-              </View>
+              <ActivityIndicator
+                animating={true}
+                color="#F2F2F2"
+                hidesWhenStopped={true}
+                size="small"
+                testID="upload-progress-indicator"
+              />
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
       <View
-        onLayout={[Function]}
         style={
           Array [
             Object {
               "flexDirection": "row",
+              "height": 100,
+              "marginLeft": 8,
             },
-            null,
+            Object {
+              "marginRight": 8,
+            },
+            Object {},
           ]
         }
       >
@@ -1753,137 +2230,160 @@ exports[`ImageUploadPreview should render ImageUploadPreview with all uploading
           style={
             Array [
               Object {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "height": 50,
-                "marginLeft": 5,
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 10,
+                "height": 100,
+                "width": 100,
               },
-              Object {},
             ]
           }
+          testID="active-upload-progress-indicator"
         >
+          <Image
+            resizeMode="cover"
+            source={
+              Object {
+                "uri": "http://www.jackblack.com/tenac_iousd.bmp",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "borderRadius": 10,
+                  "height": 100,
+                  "width": 100,
+                },
+                Object {},
+              ]
+            }
+          />
           <View
-            testID="active-upload-progress-indicator"
-          >
-            <Image
-              resizeMode="cover"
-              source={
+            style={
+              Array [
                 Object {
-                  "uri": "http://www.jackblack.com/tenac_iousd.bmp",
-                }
-              }
-              style={
-                Array [
-                  Object {
-                    "borderRadius": 10,
-                    "height": 50,
-                    "width": 50,
-                  },
-                  Object {},
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#0000004D",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
-              }
-            />
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "width": "100%",
+                },
+                Object {
+                  "backgroundColor": "#000000CC",
+                },
+                Object {},
+              ]
+            }
+          >
             <View
               style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "backgroundColor": "#FFFFFF00",
-                    "height": "100%",
-                    "justifyContent": "center",
-                    "position": "absolute",
-                    "width": "100%",
-                  },
-                  Object {},
-                ]
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
               }
             >
-              <View
-                style={
-                  Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  }
-                }
-              >
-                <ActivityIndicator
-                  animating={true}
-                  color="grey"
-                  hidesWhenStopped={true}
-                  size="small"
-                  testID="upload-progress-indicator"
-                />
-              </View>
+              <ActivityIndicator
+                animating={true}
+                color="#F2F2F2"
+                hidesWhenStopped={true}
+                size="small"
+                testID="upload-progress-indicator"
+              />
             </View>
           </View>
-          <View
-            accessible={true}
-            focusable={true}
-            isTVSelectable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#000000CC",
+              "borderRadius": 24,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 8,
+              "top": 8,
+            }
+          }
+          testID="remove-image-upload-preview"
+        >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            focusable={false}
+            height={24}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            pathFill="#FFFFFF"
             style={
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": 20,
-                "height": 20,
-                "justifyContent": "center",
-                "opacity": 1,
-                "position": "absolute",
-                "right": 5,
-                "top": 5,
-                "width": 20,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="remove-image-upload-preview"
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
           >
-            <Image
-              source={
-                Object {
-                  "testUri": "../../../src/images/icons/close-round.png",
+            <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={4294967295}
+                fillRule={0}
+                propList={
+                  Array [
+                    "fill",
+                    "fillRule",
+                  ]
                 }
-              }
-              style={
-                Array [
-                  Object {
-                    "height": 10,
-                    "width": 10,
-                  },
-                  Object {},
-                ]
-              }
-            />
-          </View>
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
       </View>
     </View>
-  </RCTScrollView>
-</View>
+  </View>
+</RCTScrollView>
 `;