Nós vamos agora fazer uma pequena refatoração no nosso “UserAds”, pois ele terá ao invés do lixeiro, o coração de like, pois você pode dar like no produto que o vendedor tem.

Nós vamos então lá no “UserAds” para poder fazer a verificação. Vamos começar adicionando tanto na tipagem quanto nas props um boolean.

interface ProductProps {
  products: Product[];
  seller: boolean;
}

const UserAds = ({ products, seller }: ProductProps) => {

Agora a gente vai lá em styled.ts para poder modificar os componentes estilizados. Modificaremos apenas os nomes, já que vamos manter o tamanho dele.

export const InfoIconContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
`;

export const IconButton = styled.TouchableOpacity``;

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

Agora a gente deve mudar na importação.

import {
  Card,
  Container,
  NoAds,
  PriceTitleContainer,
  Price,
  Title,
  TotalAds,
  InfoIconContainer,
  PublishedText,
  IconButton,
  Icon,
  InfoContainer,
  Image,
} from "./styled";

Agora com isso feito, podemos criar a nossa verificação ternária, se o “sellerProfile” for falso, a gente vai exibir o lixeiro, e se for verdadeiro, vamos exibir o coração.

<InfoContainer>
<PriceTitleContainer>
  <Price>R$ {product.price}</Price>
  <Title numberOfLines={2}>{product.title}</Title>
</PriceTitleContainer>
<InfoIconContainer>
  <PublishedText>
    Publicado em {product.publishedData}
  </PublishedText>
  {!seller ? (
    <IconButton
      onPress={() => {
        Alert.alert("Item para ser excluído");
      }}
      activeOpacity={0.85}
    >
      <Icon source={trashIcon} />
    </IconButton>
  ) : (
    <IconButton
      onPress={() => {
        Alert.alert("Item para ser excluído");
      }}
      activeOpacity={0.85}
    >
      <Icon source={trashIcon} />
    </IconButton>
  )}
</InfoIconContainer>
</InfoContainer>

Só precisamos além do trashIcon ter o hearthIcon

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

{!sellerProfile ? (
  <IconButton
    onPress={() => {
      Alert.alert("Item para ser excluído");
    }}
    activeOpacity={0.85}
  >
		<Icon source={trashIcon} />
	</IconButton>
	) : (
	<IconButton
		onPress={() => {
			Alert.alert("Item para ser excluído");
		}}
		activeOpacity={0.85}
	>
		<Icon source={hearthIcon} />
	</IconButton>
)}

Com isso feito, podemos agora chamar lá na tela de “SellerProfile”, mas antes precisamos copiar os produtos fake que colocamos lá no nosso UserProfile.

const Data = [
];

const SellerProfile = () => {
  return (
    <Container>
      <DefaultTitle title="PERFIL DO VENDEDOR" fontSize={20} />

      <ProfileInfo />

      <UserAds products={Data} seller={true} />
    </Container>
  );
};

export default SellerProfile;

Com isso feito, precisamos ir na tela de UserProfile para colocar como false.

const UserProfile = () => {
  return (
    <>
      <Container
        contentContainerStyle={{
          paddingBottom: 120,
        }}
      >
        <DefaultTitle title="MEU PERFIL" fontSize={20} />

        <ProfileInfo />

        <Form />

        <UserAds products={Data} seller={false} />

E com isso feito temos o UserAds funcionando também na tela de UserProfile