2 files changed, 41 insertions, 2 deletions
diff --git a/src/view/com/util/images/ImageHorzList.tsx b/src/view/com/util/images/ImageHorzList.tsx
new file mode 100644
index 000000000..366424308
--- /dev/null
+++ b/src/view/com/util/images/ImageHorzList.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+  Image,
+  StyleProp,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+export function ImageHorzList({
+  uris,
+  onPress,
+  style,
+}: {
+  uris: string[]
+  onPress?: (index: number) => void
+  style?: StyleProp<ViewStyle>
+}) {
+  return (
+    <View style={[styles.flexRow, style]}>
+      {uris.map((uri, i) => (
+        <TouchableWithoutFeedback key={i} onPress={() => onPress?.(i)}>
+          <Image source={{uri}} style={styles.image} />
+        </TouchableWithoutFeedback>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  flexRow: {flexDirection: 'row'},
+  image: {
+    width: 100,
+    height: 100,
+    borderRadius: 4,
+    marginRight: 5,
+  },
+})
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index cb560dd35..5eb5b3c54 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -24,7 +24,7 @@ export function ImageLayoutGrid({
   style,
 }: {
   type: ImageLayoutGridType
-  uris: string
+  uris: string[]
   onPress?: (index: number) => void
   style?: StyleProp<ViewStyle>
 }) {
@@ -58,7 +58,7 @@ function ImageLayoutGridInner({
   containerInfo,
 }: {
   type: ImageLayoutGridType
-  uris: string
+  uris: string[]
   onPress?: (index: number) => void
   containerInfo: Dim
 }) {