Como criar formulário cadastrar no aplicativo com React Native


Neste tutorial, será apresentado como criar um formulário de cadastro no aplicativo com React Native. 

Primeiramente, será abordado como criar o formulário com React Native. 

Em seguida, será explicado como receber os dados do formulário. 

Por fim, será demonstrado como enviar os dados do formulário para a API.

Download do código fonte desenvolvido na aula: Download

Curso React Native e Node.js: Mais Detalhes do Curso

Playlist completa sobre Laravel: Acessar

Receber as aulas gratuitas do curso React Native e Node.js: Acessar


Para começar, é utilizado como base o projeto da aula "Como criar formulário editar no aplicativo com React Native".

Criado o arquivo "src/pages/AddUser/index.js", ou seja, na tela de edição.

import { ScrollView } from "react-native";

// Criar e exportar a função cadastrar usuário
export default function EditUser() {  

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      
    </ScrollView>
  );
};

Acrescentada a rota para a tela de edição no arquivo "src/routes/routes.js".

// Importar a página
import AddUser from '../pages/AddUser';
{/* Carregar a tela cadastrar usuário */}
<Stack.Screen 
    name="EditUser"
    component={EditUser}
    options={{ headerTitle: "Cadastrar Usuário"}}
    // options={{ headerShown: false }}
/>

Criado o CSS do botão cadastrar que será adicionado na tela listar.

// Listar
export const TitleList = styled.View`
    flex-direction: row;
    justify-content: space-between;
    padding: 25px 15px 5px 15px;
    width: 100%;
`;

export const TitleTextList = styled.Text`
    color: #f5f5f5;
    font-size: 22px;
    padding-top: 7px;
    flex: 1;
    justify-content: flex-start;
`;

export const TitleBtnList = styled.View`
    justify-content: flex-end;
    align-self: flex-end;
`;

export const BtnAddTitleList = styled.View`
    margin-top: 5px;
    background-color: #5004a7;
    padding: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: #f5f5f5;
`;

export const TxtAddTitleList = styled.Text`
    color: #fff;
    font-size: 19px;
`;

Criado o botão na tela listar para redirecionado para a tela com o formulário de cadastro.

<TitleList>
  <TitleTextList>
    Usuários
  </TitleTextList>
  <TitleBtnList>
    <TouchableOpacity onPress={() => navigation.navigate('AddUser')}>
      <BtnAddTitleList>
        <TxtAddTitleList>
          Cadastrar
        </TxtAddTitleList>
      </BtnAddTitleList>
    </TouchableOpacity>
  </TitleBtnList>
</TitleList>

Na tela de cadastro, ou seja, no arquivo 'src/pages/AddUser/index.js', implementado o formulário de cadastro.

return (
  <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <Container>

      <LabelFormDash>* Nome</LabelFormDash><InputFormDash
        placeholder='Nome completo'
        autoCorrect={false}
        value={name}
        onChangeText={text => setName(text)}
      />

      <LabelFormDash>* E-mail</LabelFormDash>
      <InputFormDash
        placeholder='Melhor e-mail'
        autoCorrect={false}
        keyboardType='email-address'
        autoCapitalize='none'
        value={email}
        onChangeText={text => setEmail(text)}
      />

      <TxtRequiredFormDash>* Campo obrigatório</TxtRequiredFormDash>

      <BtnSubmitFormDash onPress={addUser}>
        <TxtSubmitFormDash>
          Salvar
        </TxtSubmitFormDash>
      </BtnSubmitFormDash>

    </Container>
  </ScrollView>
);

Em seguida, feita a requisição para a API e os dados do formulário foram enviados para cadastrar no banco de dados. Abaixo está o código completo do arquivo com o formulário de cadastro em React Native.

// useEffect - Criar efeitos colaterais em componentes funcionais
// useState - Adicionar estado ao componente
import { useState } from "react";

// Incluir os componentes utilizado para estruturar o conteúdo
import { Alert, ScrollView } from "react-native";

// Importar o arquivo com os componentes CSS
import { BtnSubmitFormDash, Container, InputFormDash, LabelFormDash, TxtRequiredFormDash, TxtSubmitFormDash } from '../../styles/custom_adm';

// Incluir a função navegar entre as telas
import { useNavigation } from "@react-navigation/native";

// Arquivo com as configurações da API
import api from "../../config/api";

// Criar e exportar a função cadastrar usuário
export default function AddUser() {

  // Navegar entre as telas
  const navigation = useNavigation();

  // Armazenar as informações do usuário
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // Processar/submeter os dados do formulário
  const addUser = async () => {

    // Requisição para a API indicando a rota e os dados
    await api.post('/users', { name, email })
      .then((response) => { // Acessar o then quando a API retornar status sucesso

        Alert.alert("Sucesso", response.data.mensagem);

        // Redirecionar o usuário para tela visualizar usuário
        navigation.navigate('ListUsers');

      }).catch((err) => {// Acessar o catch quando a API retornar status erro

        if (err.response) {  // Acessa o IF quando a API retornar erro

          Alert.alert("Ops", err.response.data.mensagem);

        } else { // Acessa o ELSE quando a API não responder

          Alert.alert("Ops", "Erro: Tente novamente!");

        }

      })
  }

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      <Container>

        <LabelFormDash>* Nome</LabelFormDash><InputFormDash
          placeholder='Nome completo'
          autoCorrect={false}
          value={name}
          onChangeText={text => setName(text)}
        />

        <LabelFormDash>* E-mail</LabelFormDash>
        <InputFormDash
          placeholder='Melhor e-mail'
          autoCorrect={false}
          keyboardType='email-address'
          autoCapitalize='none'
          value={email}
          onChangeText={text => setEmail(text)}
        />

        <TxtRequiredFormDash>* Campo obrigatório</TxtRequiredFormDash>

        <BtnSubmitFormDash onPress={addUser}>
          <TxtSubmitFormDash>
            Salvar
          </TxtSubmitFormDash>
        </BtnSubmitFormDash>

      </Container>
    </ScrollView>
  );
};

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido útil!