import React, { useRef, useCallback } from 'react'; import { Image, View, ScrollView, KeyboardAvoidingView, Platform, TextInput, Alert, } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import * as Yup from 'yup'; import { Form } from '@unform/mobile'; import { FormHandles } from '@unform/core'; import getValidationErrors from '../../utils/getValidationErrors'; import api from '../../services/api'; import Input from '../../components/Input'; import Button from '../../components/Button'; import logoImg from '../../assets/logo.png'; import { Container, Title, BackToSign, BackToSignText, Icon } from './styles'; interface SignUpFormData { name: string; email: string; password: string; } const SignUp: React.FC = () => { const formRef = useRef<FormHandles>(null); const emailInputRef = useRef<TextInput>(null); const passwordInputRef = useRef<TextInput>(null); const navigation = useNavigation(); const handleSignUp = useCallback( async (data: SignUpFormData) => { try { formRef.current?.setErrors({}); const schema = Yup.object().shape({ name: Yup.string().required('Nome é obrigatório'), email: Yup.string() .required('E-mail é obrigatório') .email('Digite um e-mail válido'), password: Yup.string().min(6, 'No mínimo 6 dígitos'), }); await schema.validate(data, { abortEarly: false }); await api.post('/users', data); Alert.alert( 'Cadastro realizado com sucesso!', 'Você ja pode fazer login na aplicação.', ); navigation.goBack(); } catch (err) { if (err instanceof Yup.ValidationError) { const errors = getValidationErrors(err); formRef.current?.setErrors(errors); return; } Alert.alert( 'Erro na cadastro', 'Ocorreu um error ao fazer cadastro, tente novamente.', ); } }, [navigation], ); return ( <> <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined} enabled > <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flex: 1 }} > <Container> <Image source={logoImg} /> <View> <Title>Crie sua conta</Title> </View> <Form ref={formRef} onSubmit={handleSignUp}> <Input autoCapitalize="words" name="name" icon="user" placeholder="Nome" returnKeyType="next" onSubmitEditing={() => { emailInputRef.current?.focus(); }} /> <Input ref={emailInputRef} keyboardType="email-address" autoCorrect={false} autoCapitalize="none" name="email" icon="mail" placeholder="E-mail" returnKeyType="next" onSubmitEditing={() => passwordInputRef.current?.focus()} /> <Input ref={passwordInputRef} secureTextEntry name="password" icon="lock" placeholder="Senha" textContentType="newPassword" returnKeyType="send" onSubmitEditing={() => formRef.current?.submitForm()} /> <Button onPress={() => formRef.current?.submitForm()}> Cadastrar </Button> </Form> </Container> </ScrollView> </KeyboardAvoidingView> <BackToSign onPress={() => navigation.goBack()}> <Icon name="arrow-left" size={20} /> <BackToSignText>Voltar para logon</BackToSignText> </BackToSign> </> ); }; export default SignUp;