Nós vamos fazer a passagem da query para a tela de search, que será através do header.

Primeiro nós vamos para o nosso “routes”, para colocar a tipagem da query, já que vamos passar ela pela rota

type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  Search: {
    query: string;
  };
};

Com isso feito, a gente consegue ir no componente do header, que está dentro da pasta common.

Agora nós vamos criar um estado para pegar o valor inserido no input.

import React, { useState } from "react";

import { Container, Input, InputContainer, Logo, Search } from "./styled";

const logo = require("../../../../assets/images/horizontal-logo.png");
const search = require("../../../../assets/icons/search.png");

const Header = () => {
  const [searchValue, setSearchValue] = useState("");

  return (
    <Container>
      <Logo source={logo} />

      <InputContainer>
        <Input placeholder="Pesquisa" placeholderTextColor="#C0C0C1" />
        <Search source={search} />
      </InputContainer>
    </Container>
  );
};

export default Header;

Agora iremos usar o value e o onChangeText para poder ver a mudança do valor. E vamos ver essa mudança através do console.log

import React, { useState } from "react";

import { Container, Input, InputContainer, Logo, Search } from "./styled";

const logo = require("../../../../assets/images/horizontal-logo.png");
const search = require("../../../../assets/icons/search.png");

const Header = () => {
  const [searchValue, setSearchValue] = useState("");

  console.log(searchValue);

  return (
    <Container>
      <Logo source={logo} />

      <InputContainer>
        <Input
          value={searchValue}
          onChangeText={setSearchValue}
          placeholder="Pesquisa"
          placeholderTextColor="#C0C0C1"
        />
        <Search source={search} />
      </InputContainer>
    </Container>
  );
};

export default Header;

Ao digitarmos conseguimos ver que o console mostra o que digitamos. Vamos então criar uma função que vai ser chamada quando for dado o submit

const Header = () => {
  const navigation = useNavigation<PropsStack>();
  const [searchValue, setSearchValue] = useState("");

  const handleSearch = () => {
    navigation.navigate("Search", {
      query: searchValue,
    });
		setSearchValue("");
  };

  return (
    <Container>
      <Logo source={logo} />

      <InputContainer>
        <Input
          value={searchValue}
          onChangeText={setSearchValue}
          placeholder="Pesquisa"
          placeholderTextColor="#C0C0C1"
        />
        <Search source={search} />
      </InputContainer>
    </Container>
  );
};

Vamos chamar o “onSubmitEditing”, pois é através dele que a gente sabe quando o usuário der o “OK” no seu teclado.

const Header = () => {
  const navigation = useNavigation<PropsStack>();
  const [searchValue, setSearchValue] = useState("");

  const handleSearch = () => {
    navigation.navigate("Search", {
      query: searchValue,
    });
    setSearchValue("");
  };

  return (
    <Container>
      <Logo source={logo} />

      <InputContainer>
        <Input
          value={searchValue}
          onChangeText={setSearchValue}
          placeholder="Pesquisa"
          placeholderTextColor="#C0C0C1"
          onSubmitEditing={() => {
            handleSearch();
          }}
        />
        <Search source={search} />
      </InputContainer>
    </Container>
  );
};

Através dessa nossa chamada de função a gente consegue utilzar o search, vamos para a página home através do nosso navbar e fazer a pesquisa, vamos ver que fomos enviados para a página de search, e agora a gente vai buscar essa query lá no search.

Antes de criar a tipagem, vamos exportar o tipo das rotas que está em routes.

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

import Home from "../screens/Home";
import Login from "../screens/Login";
import Register from "../screens/Register";
import Search from "../screens/Search";

export type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  Search: {
    query: string;
  };
};

const Stack = createNativeStackNavigator<PropsNavigationStack>();

export type PropsStack = NativeStackNavigationProp<PropsNavigationStack>;

const Routes = () => {

Nós vamos primeiro criar a tipagem das props aqui dentro de search

import React from "react";
import { Container } from "./styled";
import Header from "../../components/common/Header";
import NavBar from "../../components/common/NavBar";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { PropsNavigationStack } from "../../routes";

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

const Search = () => {
  return (
    <Container>
      <Header />
      <NavBar />
    </Container>
  );
};

export default Search;

Agora que o tipo está criado, vamos dar o console na query vindo de “route”.

const Search = ({ route }: Props) => {
 console.log(route?.params?.query);

Agora, se fizermos uma pesquisa darmos o enter, nós vamos ver o que foi digitado aqui lá no console. Isso funciona também caso você saia da página home para a página de search