1import { Image, ImageSource } from 'expo-image';
2import { useCallback, useState } from 'react';
3import { StyleSheet, Text, View } from 'react-native';
4
5import Button from '../../components/Button';
6import { Colors } from '../../constants';
7
8const generateSeed = () => 1 + Math.round(Math.random() * 10);
9
10export default function ImagePlaceholderScreen() {
11  const [source, setSource] = useState<ImageSource | null>(null);
12
13  const loadAnyImage = useCallback(() => {
14    setSource({ uri: getRandomImageUri() });
15  }, [source]);
16
17  const resetSource = useCallback(() => {
18    setSource(null);
19  }, [source]);
20
21  return (
22    <View style={styles.container}>
23      <Image
24        style={styles.image}
25        source={source ?? []}
26        placeholder={require('../../../assets/images/expo-icon.png')}
27        cachePolicy="none"
28      />
29
30      <View style={styles.actionsContainer}>
31        <Text style={styles.text}>
32          At first you should see only a placeholder{'\n'}
33          as the source is not defined yet
34        </Text>
35
36        <Text style={styles.text}>
37          Set one below and try it multiple times{'\n'}
38          to confirm that the placeholder is not{'\n'}
39          displayed when switching the sources{'\n'}
40          ��
41        </Text>
42        <Button style={styles.actionButton} title="Set to a random source" onPress={loadAnyImage} />
43
44        <Text style={styles.text}>
45          Now reset it back to the placeholder{'\n'}
46          ��
47        </Text>
48        <Button style={styles.actionButton} title="Reset the source" onPress={resetSource} />
49      </View>
50    </View>
51  );
52}
53
54function getRandomImageUri(): string {
55  return `https://picsum.photos/seed/${generateSeed()}/3000/2000`;
56}
57
58const styles = StyleSheet.create({
59  container: {
60    flex: 1,
61    padding: 20,
62  },
63  image: {
64    height: 200,
65    borderWidth: 1,
66    borderColor: Colors.border,
67  },
68  actionsContainer: {
69    alignItems: 'center',
70    padding: 10,
71  },
72  actionButton: {
73    marginVertical: 15,
74  },
75  text: {
76    marginTop: 15,
77    color: Colors.secondaryText,
78    textAlign: 'center',
79  },
80});
81