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