1import { ResizeMode, Video } from 'expo-av';
2import { ImagePickerAsset, ImagePickerResult } from 'expo-image-picker';
3import React from 'react';
4import { View, StyleSheet, Image } from 'react-native';
5
6export default function ImagePickerAssetsList(result: ImagePickerResult): JSX.Element | void {
7  return (
8    <View>
9      {result.assets?.map((asset, index) => (
10        <AssetView key={index} asset={asset} />
11      ))}
12    </View>
13  );
14}
15
16function AssetView({ asset }: { asset: ImagePickerAsset }) {
17  if (!isAnObjectWithUriAndType(asset)) {
18    return null;
19  }
20  return (
21    <View style={styles.container}>
22      {asset.type === 'video' ? (
23        <Video
24          source={{ uri: asset.uri }}
25          style={styles.video}
26          resizeMode={ResizeMode.CONTAIN}
27          shouldPlay
28          isLooping
29        />
30      ) : (
31        <Image source={{ uri: asset.uri }} style={styles.image} />
32      )}
33    </View>
34  );
35}
36
37function isAnObjectWithUriAndType(obj: unknown): obj is { uri: string; type: string } {
38  return (
39    typeof obj === 'object' &&
40    obj !== null &&
41    typeof (obj as any).uri === 'string' &&
42    typeof (obj as any).type === 'string'
43  );
44}
45
46const styles = StyleSheet.create({
47  container: {
48    alignItems: 'center',
49    backgroundColor: '#000000',
50  },
51  image: {
52    width: 300,
53    height: 200,
54    resizeMode: 'contain',
55  },
56  video: {
57    width: 300,
58    height: 200,
59  },
60});
61