Allow images as well as videos

App.tsx

@@ -4,8 +4,8 @@ import DocumentPicker, {
   DocumentPickerResponse,
   types,
 } from 'react-native-document-picker'
-import Video from 'react-native-video'
 import {backgroundColor} from './constants'
+import Item from './Item'
 
 const buttonWidth = '45%'
 
@@ -13,12 +13,11 @@ export default function App() {
   const [files, setFiles] = useState<DocumentPickerResponse[]>([])
   const [selected, setSelected] = useState(0)
   const [paused, setPaused] = useState(false)
-  const [width, setWidth] = useState(0)
-
-  const height = Dimensions.get('screen').height
 
   const pick = async () => {
-    const picked = await DocumentPicker.pickMultiple({type: types.video})
+    const picked = await DocumentPicker.pickMultiple({
+      type: [types.video, types.images],
+    })
     setSelected(0)
     console.log(`Picked ${picked.length} files.`)
     setFiles(picked)
@@ -47,29 +46,14 @@ export default function App() {
         padding: 10,
       }}>
       {files.length > 0 ? (
-        <View style={{alignItems: 'center'}}>
-          <Pressable onLongPress={pick} onPress={() => setPaused(!paused)}>
-            <Video
+        <>
+          <Item
             paused={paused}
-              style={{
-                height: height - height * 0.25,
-                width,
-                alignItems: 'center',
-              }}
-              source={{uri: files[selected].uri}}
-              resizeMode="contain"
-              onLoad={response => {
-                setWidth(response.naturalSize.width)
-              }}
+            setPaused={setPaused}
+            onLongPress={pick}
+            selected={selected}
+            files={files}
           />
-          </Pressable>
-          <Text
-            style={{
-              color: 'white',
-              margin: 10,
-            }}>
-            {files[selected].name} ({selected + 1}/ {files.length})
-          </Text>
           <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
             <View style={{width: buttonWidth, marginRight: 10}}>
               <Button title="Prev" disabled={selected <= 0} onPress={prev} />
@@ -82,9 +66,11 @@ export default function App() {
               />
             </View>
           </View>
-        </View>
+        </>
       ) : (
-        <Pressable onPress={pick}>
+        <Pressable
+          onPress={pick}
+          style={{height: '100%', justifyContent: 'center'}}>
           <Text style={{color: 'white', fontSize: 24}}>Select video(s)...</Text>
         </Pressable>
       )}

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
-
-  return (
-    <View style={{alignItems: 'center'}}>
+  const video = (
     <Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
       <Video
         paused={paused}
         style={{
-            height: height - height * 0.25,
+          height: screenHeight - screenHeight * 0.25,
           width,
           alignItems: 'center',
         }}
-          source={{uri: value.uri}}
+        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'}}>
+      {file.type?.includes('video') ? video : image}
       <Text
         style={{
           color: 'white',
+          margin: 10,
         }}>
-        {value.name}
+        {file.name} ({selected + 1}/ {files.length})
       </Text>
     </View>
   )