1import * as React from 'react';
2import { Text, View, StyleSheet, Image, Button, Platform } from 'react-native';
3
4import { addMultipleGifs, deleteAllGifs, getSingleGif } from './GifManagement';
5
6// those are Giphy.com ID's - they are hardcoded here,
7// but if you have Giphy API key - you can use findGifs() from gifFetching.ts
8const gifIds = ['YsTs5ltWtEhnq', 'cZ7rmKfFYOvYI', '11BCDu2iUc8Nvhryl7'];
9
10function AppMain() {
11  //download all gifs at startup
12  React.useEffect(() => {
13    (async () => {
14      await addMultipleGifs(gifIds);
15    })();
16
17    //and unload at the end
18    return () => {
19      deleteAllGifs();
20    };
21  }, []);
22
23  //file uri of selected gif
24  const [selectedUri, setUri] = React.useState(null);
25
26  const handleSelect = async id => {
27    try {
28      setUri(await getSingleGif(id));
29    } catch (e) {
30      console.error("Couldn't load gif", e);
31    }
32  };
33
34  const unloadAll = () => {
35    setUri(null);
36    deleteAllGifs();
37  };
38
39  return (
40    <View style={styles.container}>
41      <Text style={styles.header}>See contents of gifManagement.ts</Text>
42      <Text style={styles.paragraph}>Select one of the IDs</Text>
43
44      {gifIds.map((item, index) => (
45        <Button title={`Gif ${index + 1}`} key={item} onPress={() => handleSelect(item)} />
46      ))}
47
48      <Button title="Unload all" onPress={unloadAll} />
49
50      <Text style={styles.paragraph}>Selected URI: {selectedUri || 'none'}</Text>
51      {selectedUri != null && <Image style={{ height: 200 }} source={{ uri: selectedUri }} />}
52    </View>
53  );
54}
55
56const styles = StyleSheet.create({
57  container: {
58    flex: 1,
59    paddingTop: 20,
60    justifyContent: 'center',
61    backgroundColor: '#ecf0f1',
62    padding: 8,
63  },
64  header: {
65    margin: 24,
66    fontSize: 18,
67    fontWeight: 'bold',
68    textAlign: 'center',
69  },
70  paragraph: {
71    textAlign: 'center',
72    marginBottom: 15,
73  },
74});
75
76function UnsupportedPlatform() {
77  return (
78    <View style={styles.container}>
79      <Text style={styles.header}>
80        FileSystem doesn&#39;t support web. Run this on Android or iOS
81      </Text>
82    </View>
83  );
84}
85
86export default function App() {
87  return Platform.OS === 'android' || Platform.OS === 'ios' ? <AppMain /> : <UnsupportedPlatform />;
88}
89