import React , { useCallback , useRef } from 'react' ; import { Image , View , KeyboardAvoidingView , Platform , ScrollView , TextInput , Alert } from 'react-native' ; import Icon from 'react-native-vector-icons/Feather' ; import { Form } from '@unform/mobile' ; import { FormHandles } from '@unform/core' ; import { useNavigation } from '@react-navigation/native' ; import * as Yup from 'yup' ; import api from '../../services/api' ; import logoImage from '../../assets/logo-mobile.png' ; import Button from '../../components/Button' ; import Input from '../../components/Input' ; import { Container , Title , BackToSignIn , BackToSignInText } from './styles' ; import getValidationErrors from '../../utils/getValidationErrors' ; interface SignUpFormData { name : string ; email : string ; password : string ; } const SignUp = ( ) => { const navigation = useNavigation ( ) ; const formRef = useRef < FormHandles > ( null ) ; const emailInputRef = useRef < TextInput > ( null ) ; const passwordInputRef = useRef < TextInput > ( null ) ; const handleSignUp = useCallback ( async ( data ) => { 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 digitos' ) , } ) ; await schema . validate ( data , { abortEarly : false } ) ; await api . post ( '/api/v1/users' , data ) ; Alert . alert ( 'Cadastro realizado com sucesso' , 'Você já pode fazer login na aplicação.' ) ; navigation . goBack ( ) ; } catch ( err ) { if ( err instanceof Yup . ValidationError ) { const error = getValidationErrors ( err ) ; formRef . current ?. setErrors ( error ) ; return ; } Alert . alert ( 'Erro no cadastro' , 'Erro ao fazer o cadastro, tente novamente.' ) ; } } , [ navigation ] ) ; return ( < > < KeyboardAvoidingView style = { { flex : 1 } } behavior = { Platform . OS === 'ios' ? 'padding' : undefined } enabled > < ScrollView contentContainerStyle = { { flex : 1 } } keyboardShouldPersistTaps = 'handled' > < Container > < Image source = { logoImage } /> < 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' onSubmitEditing = { ( ) => formRef . current ?. submitForm ( ) } /> < View > < Button onPress = { ( ) => formRef . current ?. submitForm ( ) } > Criar < /Button> < /View> < /Form> < /Container> < /ScrollView> < /KeyboardAvoidingView> < BackToSignIn onPress = { ( ) => { navigation . navigate ( 'SignIn' ) ; } } > < Icon name = 'arrow-left' size = { 20 } color = '#fff' / > < BackToSignInText > Voltar para logon < /BackToSignInText> < /BackToSignIn> < />); } ; export default SignUp ;