Nós vamos começar excluindo as imagens e a descrição, pois não iremos mais usar essas que temos hard coded aqui

const images = [
  {
    filename: "image1",
    url: "<https://files.tecnoblog.net/wp-content/uploads/2020/11/ps5-review-5-1060x596.jpg>",
  },
  {
    filename: "image2",
    url: "<https://classic.exame.com/wp-content/uploads/2021/05/ps5-the-squad-foto-1.jpg?quality=70&strip=info&w=984>",
  },
  {
    filename: "image3",
    url: "<https://cdn.awsli.com.br/1824/1824967/produto/186131938/67bd1ea8d4.jpg>",
  },
  {
    filename: "image4",
    url: "<https://cdn.awsli.com.br/600x700/1734/1734513/produto/97494476/030cda119d.jpg>",
  },
];

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

type Props = NativeStackScreenProps<PropsNavigationStack, "Product">;

const Product = ({ route }: Props) => {
  console.log(route.params);

  const navigation = useNavigation<PropsStack>();
  const { token } = useAuth();

  const description =
    "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero assumenda, totam corrupti aut voluptatibus repellat ullam explicabo exercitationem tenetur doloribus quis expedita consectetur! Aliquam quo error excepturi minus voluptatem asperiores, distinctio voluptas eius pariatur repudiandae adipisci officia nisi temporibus facere unde similique et dolorum odio vitae iste libero quibusdam voluptates modi. Sed velit facere illum vitae aperiam sint fugit ut possimus magni quis quasi architecto obcaecati praesentium quam voluptatum eaque ullam sunt totam, molestiae nulla ipsa atque delectus. Odio, deleniti.;";

E aí iremos começar a modificar todos os campos de acordo com o que recebemos do backend

<Container contentContainerStyle={{ paddingBottom: 50 }}>
  <BackIcon marginLeft={30} />

  <Title>{route.params.name}</Title>
  <SubtitleContainer>
    <SubTitle>Publicado em {getDate(route.params.createdAt)}</SubTitle>
    <SubTitle>Recife, PE</SubTitle>
  </SubtitleContainer>

  <Carousel images={route.params.images} />

  <InfoContainer>
    <Price>R$ {route.params.price}</Price>

    <InteractionsContainer>
      <Button>
        <Like source={like} />
      </Button>

      <Button>
        <Share source={share} />
      </Button>
    </InteractionsContainer>
  </InfoContainer>

  <Description desc={route.params.description} />

  <SellerInfo />

  <DefaultButton
    buttonText="FALE COM O VENDEDOR"
    buttonType={"primary"}
    marginVertical={0}
    buttonHandle={() => {}}
  />

  <DenounceSeller
    onPress={() => {
      !token
        ? navigation.navigate("Login")
        : navigation.navigate("Denounce");
    }}
  >
    Denunciar o vendedor!
  </DenounceSeller>
</Container>

Agora, precisamos mudar algumas coisas dentro do seller, nós vamos mandar para ele o nome do usuário, e depois podemos mandar a avaliação quando fizermos o sistema de avaliar.

<SellerInfo name={route.params.seller.name} />

Nós vamos agora receber lá no SellerInfo e exibir

interface Props {
  name: string;
}

const SellerInfo = ({ name }: Props) => {
  const navigation = useNavigation<PropsStack>();
  const { token } = useAuth();

  const Rate = null;

  return (
    <Container>
      <SellerContainer>
        <Name>{name}</Name>

E agora temos então tudo aparecendo corretamente aqui na tela de produto.