Nós vamos agora criar o card para o usuário acessar. Nós vamos começar criando a pasta “CharCard” dentro da pasta “ChatList”, com o index e o styled

Agora nós vamos começar a criar o estilo inicial do card

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;
  height: 140px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
`;

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;
`;

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;
`;

Com esse estilo criado, nós vamos usar ele no index para poder já ter alguma visualização

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

Vamos receber via props o nosso data, que vamos colocar como any, pois a estrutura de mensagens e tipagem vai ser criada toda já de uma vez depois, para que a gente não precise ficar modificando as tipagens. Já que essa é uma mais complexa de criar.

const ChatCard = ({ data }: any) => {
  const navigation = useNavigation<PropsStack>();

Agora a gente pode Colocar as informações vindo de data

return (
  <Container
    activeOpacity={0.85}
    onPress={() => {}}
  >
    <Image source={{ uri: data.product.images[0].url }} />
    <InfoContainer>
      <Price>R$ {data.product.price}</Price>
      <Title numberOfLines={2}>{data.product.name}</Title>
    </InfoContainer>
  </Container>
);

Vamos então entrar no list que temos para e colocar o card no renderItem

const ChatList = () => {
  const renderItem: ListRenderItem<any> = ({ item }) => (
    <ChatCard data={item} />
  );

Agora vamos criar o resto dos estilos que nós temos que criar para completar o card

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

export const SellerContainer = styled.View``;

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

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

export const TrashButton = styled.TouchableOpacity``;

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

Com os estilos criados, a gente pode agora usar eles no index.

return (
  <Container
    activeOpacity={0.85}
    onPress={() => {
      navigation.navigate("Chat", {
        chatInfo: data,
      });
    }}
  >
    <Image source={{ uri: data.product.images[0].url }} />
    <InfoContainer>
      <Price>R$ {data.product.price}</Price>
      <Title numberOfLines={2}>{data.product.name}</Title>
      <LikeContainer>
        <SellerContainer>
          <PublishedText>
            Publicado em {data.product.createdAt} por:
          </PublishedText>
          <SellerName>{data.seller}</SellerName>
        </SellerContainer>
        <TrashButton onPress={() => {}} activeOpacity={0.85}>
          <TrashImage source={trashIcon} />
        </TrashButton>
      </LikeContainer>
    </InfoContainer>
  </Container>
);

Vendo que está tudo OK, conseguimos prosseguir, está tudo certinho.