97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import { StatusBar } from 'expo-status-bar';
|
|
import { StyleSheet, Text, View, Image } from 'react-native';
|
|
import { useState } from 'react';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
|
|
import ImageViewer from './components/ImageViewer';
|
|
import Button from './components/Button';
|
|
import CircleButton from './components/CircleButton';
|
|
import IconButton from './components/IconButton';
|
|
import Picker from './components/Picker';
|
|
|
|
const backgroundImage = require('./assets/images/background-image.png')
|
|
|
|
export default function App() {
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
const [showAppOptions, setShowAppOptions] = useState(false);
|
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
|
|
const pickImageAsync = async () => {
|
|
let result = await ImagePicker.launchImageLibraryAsync({
|
|
allowsEditing: true,
|
|
quality: 1,
|
|
});
|
|
|
|
if (!result.canceled) {
|
|
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 () => {
|
|
// we will implement this later
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.imageContainer}>
|
|
<ImageViewer placeholderImageSource={backgroundImage} selectedImage={selectedImage} />
|
|
</View>
|
|
{showAppOptions ? (
|
|
<View style={styles.optionsContainer}>
|
|
<View style={styles.optionsRow}>
|
|
<IconButton icon="refresh" label="Reset" onPress={onReset} />
|
|
<CircleButton onPress={onAddSticker} />
|
|
<IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View style={styles.buttonContainer}>
|
|
<Button label="Choose a photo" override={true} onPress={pickImageAsync} />
|
|
<Button label="Use this photo" override={false} onPress={() => setShowAppOptions(true)} />
|
|
</View>
|
|
)}
|
|
<Picker isVisible={isModalVisible} onClose={onModalClose}>
|
|
{/* A list of emoji component will go here */}
|
|
</Picker>
|
|
<StatusBar style="auto" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#e9ffdb',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
imageContainer: {
|
|
flex: 1,
|
|
paddingTop: 59
|
|
},
|
|
buttonContainer: {
|
|
flex: 1 / 3,
|
|
alignItems: 'center',
|
|
rowGap: 10
|
|
},
|
|
optionsContainer: {
|
|
position: 'absolute',
|
|
bottom: 80,
|
|
},
|
|
optionsRow: {
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
}
|
|
});
|