Vamos poder agora colocar dentro de “productCard” as props para exibir os produtos (Vamos mudar de ProductCard para ProductList pois é o que temos aqui)

return (
  <Container>
    <Header />
    <ProductList products={products} handleGetProducts={handleGetProducts} />
    <NavBar />
  </Container>
);

Agora que a gente está passando as props, vamos receber elas lá no nosso ProductList

export interface ProductsListProps {
  products: Product[];
  handleGetProducts: Function;
}

const ProductList = ({ products, handleGetProducts }: ProductsListProps) => {

Agora que a gente tem isso aqui, nós vamos usar essa mudança aqui dentro do ProductList

const ProductList = ({ products, handleGetProducts }: ProductsListProps) => {
  const renderItem: ListRenderItem<Product> = ({ item }) => (
    <ProductCard data={item} />
  );

  return (
    <FlatList
      data={products}
      keyExtractor={(item: Product) => item._id}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingBottom: 80 }}
      onEndReached={() => {
        handleGetProducts();
      }}
    />
  );
};

Vamos precisar agora mudar algumas coisas dentro de card, para poder receber de fato essas props

export interface DataProps {
  data: Product;
}

const ProductCard = ({ data }: DataProps) => {
  const navigation = useNavigation<PropsStack>();

  const handleNavProduct = () => {
    navigation.navigate("Product");
  };

  return (
    <Container
      activeOpacity={0.85}
      onPress={() => {
        handleNavProduct();
      }}
    >
      <ProductImage source={{ uri: data.images[0].url }} />
      <ProductInfoContainer>
        <ProductPrice>R$ {data.price}</ProductPrice>
        <ProductTitle numberOfLines={2}>{data.name}</ProductTitle>
        <InfoLikeContainer>
          <SellerInfoContainer>
            <PublishedText>
              Publicado em {data.publishedData} por:
            </PublishedText>
            <SellerName>{data.seller.name}</SellerName>
          </SellerInfoContainer>
          <LikeButton onPress={() => Alert.alert("Liked")} activeOpacity={0.85}>
            <LikeImage source={likeImage} />
          </LikeButton>
        </InfoLikeContainer>
      </ProductInfoContainer>
    </Container>
  );
};

Nós já conseguimos ver aqui na tela home o produto que criamos, porém sem a data. Para criar essa data vamos pegar de createdAt, e para usar ela em vários locais, vamos ter ela em comum

Nós vamos dentro de src uma pasta chamada utils e dentro dela um arquivo chamado getDate.ts e esse será um arquivo que recebe o createdAt e faz uma manipulação para termos a data correta

export default function getDate(createdAt: string) {
  const getDate = new Date(createdAt).getDate().toString().padStart(2, "0");
  const getMonth = (new Date(createdAt).getMonth() + 1)
    .toString()
    .padStart(2, "0");

  return `${getDate}/${getMonth}`;
}

agora basta usarmos essa função lá em card para poder exibir a data corretamente

<PublishedText>
  Publicado em {getDate(data.createdAt)} por:
</PublishedText>

Com isso temos já a data aparecendo. Nós vamos também excluir os console que criamos e também o data e o itemProps, que não é mais usado agora!