1import { Platform } from 'expo-modules-core';
2
3import { optionalRequire } from '../../navigation/routeBuilder';
4import ComponentListScreen, { ListElement } from '../ComponentListScreen';
5
6export const ImageScreens = [
7  {
8    name: 'Comparison with original image',
9    route: 'image/comparison',
10    options: {},
11    getComponent() {
12      return optionalRequire(() => require('./ImageComparisonScreen'));
13    },
14  },
15  {
16    name: 'List with thousands images',
17    route: 'image/flashlist',
18    options: {},
19    getComponent() {
20      return optionalRequire(() => require('./ImageFlashListScreen'));
21    },
22  },
23  {
24    name: 'Image formats',
25    route: 'image/formats',
26    getComponent() {
27      return optionalRequire(() => require('./ImageFormatsScreen'));
28    },
29  },
30  {
31    name: 'Resizable image',
32    route: 'image/resizable',
33    getComponent() {
34      return optionalRequire(() => require('./ImageResizableScreen'));
35    },
36  },
37  {
38    name: 'Content fit and position',
39    route: 'image/content-fit',
40    getComponent() {
41      return optionalRequire(() => require('./ImageContentFitScreen'));
42    },
43  },
44  {
45    name: 'Events',
46    route: 'image/events',
47    getComponent() {
48      return optionalRequire(() => require('./ImageEventsScreen'));
49    },
50  },
51  {
52    name: 'Prioritizing images',
53    route: 'image/priority',
54    getComponent() {
55      return optionalRequire(() => require('./ImagePriorityScreen'));
56    },
57  },
58  {
59    name: 'Placeholder',
60    route: 'image/placeholder',
61    getComponent() {
62      return optionalRequire(() => require('./ImagePlaceholderScreen'));
63    },
64  },
65  {
66    name: 'Background',
67    route: 'image/background',
68    getComponent() {
69      return optionalRequire(() => require('./ImageBackgroundScreen'));
70    },
71  },
72  {
73    name: 'Static responsiveness using srcSet',
74    route: 'image/srcset',
75    getComponent() {
76      return optionalRequire(() => require('./ImageSrcSetScreen'));
77    },
78  },
79  {
80    name: 'Transitions',
81    route: 'image/transitions',
82    getComponent() {
83      return optionalRequire(() => require('./ImageTransitionsScreen'));
84    },
85  },
86  {
87    name: 'Hash Placeholders',
88    route: 'image/hash-placeholders',
89    getComponent() {
90      return optionalRequire(() => require('./ImageHashPlaceholdersScreen'));
91    },
92  },
93  {
94    name: 'Custom cache key',
95    route: 'image/cache-key',
96    getComponent() {
97      return optionalRequire(() => require('./ImageCacheKeyScreen'));
98    },
99  },
100  {
101    name: 'List of GIFs',
102    route: 'image/gifs',
103    getComponent() {
104      return optionalRequire(() => require('./ImageGifsScreen'));
105    },
106  },
107  {
108    name: 'MediaLibrary and ImagePicker integration',
109    route: 'image/media-library',
110    getComponent() {
111      return optionalRequire(() => require('./ImageMediaLibraryScreen'));
112    },
113  },
114];
115
116if (Platform.OS === 'ios') {
117  ImageScreens.push({
118    name: 'Live Text Interaction',
119    route: 'image/live-text-interaction',
120    getComponent() {
121      return optionalRequire(() => require('./ImageLiveTextInteractionScreen'));
122    },
123  });
124}
125
126export default function ImageScreen() {
127  const apis: ListElement[] = ImageScreens.map((screen) => {
128    return {
129      name: screen.name,
130      isAvailable: true,
131      route: `/components/${screen.route}`,
132    };
133  });
134  return <ComponentListScreen apis={apis} sort={false} />;
135}
136