Nós vamos criar a pasta de “CategoryCard” dentro de “CategoryList”, com os arquivos index e styled.

E nós vamos começar criando a base do produto, passando o container, imagem, o preço e título.

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  margin: 10px auto;
  flex-direction: row;
`;

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

export const InfoContainer = styled.View`
  flex: 1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  padding: 10px;
`;

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

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

Agora, nós vamos utilizar essas informações, porém antes a gente precisa tipar e receber o produto lá do flatlist.

interface ProductProps {
  product: Product;
}

const CategoryCard = ({ product }: ProductProps) => {
  return (

Agora que tipamos e recebemos, podemos usar tudo que criamos de estilo aqui dentro.

return (
  <Container activeOpacity={0.85} onPress={() => {}}>
    <Image source={{ uri: product.productImage }} />
    <InfoContainer>
      <Price>R$ {product.price}</Price>
      <Title numberOfLines={2}>{product.title}</Title>
    </InfoContainer>
  </Container>
);

Vamos colocar esse nosso card no render item para começar a ver as informações

const CategoryList = ({ products }: CategoryProps) => {
  const renderItem: ListRenderItem<Product> = ({ item }) => (
    <CategoryCard product={item} />
  );

Agora vamos criar o restante dos estilos relacionados ao like e data de publicação do produto

export const LikeContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin-top: 22px;
`;

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

export const Button = styled.TouchableOpacity``;

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

Vamos então utilizar esses nossos estilos dentro do index para poder finalizar a exibição das informações do produto

return (
  <Container activeOpacity={0.85} onPress={() => {}}>
    <Image source={{ uri: product.productImage }} />
    <InfoContainer>
      <Price>R$ {product.price}</Price>
      <Title numberOfLines={2}>{product.title}</Title>
      <LikeContainer>
        <PublishedText>
          Publicado em{"\\n"}
          {product.publishedData}
        </PublishedText>

        <Button
          onPress={() => {
            Alert.alert("Liked");
          }}
          activeOpacity={0.85}
        >
          <Like source={likeImage} />
        </Button>
      </LikeContainer>
    </InfoContainer>
  </Container>
);

Podemos verificar que está tudo certo com a exibição da categoria.