Como criar formul√°rio editar no aplicativo com React Native


Neste tutorial, ser√° apresentado como criar um formul√°rio de edi√ß√£o no aplicativo com React Native. 

Primeiramente, ser√° abordado como recuperar as informa√ß√Ķes do usu√°rio na API. 

Em seguida, ser√° explicado como criar o formul√°rio de edi√ß√£o com React Native. 

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 visualizar detalhes do usuario com React Native".

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

import { ScrollView } from "react-native";

// Criar e exportar a função editar 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 EditUser from '../pages/EditUser';
{/* Carregar a tela editar usu√°rio */}
<Stack.Screen 
    name="EditUser"
    component={EditUser}
    options={{ headerTitle: "Editar Usu√°rio"}}
    // options={{ headerShown: false }}
/>

Acrescentado na tela de visualiza√ß√£o o bot√£o que redireciona para a tela de edi√ß√£o, junto com o envio do ID do usu√°rio como par√Ęmetro.

<BtnActionEdit onPress={() => navigation.navigate('EditUser', { userId: user.id })}>
  <TxtBtnAction>
    Editar
  </TxtBtnAction>
</BtnActionEdit>

Criado o CSS para personalizar o formul√°rio no arquivo "src/styles/custom_adm.js".

// Formul√°rio
export const LabelFormDash = styled.Text`
    color: #111;
    font-size: 18px;
`;

export const InputFormDash = styled.TextInput`
    background-color: #fff;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    color: #222;
    font-size: 18px;
    border-radius: 6px;
    border-color: #1f51fe;
    border-width: 1px;
`;

export const TxtRequiredFormDash = styled.Text`
    padding-bottom: 5px;
    color: #111;
    font-size: 12px;
`;

export const BtnSubmitFormDash = styled.TouchableOpacity`
    background-color: #1f51fe;
    width: 100%;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
`;

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

Criado o formul√°rio no arquivo "src/pages/EditUser/index.js".

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

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

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

  // Armazenar as informa√ß√Ķes do usu√°rio
  const [id, setId] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  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 >
          <TxtSubmitFormDash>
            Salvar
          </TxtSubmitFormDash>
        </BtnSubmitFormDash>

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

Em seguida, √© recuperado o par√Ęmetro enviado ao clicar no bot√£o editar da tela visualizar, que cont√©m o ID do usu√°rio. 

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

  // Receber como par√Ęmetro o id registro
  const userId = route.params.userId;
  
  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      
    </ScrollView>
  );
};

Com o ID do usuário recuperado, é necessário realizar a requisição para a API e obter os dados do usuário. Se a API retornar um erro, o usuário é redirecionado para a tela listar usuários.

// useState - Adicionar estado ao componente
import { useState } from "react";

// Incluir os componentes utilizado para estruturar o conte√ļdo
import { 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 editar usuário
export default function EditUser({ route }) {

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

  // Armazenar as informa√ß√Ķes do usu√°rio
  const [id, setId] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');// Função para recuperar os detalhes do usuário
  const getUser = async () => {

    // Receber como par√Ęmetro o id registro
    const userId = route.params.userId;

    // Requisição para a API indicando a rota
    await api.get(`/users/${userId}`)
      .then((response) => { // Acessar o then quando a API retornar status sucesso

        // Setar os dados do usu√°rio retornado da API
        //console.log(response.data.user);
        setId(response.data.user.id);
        setName(response.data.user.name);
        setEmail(response.data.user.email);

      }).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);

          // Redirecionar o usu√°rio para tela listar usu√°rios 
          navigation.navigate('ListUsers');

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

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

          // Redirecionar o usu√°rio para tela listar usu√°rios 
          navigation.navigate('ListUsers');
        }
      });
  }

  // Executar quando o usuário carregar a tela e chamar a função getUser
  useEffect(() => {
    getUser();
  }, []);

  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 >
          <TxtSubmitFormDash>
            Salvar
          </TxtSubmitFormDash>
        </BtnSubmitFormDash>

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

Com o formul√°rio criado e preenchido com as informa√ß√Ķes pr√©-existentes do usu√°rio, o pr√≥ximo passo √© enviar os dados para a API para serem salvos no banco de dados.

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

  // Processar/submeter os dados do formul√°rio
  const editUser = async () => {

    // Requisição para a API indicando a rota e os dados
    await api.put('/users', { id, 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('ViewUser');

      }).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>

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

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

Código completo da página "src/pages/EditUser/index.js".

// useEffect - Criar efeitos colaterais em componentes funcionais
// useState - Adicionar estado ao componente
import { useEffect, 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 editar usuário
export default function EditUser({ route }) {

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

  // Armazenar as informa√ß√Ķes do usu√°rio
  const [id, setId] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // Função para recuperar os detalhes do usuário
  const getUser = async () => {

    // Receber como par√Ęmetro o id registro
    const userId = route.params.userId;

    // Requisição para a API indicando a rota
    await api.get(`/users/${userId}`)
      .then((response) => { // Acessar o then quando a API retornar status sucesso

        // Setar os dados do usu√°rio retornado da API
        //console.log(response.data.user);
        setId(response.data.user.id);
        setName(response.data.user.name);
        setEmail(response.data.user.email);

      }).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);

          // Redirecionar o usu√°rio para tela listar usu√°rios 
          navigation.navigate('ListUsers');

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

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

          // Redirecionar o usu√°rio para tela listar usu√°rios 
          navigation.navigate('ListUsers');
        }
      });
  }

  // Executar quando o usuário carregar a tela e chamar a função getUser
  useEffect(() => {
    getUser();
  }, []);

  // Processar/submeter os dados do formul√°rio
  const editUser = async () => {

    // Requisição para a API indicando a rota e os dados
    await api.put('/users', { id, 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('ViewUser');

      }).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={editUser}>
          <TxtSubmitFormDash>
            Salvar
          </TxtSubmitFormDash>
        </BtnSubmitFormDash>

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

Baixar o código-fonte completo do projeto.

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