Agora para usar o search é bem simples, já que temos uma boa base do productList

Ao entrar em Search a gente já vai ter o erro do productList, que não está recebendo as coisas da lista de fato como deve, porém iremos fazer isso

Vamos então começar criando o estado de loading, e logo em seguida o nosso handle

const Search = ({ route }: Props) => {
  const [data, setData] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  const { query } = route.params;

  const handleSearch = async () => {
    const { data } = await searchService.getSearchedProducts(query);

    setData(data?.products);
    setLoading(false);
  };

Agora que nós já temos isso criado, vamos colocar o nosso useEffect para chamar o handle e em seguida nós vamos também passar as informações para o productCard (que deve virar productList)

useEffect(() => {
  handleSearch();
}, []);

return (
  <Container>
    <Header />

    {!loading ? (
      <ProductList handleGetProducts={handleSearch} products={data} />
    ) : (
      <Loader />
    )}

    <NavBar />
  </Container>
);

Agora nós vamos no backend fazer uma pequena modificação, que será necessária para que a gente consiga fazer as mudanças. Dentro de product-controller nós vamos na linha 155 para colocar a seguinte verificação:

const locationMatcher = location ? new RegExp(location, "i") : null;

Com isso feito, a gente pode já fazer a pesquisa pelo título de algum produto que nós temos criado, e vamos ver ele aparecendo aqui, e também o seu carregamento. Nós vamos montar os filtros que temos

E agora vamos poder pesquisar, podemos até pesquisar por nomes incompletos, e vamos ter e o resultado

Vamos também colocar uma verificação, caso não tenha resultado, vamos exibir o texto, então vamos no styled para criar o nosso texto

export const NoResult = styled.Text`
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 60%;
  color: white;
`;

E basta colocarmos essa verificação no index

return (
  <Container>
    <Header />

    {!loading ? (
      data.length <= 0 ? (
        <NoResult>Sua pesquisa não corresponde a nenhum produto</NoResult>
      ) : (
        <ProductList handleGetProducts={handleSearch} products={data} />
      )
    ) : (
      <Loader />
    )}

    <NavBar />
  </Container>
);