Allow images as well as videos

Item.tsx

@@ -1,42 +1,66 @@
-import {useState} from 'react'
-import {Dimensions, Pressable, Text, View} from 'react-native'
-import {DocumentPickerResponse} from 'react-native-document-picker'
+import {useMemo, useState} from 'react'
+import {Dimensions, Image, Pressable, Text, View} from 'react-native'
+import {DocumentPickerResponse, types} from 'react-native-document-picker'
 import Video from 'react-native-video'
 
 export default function Item({
-  value,
+  files,
   onLongPress,
+  selected,
+  paused,
+  setPaused,
 }: {
-  value: DocumentPickerResponse
+  files: DocumentPickerResponse[]
   onLongPress: () => void
+  selected: number
+  paused: boolean
+  setPaused: (value: boolean) => void
 }) {
-  const [paused, setPaused] = useState(false)
   const [width, setWidth] = useState(0)
+  const screenHeight = Dimensions.get('screen').height
+  const file = useMemo(() => files[selected], [files, selected])
 
-  const height = Dimensions.get('screen').height
+  const video = (
+    <Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
+      <Video
+        paused={paused}
+        style={{
+          height: screenHeight - screenHeight * 0.25,
+          width,
+          alignItems: 'center',
+        }}
+        source={{uri: file.uri}}
+        resizeMode="contain"
+        onLoad={response => {
+          setWidth(response.naturalSize.width)
+        }}
+      />
+    </Pressable>
+  )
+
+  const image = (
+    <Pressable onLongPress={onLongPress}>
+      <Image
+        source={{
+          uri: file.uri,
+          width: 300,
+          height: screenHeight - screenHeight * 0.25,
+        }}
+        resizeMode="contain"
+        onLoad={({nativeEvent}) => setWidth(nativeEvent.source.width)}
+      />
+    </Pressable>
+  )
 
   return (
     <View style={{alignItems: 'center'}}>
-      <Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
-        <Video
-          paused={paused}
-          style={{
-            height: height - height * 0.25,
-            width,
-            alignItems: 'center',
-          }}
-          source={{uri: value.uri}}
-          resizeMode="contain"
-          onLoad={response => {
-            setWidth(response.naturalSize.width)
-          }}
-        />
-      </Pressable>
+      {file.type?.includes('video') ? video : image}
       <Text
         style={{
           color: 'white',
+          margin: 10,
         }}>
-        {value.name}
+        {file.name} ({selected + 1}/ {files.length})
       </Text>
     </View>
   )