Como criar formulários no React Native

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.