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