import i18n from 'i18n-js'; import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Button, Headline, Text } from 'react-native-paper'; import TouchableRipple from 'react-native-paper/src/components/TouchableRipple/index'; import { DefaultView } from '../../components/containers'; import SpaceSky from '../../components/decorations/space-sky'; import { useGlobals } from '../../contexts/global'; import Female from '../../svgs/Female'; import Leo from '../../svgs/Leo'; import Male from '../../svgs/Male'; /** * @param navigation * @returns {*} * @constructor */ function SexScreen({ navigation }) { const [{ session }, dispatch] = useGlobals(); const [sex, setSex] = React.useState(''); const buttonDisabled = !sex; const _handleContinue = () => { dispatch({ type: 'setSession', fields: { sex }, }); navigation.push('Relationship'); }; return ( <DefaultView> <SpaceSky /> <Leo width={60} height={60} style={styles.leo} /> <View style={{ flex: 1 }} /> <View style={styles.textContainer}> <Headline style={styles.textHeadline}>{i18n.t('Your gender')}</Headline> <Text style={styles.textText}> {i18n.t( '{name}, to give you accurate and personal information we need to know some info', { name: session.name } )} </Text> </View> <View style={styles.sexContainer}> <TouchableRipple onPress={() => setSex('Male')} rippleColor="rgba(0,0,0,0)" > <View> <Male style={{ opacity: sex === 'Male' ? 1 : 0.5 }} /> <Text style={styles.sexText}>{i18n.t('Male')}</Text> </View> </TouchableRipple> <TouchableRipple onPress={() => setSex('Female')} rippleColor="rgba(0,0,0,0)" > <View> <Female style={{ opacity: sex === 'Female' ? 1 : 0.5 }} /> <Text style={styles.sexText}>{i18n.t('Female')}</Text> </View> </TouchableRipple> </View> <View style={styles.buttonContainer}> <Button mode="contained" disabled={buttonDisabled} onPress={_handleContinue} > {i18n.t('Continue')} </Button> </View> </DefaultView> ); } const styles = StyleSheet.create({ constellation: { zIndex: 0, position: 'absolute', bottom: 20, left: 20, opacity: 0.1, }, leo: { zIndex: 0, position: 'absolute', top: 20, right: 20, opacity: 0.2, }, textContainer: { flex: 1, alignSelf: 'center', paddingHorizontal: 20, }, textHeadline: { textAlign: 'center', textTransform: 'uppercase', fontWeight: 'bold', }, textText: { textAlign: 'center', paddingVertical: 5, }, logoContainer: { flex: 1, alignSelf: 'center', paddingVertical: 25, zIndex: 1, }, sexContainer: { flex: 1, paddingHorizontal: 50, flexDirection: 'row', justifyContent: 'space-between', }, sexText: { textAlign: 'center', textTransform: 'uppercase', fontWeight: 'bold', }, buttonContainer: { flex: 1, paddingHorizontal: 20, paddingTop: 35, justifyContent: 'flex-end', marginBottom: 20, }, }); export default SexScreen;