Como visualizar detalhes do usuario com React Native

---

Publicado 18 de janeiro de 2024

Neste tutorial, será apresentado como criar a tela para visualizar detalhes do usuário com React Native. 

Primeiramente, será abordado como recuperar as informações do usuário na API. 

Em seguida, será explicado como criar o CSS para apresentar os dados no aplicativo. 

Por fim, será demonstrado como apresentar na tela as informações do usuário com React Native.

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 enviar parâmetro entre telas do aplicativo com React Native".

No arquivo "src/pages/ViewUser/index.js", ou seja, na tela de visualização, acrescentado o useEffect.

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

Para chamar a função de recuperar usuários ao acessar a tela de visualização.

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

Criada a função getUser, que recebe o parâmetro userId enviado entre as telas. 

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

  // Receber como parâmetro o id registro
  const userId = route.params.userId;
  
}

Incluído o arquivo que contém as credenciais da API.

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

Dentro do método "getUser", realizada a solicitação para a API e verificado o status que a API retornou.

// 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

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

Se a API retornar um erro, ou seja, status 400, o código acessa o bloco .catch, apresenta o alerta com a mensagem de erro e faz o redirecionamento para a tela de listagem.

// 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

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

Se a API retornar sucesso, ou seja, status 200, o código acessa o bloco .then e atribui as informações do usuário em "user", utilizando o método "setUser".

// 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
      setUser(response.data.user);

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

Na implementação acima, as informações do usuário são atribuídas em "user", sendo necessário criá-lo utilizando o useState.

// Armazenar as informações do usuário
const [user, setUser] = useState([]);

Com as informações do usuário recuperadas, será impresso o valor. Primeiramente, porém, é criado o CSS no arquivo "src/styles/custom_adm.js".

export const Content = styled.View`
    flex-direction: row;
    border-bottom-color: #c0c0c0;
    border-bottom-width: 1px;
`;

export const TitleViewContent = styled.Text`
    padding-top: 15px;
    color: #c0c0c0;
    font-size: 18px;
`;

export const ViewContent = styled.Text`
    padding-bottom: 15px;
    color: #f5f5f5;
    font-size: 18px;
    padding-top: 15px;
`;

Para finalizar, as informações do usuário serão impressas na tela.

return (
  <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <Container>
      <TitleList>Detalhes do Usuário</TitleList>

      <Content>
        <TitleViewContent>ID: </TitleViewContent>
        <ViewContent>{user.id}</ViewContent>
      </Content>

      <Content>
        <TitleViewContent>Nome: </TitleViewContent>
        <ViewContent>{user.name}</ViewContent>
      </Content>

      <Content>
        <TitleViewContent>E-mail: </TitleViewContent>
        <ViewContent>{user.email}</ViewContent>
      </Content>

    </Container>
  </ScrollView>
);

Baixar o código-fonte completo do projeto.

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