Nós vamos criar um card onde vai mostrar algumas informações do vendedor e também do perfil do usuário normal.

Vamos começar criando dentro de “common” uma pasta chamada “ProfileInfo”, pois isso vai ficar presente em algumas telas (Também na de avaliação do vendedor e denúncia)

Vamos começar criando um container geral e um container que vai conter as principais informações sobre o usuário.

import styled from "styled-components/native";

export const Container = styled.View`
  width: 90%;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  padding: 10px 15px;
  background-color: ${({ theme }) => theme.colors.background};
  margin: 0 auto;
  border-radius: 5px;
`;

export const PrincipalInfoContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
`;

Agora, nós vamos criar um container que vai envolver o nome e o telefone (Apenas para eles não ficarem separados por conta do “space-between”

export const NamePhoneContainer = styled.View``;

export const Name = styled.Text`
  font-size: 20px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
`;

export const Phone = styled.Text`
  font-size: 18px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

Com isso criado, nós já podemos usar para ter algum retorno visual, vamos então para o index.

import React from "react";
import {
  Container,
  Name,
  NamePhoneContainer,
  Phone,
  PrincipalInfoContainer,
} from "./styled";

const ProfileInfo = () => {
  return (
    <Container>
      <PrincipalInfoContainer>
        <NamePhoneContainer>
          <Name>Lucas Queiroga</Name>
          <Phone>(81) 99999-9999</Phone>
        </NamePhoneContainer>
      </PrincipalInfoContainer>
    </Container>
  );
};

export default ProfileInfo;

Agora basta visualizarmos dentro da tela de profile

const UserProfile = () => {
 return (
   <>
     <Container>
       <DefaultTitle title="MEU PERFIL" fontSize={20} />
       <ProfileInfo />
     </Container>
     <NavBar />
   </>
 );
};

Podemos ver que está formando algo interessante. Vamos prosseguir agora para a avaliação do usuário sobre essa pessoa (Seja você vendo seu perfil ou o perfil de um vendedor)

Nós vamos importar o “AirbnbRating”, que é um tipo de estrela que temos na biblioteca selecionada, e vamos usar também a cor azul da nossa paleta para definir a estrela ativa.

const ProfileInfo = () => {
  return (
    <Container>
      <PrincipalInfoContainer>
        <NamePhoneContainer>
          <Name>Lucas Queiroga</Name>
          <Phone>(81) 99999-9999</Phone>
        </NamePhoneContainer>
        <AirbnbRating
          selectedColor="#5F96ED"
          showRating={false}
          isDisabled={true}
          size={16}
          defaultRating={4}
          starContainerStyle={{
            paddingTop: 4,
          }}
        />
      </PrincipalInfoContainer>
    </Container>
  );
};

Agora nós vamos usar desde quando a pessoa está com a sua conta criada e também quantos anúncios ela criou até o momento, para isso faremos um “DefaultText”

export const DefaultText = styled.Text`
  font-size: 14px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
`;

Agora temos vamos usar esse texto padrão para criar fora do “PrincipalInfoContainer” a info de desde quando o usuário criou a conta e também quantos anúncios ele tem ativo.

const ProfileInfo = () => {
  return (
    <Container>
      <PrincipalInfoContainer>
        <NamePhoneContainer>
          <Name>Lucas Queiroga</Name>
          <Phone>(81) 99999-9999</Phone>
        </NamePhoneContainer>
        <AirbnbRating
          selectedColor="#5F96ED"
          showRating={false}
          isDisabled={true}
          size={16}
          defaultRating={4}
          starContainerStyle={{
            paddingTop: 4,
          }}
        />
      </PrincipalInfoContainer>
      <DefaultText>Usuário desde 20/04/23</DefaultText>
      <DefaultText>04 anúncios ativos</DefaultText>
    </Container>
  );
};

Podemos visualizar que estamos mostrando todas as info do usuário de forma bem bonita, faltando apenas uma linha horizontal para fazer a separação.

Como no react native não temos o “HR” que nem temos no HTML, vamos criar um.

export const Hr = styled.View`
  width: 90%;
  height: 1px;
  background-color: #383838;
  margin: 0 auto;
  margin-top: 15px;
`;

Agora, basta usarmos

const ProfileInfo = () => {
  return (
    <>
      <Container>
        <PrincipalInfoContainer>
          <NamePhoneContainer>
            <Name>Lucas Queiroga</Name>
            <Phone>(81) 99999-9999</Phone>
          </NamePhoneContainer>
          <AirbnbRating
            selectedColor="#5F96ED"
            showRating={false}
            isDisabled={true}
            size={16}
            defaultRating={4}
            starContainerStyle={{
              paddingTop: 4,
            }}
          />
        </PrincipalInfoContainer>
        <DefaultText>Usuário desde 20/04/23</DefaultText>
        <DefaultText>04 anúncios ativos</DefaultText>
      </Container>
      <Hr />
    </>
  );
};

Nós vamos apenas fazer uma mudança na parte de avaliação. Nós vamos colocar uma variável para definir qual é a avaliação do vendedor (que nem acontece na vida real) e nós vamos mostrar um texto caso não tenha avaliação ainda

const ProfileInfo = () => {
  const Rate = 4;

  return (
    <>
      <Container>
        <PrincipalInfoContainer>
          <NamePhoneContainer>
            <Name>Lucas Queiroga</Name>
            <Phone>(81) 99999-9999</Phone>
          </NamePhoneContainer>
	        {!Rate ? (
            <DefaultText>Sem Avaliações</DefaultText>
          ) : (
            <AirbnbRating
              selectedColor="#5F96ED"
              showRating={false}
              isDisabled={true}
              size={16}
              defaultRating={Rate}
              starContainerStyle={{
                paddingTop: 4,
              }}
            />
          )}
        </PrincipalInfoContainer>
        <DefaultText>Usuário desde 20/04/23</DefaultText>
        <DefaultText>04 anúncios ativos</DefaultText>
      </Container>
      <Hr />
    </>
  );
};

Agora, se colocarmos null no lugar do “4”, nós vamos ver o texto aparecendo no lugar da avaliação. E você pode também colocar outras notas e ver o resultado.