1import { useState } from 'react';
2import { StatusBar } from 'expo-status-bar';
3import { StyleSheet, View } from 'react-native';
4import * as ImagePicker from 'expo-image-picker';
5
6import Button from './components/Button';
7import ImageViewer from './components/ImageViewer';
8import CircleButton from './components/CircleButton';
9import IconButton from './components/IconButton';
10
11const PlaceholderImage = require('./assets/images/background-image.png');
12
13export default function App() {
14  const [showAppOptions, setShowAppOptions] = useState(false);
15  const [selectedImage, setSelectedImage] = useState(null);
16
17  const pickImageAsync = async () => {
18    let result = await ImagePicker.launchImageLibraryAsync({
19      allowsEditing: true,
20      quality: 1,
21    });
22
23    if (!result.canceled) {
24      setSelectedImage(result.assets[0].uri);
25      setShowAppOptions(true);
26    } else {
27      alert("You did not select any image.");
28    }
29  };
30
31  const onReset = () => {
32    setShowAppOptions(false);
33  };
34
35  const onAddSticker = () => {
36    // we will implement this later
37  };
38
39  const onSaveImageAsync = async () => {
40    // we will implement this later
41  };
42
43  return (
44    <View style={styles.container}>
45      <View style={styles.imageContainer}>
46        <ImageViewer placeholderImageSource={PlaceholderImage} selectedImage={selectedImage} />
47      </View>
48      {showAppOptions ? (
49        <View style={styles.optionsContainer}>
50          <View style={styles.optionsRow}>
51            <IconButton icon="refresh" label="Reset" onPress={onReset} />
52            <CircleButton onPress={onAddSticker} />
53            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
54          </View>
55        </View>
56      ) : (
57        <View style={styles.footerContainer}>
58          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
59          <Button
60            label="Use this photo"
61            onPress={() => setShowAppOptions(true)}
62          />
63        </View>
64      )}
65      <StatusBar style="auto" />
66    </View>
67  );
68}
69
70const styles = StyleSheet.create({
71  container: {
72    flex: 1,
73    backgroundColor: '#25292e',
74    alignItems: 'center',
75  },
76  imageContainer: {
77    flex:1,
78    paddingTop: 58
79  },
80  footerContainer: {
81    flex: 1 / 3,
82    alignItems: 'center',
83  },
84  optionsContainer: {
85    position: "absolute",
86    bottom: 80,
87  },
88  optionsRow: {
89    alignItems: 'center',
90    flexDirection: 'row',
91  },
92});
93