1import { Image, ImageProps } from 'expo-image';
2import * as React from 'react';
3import {
4  Animated,
5  Dimensions,
6  ImageProps as RNImageProps,
7  StyleSheet,
8  Text,
9  View,
10  Image as RNImage,
11} from 'react-native';
12
13import { Colors } from '../../constants';
14import ImageTestView from './ImageTestView';
15import { resolveProps } from './resolveProps';
16
17type ImageTest = {
18  name: string;
19  props: ImageProps | RNImageProps;
20  loadOnDemand?: boolean;
21  testInformation?: string;
22};
23
24type PropsType = {
25  test: ImageTest;
26  animValue?: Animated.Value;
27};
28
29export default function ImageTestListItem({ test, animValue }: PropsType) {
30  const imageProps = resolveProps(test.props, animValue);
31
32  return (
33    <View style={styles.container}>
34      <View style={styles.header}>
35        <Text style={styles.title}>{test.name}</Text>
36      </View>
37      <View style={styles.content}>
38        <ImageTestView
39          style={styles.image}
40          imageProps={imageProps}
41          ImageComponent={Image}
42          loadOnDemand={test.loadOnDemand}
43        />
44        <View style={styles.spacer} />
45        <ImageTestView
46          style={styles.image}
47          imageProps={imageProps}
48          ImageComponent={RNImage}
49          loadOnDemand={test.loadOnDemand}
50        />
51      </View>
52    </View>
53  );
54}
55
56const styles = StyleSheet.create({
57  container: {
58    height: 160,
59    paddingHorizontal: 10,
60    paddingVertical: 5,
61    backgroundColor: 'white',
62    borderBottomColor: Colors.border,
63    borderBottomWidth: StyleSheet.hairlineWidth,
64  },
65  header: {
66    height: 32,
67    flexDirection: 'row',
68    alignItems: 'center',
69  },
70  title: {
71    fontSize: 15,
72    color: Colors.disabled,
73  },
74  content: {
75    flex: 1,
76    flexDirection: 'row',
77    justifyContent: 'space-around',
78    alignItems: 'center',
79  },
80  spacer: {
81    width: 10,
82  },
83  image: {
84    width: (Dimensions.get('window').width - 30) / 2,
85    height: 160 - 10 - 32,
86  },
87});
88