import React from 'react' import { StyleSheet, View, Text, Platform, } from 'react-native' import Button from 'components/Button' import { StackNavigationProp } from '@react-navigation/stack' import colors from 'utils/colors' import { MaterialIcons } from '@expo/vector-icons' type StackParamList = { Create: undefined; Home: undefined; Join: undefined; Party: undefined; } type NavigationProp = StackNavigationProp< StackParamList, 'Home' > type Props = { navigation: NavigationProp; } const HomeScreen = React.memo((props: Props): React.ReactElement => { const { navigation } = props return ( <View style={styles.container}> <View style={styles.headerContainer}> <MaterialIcons style={styles.icon} name="restaurant" color={colors.white} size={40} /> <Text style={styles.header}>Let's Fork</Text> </View> <View> <Button color="white" size="lg" onPress={(): void => navigation.navigate('Create')} > CREATE A PARTY </Button> <Button color="white" size="lg" onPress={(): void => navigation.navigate('Join')} > JOIN A PARTY </Button> </View> </View> ) }) const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.purple, alignItems: 'center', justifyContent: 'space-between', paddingTop: 140, paddingBottom: 64, }, headerContainer: { flexDirection: 'row', alignItems: 'center', }, icon: { paddingRight: 8, }, header: { color: colors.white, fontSize: 48, fontFamily: 'VarelaRound_400Regular', paddingTop: Platform.OS === 'ios' ? 4 : 0, }, }) export default HomeScreen