Criando a lista de produtos que você postou

Nós agora vamos fazer uma lista que você verá dos produtos que você possui, para poder editar eles e excluir caso queira.
Vamos começar criando dentro da pasta de “UserProfile” uma pasta chamada “UserAds” que serão os anúncios do usuário, criando os arquivos padrão.

Nós vamos começar criando o container junto com os textos que teremos. Um será para mostrar o total de anúncios que o usuário tem e o outro será para quando não tiver anúncio, e ter um retorno visual para isso.

import styled from "styled-components/native";

export const Container = styled.View`
  width: 90%;
  margin: 0 auto;
`;

export const TotalAds = styled.Text`
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  color: ${({ theme }) => theme.colors.primaryText};
`;

export const NoAds = styled(TotalAds)`
  text-align: center;
  margin-top: 30px;
`;

Já podemos até usar para poder ver se está da forma que queremos por enquanto.

import React from "react";
import { Container, NoAds, TotalAds } from "./styled";

const UserAds = () => {
  return (
    <Container>
      <TotalAds>Você tem 3 anúncios</TotalAds>
      <NoAds>Por enquanto você não criou anúncios</NoAds>
    </Container>
  );
};

export default UserAds;

E agora nós vamos lá na tela de UserProfile para usar esse componente.
Por enquanto está tudo certo, nós teremos alguns itens no final da tela, então não tem problema que por enquanto esse texto fique bem próximo da navbar.

Agora, podemos começar criando de fato o item que mostrará o produto. Será algo semelhante ao card que temos na home, porém com dimensões diferentes e também um botão novo para excluir o anúncio, e não dar like.

export const AdCard = styled.TouchableOpacity`
  width: 100%;
  margin: 10px 0;
  flex-direction: row;
`;

export const Image = styled.Image`
  width: 120px;
  height: 140px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
`;

Agora iremos criar o container das informações, junto com o título e o preço. Nós faremos também o título e o preço.

export const InfoContainer = styled.View`
  width: 65%;
  height: 140px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  padding: 10px;
  justify-content: space-between;
`;

export const PriceTitleContainer = styled.View``;

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

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

Com tudo que temos nós podemos já utilizar e começar a ver um resultado aqui na tela. (Por enquanto vamos comentar o texto de “NoAds”)

const UserAds = () => {
  return (
    <Container>
      <TotalAds>Você tem 3 anúncios</TotalAds>
      <Card activeOpacity={0.85} onPress={() => {}}>
        <Image
          source={{
            uri: "<https://m.media-amazon.com/images/I/61hJ40qZKKL._AC_SX679_.jpg>",
          }}
        />
        <InfoContainer>
          <PriceTitleContainer>
            <Price>R$ 5000</Price>
            <Title numberOfLines={2}>Playstation 5 novo</Title>
          </PriceTitleContainer>
        </InfoContainer>
      </Card>
      {/* <NoAds>Por enquanto você não criou anúncios</NoAds> */}
    </Container>
  );
};

Agora nós temos já algumas informações do produto, vamos prosseguir para preencher ele com as demais infos.

Vamos criar o “InfoTrashContainer”, que será para algumas informações da parte baixa do card e também o ícone de lixo.

export const InfoTrashContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
`;

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

export const TrashButton = styled.TouchableOpacity``;

export const TrashIcon = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 24px;
`;

Agora nós podemos utilizar isso

const UserAds = () => {
  return (
    <Container>
      <TotalAds>Você tem 3 anúncios</TotalAds>
      <Card activeOpacity={0.85} onPress={() => {}}>
        <Image
          source={{
            uri: "<https://m.media-amazon.com/images/I/61hJ40qZKKL._AC_SX679_.jpg>",
          }}
        />
        <InfoContainer>
          <PriceTitleContainer>
            <Price>R$ 5000</Price>
            <Title numberOfLines={2}>Playstation 5 novo</Title>
          </PriceTitleContainer>
          <InfoTrashContainer>
            <PublishedText>Publicado em 20/05/23</PublishedText>

            <TrashButton onPress={() => {}} activeOpacity={0.85}>
              <TrashIcon source={trashIcon} />
            </TrashButton>
          </InfoTrashContainer>
        </InfoContainer>
      </Card>

      {/* <NoAds>Por enquanto você não criou anúncios</NoAds> */}
    </Container>
  );
};

Agora temos o card do produto pronto. Nós podemos fazer uma simulação com um data para poder saber como faremos a renderização deles quando tivermos os produtos vindos. Nós vamos usar um map, pois quando temos um scrool na página não podemos usar outro (Como flatlist)

Vamos então lá em “UserProfile” para criar o data que vamos usar para passar aqui para o componente.

const Data = [
  {
    id: "1",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "2600",
    title: "Playstation 4 novo com 3 jogos acompanhando",
    publishedData: "14/02/23",
  },
  {
    id: "2",
    productImage:
      "<https://m.media-amazon.com/images/I/61hJ40qZKKL._AC_SX679_.jpg>",
    price: "2600",
    title: "Playstation 5 novo com 1 jogo acompanhando",
    publishedData: "14/02/23",
  },
  {
    id: "3",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "2600",
    title: "Playstation 4 novo com 2 jogos acompanhando",
    publishedData: "14/02/23",
  },
];

const UserProfile = () => {

Agora vamos passar para o UserAds

const UserProfile = () => {
  return (
    <>
      <Container
        contentContainerStyle={{
          paddingBottom: 120,
        }}
      >
        <DefaultTitle title="MEU PERFIL" fontSize={20} />
        <ProfileInfo />
        <Form />
        <UserAds products={Data} />
      </Container>
      <NavBar />
    </>
  );
};

Agora que passamos, vamos receber, criando também uma interface temporária para a props.

interface Product {
  id: string;
  productImage: string;
  price: string;
  title: string;
  publishedData: string;
}

interface ProductProps {
  products: Product[];
}

const UserAds = ({ products }: ProductProps) => {

Agora que temos o recebimento do array, vamos usar. A primeira coisa a fazer é a verificação, caso o array esteja cheio, vamos renderizar o card, caso esteja vazio, iremos renderizar o texto de “NoAds”

const UserAds = ({ products }: ProductProps) => {
  return (
    <Container>
      <TotalAds>Você tem 3 anúncios</TotalAds>
      {products.length > 0 ? (
        <Card activeOpacity={0.85} onPress={() => {}}>
          <Image
            source={{
              uri: "<https://m.media-amazon.com/images/I/61hJ40qZKKL._AC_SX679_.jpg>",
            }}
          />
          <InfoContainer>
            <PriceTitleContainer>
              <Price>R$ 5000</Price>
              <Title numberOfLines={2}>Playstation 5 novo</Title>
            </PriceTitleContainer>
            <InfoTrashContainer>
              <PublishedText>Publicado em 20/05/23</PublishedText>

              <TrashButton onPress={() => {}} activeOpacity={0.85}>
                <TrashIcon source={trashIcon} />
              </TrashButton>
            </InfoTrashContainer>
          </InfoContainer>
        </Card>
      ) : (
        <NoAds>Por enquanto você não criou anúncios</NoAds>
      )}
    </Container>
  );
};

Vamos usar o map envolvendo o card para que a gente tenha a exibição de cada item

const UserAds = ({ products }: ProductProps) => {
  return (
    <Container>
      <TotalAds>Você tem 3 anúncios</TotalAds>
      {products.length > 0 ? (
        products.map((product) => (
          <Card
            activeOpacity={0.85}
            onPress={() => {
              Alert.alert("Você clicou no produto!");
            }}
            key={product.id}
          >
            <Image
              source={{
                uri: product.productImage,
              }}
            />
            <InfoContainer>
              <PriceTitleContainer>
                <Price>R$ {product.price}</Price>
                <Title numberOfLines={2}>{product.title}</Title>
              </PriceTitleContainer>
              <InfoTrashContainer>
                <PublishedText>
                  Publicado em {product.publishedData}
                </PublishedText>

                <TrashButton
                  onPress={() => {
                    Alert.alert("Item para ser excluído");
                  }}
                  activeOpacity={0.85}
                >
                  <TrashIcon source={trashIcon} />
                </TrashButton>
              </InfoTrashContainer>
            </InfoContainer>
          </Card>
        ))
      ) : (
        <NoAds>Por enquanto você não criou anúncios</NoAds>
      )}
    </Container>
  );
};

Agora nós temos os itens que botamos no data sendo renderizados na tela, com as informações corretas aparecendo também.
Quando tivermos as informações vindas do backend será um pouco diferente em termos de tipagem e uso de informações, porém será a mesma lógica que temos agora.