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