Agora podemos criar dentro da pasta “CategorieList” uma pasta de “CategorieCard”, com os arquivos.

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 240px;
  min-height: 230px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  border-radius: 5px;
  margin-right: 20px;
`;

export const Image = styled.Image.attrs({
  resizeMode: "cover",
})`
  width: 100%;
  height: 130px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
`;

Agora iremos criar as estruturas de texto do anúncio

export const TextContainer = styled.View`
  margin: 8px 12px;
`;

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

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

Podemos com isso feito passar para o nosso index e visualizar

const CategorieCard = () => {
  return (
    <Container>
      <Image source={{ uri: "" }} />
      <TextContainer>
        <Title>Produto de teste 01</Title>
        <Price>R$ 2000</Price>
      </TextContainer>
    </Container>
  );
};

Coloque esse data abaixo dentro de “AllCategories”

• Data

E dentro de AllCategories vamos passar um map para poder ter um CategoireList de acordo com cada item.

return (
  <>
    <Container>
      <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />

      {Data.map((categorie: any) => (
        <CategorieList key={categorie._id} categorie={categorie} />
      ))}
    </Container>
    <NavBar />
  </>
);

Agora iremos criar um tipo “Categorie” para colocar no lugar desse “any”. Depois teremos uma tipagem “universal” para todas esses itens que se repetem, tipo product, porém apenas quando formos mexer no backend.

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

interface Categorie {
  categorie: {
    _id: string;
    products: Product[];
  };
}

const AllCategories = () => {
  return (
    <>
      <Container>
        <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />

        {Data.map(({ categorie }: Categorie) => (
          <CategorieList key={categorie._id} categorie={categorie} />
        ))}
      </Container>
      <NavBar />
    </>
  );
};

Com isso feito, precisamos apenas utilizar isso dentro de “CategorieList”

const CategorieList = ({ categorie }: Categorie) => {
  return (
    <Container>
      <TitleContainer>
        <Title>{categorie._id}</Title>
        <SeeMore>Ver mais</SeeMore>
      </TitleContainer>
    </Container>
  );
};

Apenas usando isso, nós já temos os “id’s” aparecendo, que são os títulos das categorias, podemos usar o flatList para colocar o nosso card.

const CategorieList = ({ categorie }: Categorie) => {
  const renderItem: ListRenderItem<Product> = ({ item }) => (
    <CategorieCard product={item} key={item.id} />
  );

  return (
    <Container>
      <TitleContainer>
        <Title>{categorie._id}</Title>
        <SeeMore>Ver mais</SeeMore>
      </TitleContainer>

      <FlatList
        data={categorie.products}
        renderItem={renderItem}
        horizontal
        showsHorizontalScrollIndicator={false}
      />
    </Container>
  );
};

Agora precisamos colocar o nosso “CategorieCard” recebendo o product.

interface ProductProps {
  product: Product;
}

const CategorieCard = ({ product }: ProductProps) => {
  return (
    <Container>
      <Image source={{ uri: product.productImage }} />
      <TextContainer>
        <Title>{product.title}</Title>
        <Price>R$ {product.price}</Price>
      </TextContainer>
    </Container>
  );
};

Temos então tudo funcionando corretamente, faltando apenas os demais estilos de texto do vendedor e também o botão de like

export const SellerLikeContainer = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
`;

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

export const LikeButton = styled.TouchableOpacity``;

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

Vamos agora utilizar ambas.

const likeImage = require("../../../../../assets/icons/like.png");

const CategorieCard = ({ product }: ProductProps) => {
  return (
    <Container>
      <Image source={{ uri: product.productImage }} />
      <TextContainer>
        <Title>{product.title}</Title>
        <Price>R$ {product.price}</Price>

        <SellerLikeContainer>
          <SellerName>Lucas Queiroga</SellerName>

          <LikeImage source={likeImage} />
        </SellerLikeContainer>
      </TextContainer>
    </Container>
  );
};

Finalizamos então a tela de todas as categorias, precisamos apenas agora dar um espaçamento do container para a categoria.

const AllCategories = () => {
  return (
    <>
      <Container contentContainerStyle={{ paddingBottom: 100 }}>
        <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />

        {Data.map(({ categorie }: Categorie) => (
          <CategorieList key={categorie._id} categorie={categorie} />
        ))}
      </Container>
      <NavBar />
    </>
  );
};