1import { Image, ImageSource } from 'expo-image';
2import * as ImagePicker from 'expo-image-picker';
3import * as MediaLibrary from 'expo-media-library';
4import { useCallback, useState } from 'react';
5import { StyleSheet, Text, View } from 'react-native';
6
7import Button from '../../components/Button';
8import MonoText from '../../components/MonoText';
9import { Colors } from '../../constants';
10
11export default function ImagePlaceholderScreen() {
12  const [source, setSource] = useState<ImageSource | null>(null);
13
14  const pickImage = useCallback(async () => {
15    const { assets } = await ImagePicker.launchImageLibraryAsync();
16    const uri = assets?.[0].uri;
17
18    if (uri) {
19      setSource({ uri });
20    } else {
21      setSource(null);
22    }
23  }, []);
24
25  const showRandomAsset = useCallback(async () => {
26    const { assets } = await MediaLibrary.getAssetsAsync();
27    const randomIndex = Math.floor(Math.random() * assets.length);
28    const randomAsset = assets[randomIndex];
29
30    if (randomAsset) {
31      setSource({ uri: randomAsset.uri });
32    } else {
33      setSource(null);
34    }
35  }, []);
36
37  return (
38    <View style={styles.container}>
39      <Image
40        style={styles.image}
41        source={source}
42        placeholder={require('../../../assets/images/expo-icon.png')}
43        cachePolicy="none"
44        onError={(event) => {
45          alert(`Failed to load the image: ${event.error}`);
46        }}
47      />
48
49      <View style={styles.actionsContainer}>
50        <Text style={styles.text}>Integration with expo-image-picker</Text>
51        <Button style={styles.actionButton} title="Launch image picker" onPress={pickImage} />
52
53        <Text style={styles.text}>Integration with expo-media-library</Text>
54        <Button
55          style={styles.actionButton}
56          title="Show random recent asset"
57          onPress={showRandomAsset}
58        />
59
60        <Text style={styles.text}>Current source ��</Text>
61        <MonoText>{JSON.stringify(source, null, 2)}</MonoText>
62      </View>
63    </View>
64  );
65}
66
67const styles = StyleSheet.create({
68  container: {
69    flex: 1,
70    padding: 20,
71  },
72  image: {
73    height: 220,
74    borderWidth: 1,
75    borderColor: Colors.border,
76  },
77  actionsContainer: {
78    alignItems: 'center',
79    padding: 10,
80  },
81  actionButton: {
82    marginVertical: 15,
83  },
84  text: {
85    marginTop: 15,
86    color: Colors.secondaryText,
87    textAlign: 'center',
88  },
89});
90