-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
112 lines (95 loc) · 3.01 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/* Components */
import EmojiPicker from './components/EmojiPicker';
import EmojiList from './components/EmojiList';
import CircleButton from './components/CircleButton';
import IconButton from './components/IconButton';
import Button from './components/Button';
import ImageViewer from './components/ImageViewer';
const PlaceholderImg = require('./assets/images/background-image.png');
/* Libraries */
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { useState } from 'react';
/* Tailwindcss Configuration */
import './global.css';
import "./nativewind-output";
import { NativeWindStyleSheet } from "nativewind";
NativeWindStyleSheet.setOutput({
default: "native",
});
export default function App() {
const [pickedEmoji, setPickedEmoji] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [showAppOptions, setShowAppOptions] = useState(false);
const [selectedImage, setSelectedImage] = useState(null);
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
quality: 1,
})
if (!result.canceled) {
console.log(result);
setSelectedImage(result.assets[0].uri);
setShowAppOptions(true);
} else {
alert('You did not select any image.')
};
};
const onReset = () => {
setShowAppOptions(false);
};
const onAddSticker = () => {
setIsModalVisible(true);
};
const onModalClose = () => {
setIsModalVisible(false);
}
const onSaveImageAsync = async () => { };
return (
<View className='flex-1 items-center justify-center bg-black'>
<View style={styles.imageContainer}>
<ImageViewer
placeholderImageSource={PlaceholderImg}
selectedImage={selectedImage} />
</View>
{showAppOptions ? (
<View className="absolute bottom-20">
<View className="flex justify-around items-center flex-row w-full">
<IconButton icon='refresh' label='Reset' onPress={onReset} />
<CircleButton onPress={onAddSticker} />
<IconButton icon='save-alt' label='Save' onPress={onSaveImageAsync} />
</View>
</View>
) : (
<View style={styles.footerContainer}>
<Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
<Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
</View>
)}
<EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
<EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
</EmojiPicker>
<StatusBar style='auto' />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
flex: 1,
paddingTop: 58,
},
image: {
width: 320,
height: 440,
borderRadius: 20,
},
footerContainer: {
flex: 1 / 3,
alignItem: 'center',
}
});