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';
8
9const PlaceholderImage = require('./assets/images/background-image.png');
10
11export default function App() {
12  const [selectedImage, setSelectedImage] = useState(null);
13
14  const pickImageAsync = async () => {
15    let result = await ImagePicker.launchImageLibraryAsync({
16      allowsEditing: true,
17      quality: 1,
18    });
19
20    if (!result.canceled) {
21      setSelectedImage(result.assets[0].uri);
22    } else {
23      alert("You did not select any image.");
24    }
25  };
26
27  return (
28    <View style={styles.container}>
29      <View style={styles.imageContainer}>
30        <ImageViewer placeholderImageSource={PlaceholderImage} selectedImage={selectedImage} />
31      </View>
32      <View style={styles.footerContainer}>
33        <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
34        <Button label="Use this photo" />
35      </View>
36      <StatusBar style="auto" />
37    </View>
38  );
39}
40
41const styles = StyleSheet.create({
42  container: {
43    flex: 1,
44    backgroundColor: '#25292e',
45    alignItems: 'center',
46  },
47  imageContainer: {
48    flex:1,
49    paddingTop: 58
50  },
51  footerContainer: {
52    flex: 1 / 3,
53    alignItems: 'center',
54  },
55});
56