Introdução
Criar um formulário no React Native pode ser uma tarefa desafiadora. Lidar com o estado do formulário, validação e manipulação de dados pode ser complicado. No entanto, com as bibliotecas certas, como Formik e Yup, podemos simplificar esse processo.
Como fazer um formulário simples no React Native
Vamos começar criando um formulário simples no React Native. Primeiro, você precisa instalar o Node.js, o npm e o React Native CLI em seu sistema. Depois de instalados, você pode criar um novo projeto React Native com o seguinte comando:
npx react-native init FormApp
Dentro do diretório do projeto, crie um novo arquivo chamado App.js
. Aqui, vamos importar os componentes necessários e criar um componente de formulário.
import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
const Form = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = () => {
// Lógica de envio do formulário
};
return (
<View>
<Text>Nome:</Text>
<TextInput
value={name}
onChangeText={setName}
placeholder={'Digite seu nome'}
/>
<Text>Email:</Text>
<TextInput
value={email}
onChangeText={setEmail}
placeholder={'Digite seu email'}
/>
<Button
title={'Enviar'}
onPress={handleSubmit}
/>
</View>
);
};
export default Form;
Implementação do Formik
Agora, vamos aprimorar nosso formulário com a biblioteca Formik. O Formik nos ajuda a lidar com o estado do formulário de uma maneira mais eficiente.
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { Formik } from 'formik';
const Form = () => {
return (
<Formik
initialValues={{ name: '', email: '' }}
onSubmit={(values) => console.log(values)}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<Text>Nome:</Text>
<TextInput
onChangeText={handleChange('name')}
onBlur={handleBlur('name')}
value={values.name}
placeholder={'Digite seu nome'}
/>
<Text>Email:</Text>
<TextInput
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
placeholder={'Digite seu email'}
/>
<Button onPress={handleSubmit} title="Enviar" />
</View>
)}
</Formik>
);
};
export default Form;
Validação de campos
Para a validação de campos, vamos usar a biblioteca Yup. O Yup nos permite definir um esquema de validação para nossos campos de formulário.
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
name: Yup.string().required('Nome é obrigatório'),
email: Yup.string().email('Email inválido').required('Email é obrigatório'),
});
const Form = () => {
return (
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={validationSchema}
onSubmit={(values) => console.log(values)}
>
{({ handleChange, handleBlur, handleSubmit, values, errors }) => (
<View>
<Text>Nome:</Text>
<TextInput
onChangeText={handleChange('name')}
onBlur={handleBlur('name')}
value={values.name}
placeholder={'Digite seu nome'}
/>
{errors.name && <Text>{errors.name}</Text>}
<Text>Email:</Text>
<TextInput
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
placeholder={'Digite seu email'}
/>
{errors.email && <Text>{errors.email}</Text>}
<Button onPress={handleSubmit} title="Enviar" />
</View>
)}
</Formik>
);
};
export default Form;
Conclusão
Como você pode ver, criar um formulário no React Native pode ser simplificado usando as bibliotecas certas. Com Formik e Yup, podemos criar formulários eficientes e profissionais com validação de campos. Espero que este guia tenha sido útil para você. Se você tiver mais perguntas, fique à vontade para perguntar.