1import { Image, ImageProps } from 'expo-image';
2import { useState } from 'react';
3import { StyleSheet, View, Text } from 'react-native';
4
5import Button from '../../components/Button';
6import { Colors } from '../../constants';
7
8export default function ImagePriorityScreen() {
9  const [id, setId] = useState(0);
10
11  const defaultProps: Partial<ImageProps> = {
12    style: styles.image,
13    contentFit: 'cover',
14    cachePolicy: 'none',
15  };
16  return (
17    <View style={styles.container}>
18      <View style={styles.imageRow}>
19        <View style={styles.imageBox}>
20          <Image
21            source={{ uri: `https://picsum.photos/id/${id + 1}/1000/2000` }}
22            {...defaultProps}
23            priority="low"
24          />
25          <Text style={styles.label}>LOW</Text>
26        </View>
27        <View style={styles.imageBox}>
28          <Image
29            source={{ uri: `https://picsum.photos/id/${id + 2}/1000/2000` }}
30            {...defaultProps}
31            priority="normal"
32          />
33          <Text style={styles.label}>NORMAL</Text>
34        </View>
35        <View style={styles.imageBox}>
36          <Image
37            source={{ uri: `https://picsum.photos/id/${id + 3}/1000/2000` }}
38            {...defaultProps}
39            priority="high"
40          />
41          <Text style={styles.label}>HIGH</Text>
42        </View>
43      </View>
44      <Button title="Reload" onPress={() => setId(id + 3)} />
45    </View>
46  );
47}
48
49const styles = StyleSheet.create({
50  container: {
51    flex: 1,
52    margin: 10,
53    justifyContent: 'flex-start',
54  },
55  imageRow: {
56    flex: 1,
57    flexDirection: 'row',
58    justifyContent: 'space-evenly',
59  },
60  imageBox: {
61    borderWidth: 1,
62    borderColor: Colors.border,
63    height: '90%',
64    width: '33%',
65  },
66  image: {
67    height: '100%',
68    width: '100%',
69  },
70  label: {
71    position: 'absolute',
72    bottom: -20,
73    left: 0,
74  },
75});
76