Nós vamos criar dentro de “ChatHeader” uma pasta chamada “AdCard” com o index e o styled, e iremos criar o card onde o usuário pode ser levado para o produto da conversa

Vamos começar criando alguns estilos aqui

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 100%;
  margin: 0 auto;
  flex-direction: row;
`;

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

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

Vamos receber aqui via props as informações do produto

const AdCard = ({ product }: any) => {

Agora podemos colocar os estilos em prática

return (
  <Container>
    <Image source={{ uri: product.images[0].url }} />
    <InfoContainer>
    </InfoContainer>
  </Container>
);

Vamos então colocar isso tudo lá em “ChatHeader”

return (
  <Container>
    <Row>
      <BackArrow marginLeft={0} />
      <SellerName>{sellerName}</SellerName>
      <ModalButton onPress={handleToggleModal}>
        <ModalImage source={modalImg} />
      </ModalButton>
      <Modal animationType="fade" transparent={true} visible={modalVisible}>
        <ModalOverlay onPress={handleToggleModal} activeOpacity={1}>
          <ModalContainer>
            <ModalText onPress={handleSellerProfile}>Ver Perfil</ModalText>
            <ModalText>Deletar Conversa</ModalText>
            <ModalText onPress={handleFeedback}>Avaliar</ModalText>
            <ModalText onPress={handleDenounce}>Denunciar</ModalText>
          </ModalContainer>
        </ModalOverlay>
      </Modal>
    </Row>
    <AdCard product={product} />
  </Container>
);

Agora que nós criamos essa base podemos criar o restante dos estilos.

export const Row = styled.Text`
  flex-direction: row;
`;

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

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

Com esse restante criado, podemos então usar eles

return (
  <Container>
    <Image source={{ uri: product.images[0].url }} />
    <InfoContainer>
      <Title numberOfLines={2}>{product.name}</Title>
      <SubTitle>R$ {product.price} - Ver Anúncio</SubTitle>
    </InfoContainer>
  </Container>
);

Agora a gente precisa apenas colocar a navegação para o produto solo, já que está tudo OK

return (
  <Container
    onPress={() => {
      navigation.navigate("Product");
    }}
  >
    <Image source={{ uri: product.images[0].url }} />
    <InfoContainer>
      <Title numberOfLines={2}>{product.name}</Title>
      <SubTitle>R$ {product.price} - Ver Anúncio</SubTitle>
    </InfoContainer>
  </Container>
);