1

I have a stack navigator where i have defined the searchScreen where i wish to get the input data and also have a SeachBar component which i attached in the stacknavigators headers as custom header.

My question is, how can i get the typed input data from search component to SearchScreen?

StackNavigator.js

<Stack.Screen
    name="SearchScreen"
    component={SearchScreen}
    options={{ headerTitle: (props) => <SearchBar {...props} /> }}
  />

components/Searchbar.js

import { Searchbar } from "react-native-paper";
<Searchbar
    placeholder="Search"
    onChangeText={onChangeSearch}
    value={searchQuery}
    loading="true"
    icon={() => <FontAwesome name="search" size={15} />}
    style={{
      backgroundColor: "white",
      borderWidth: 0,
      shadowColor: "transparent",
      borderBottomColor: "transparent",
      borderTopColor: "transparent",
    }}
  />
Fury
  • 151
  • 1
  • 9

1 Answers1

1

In order to do that, use a global state searchText in redux and use it anywhere you want.

abdemirza
  • 629
  • 4
  • 16
  • Yes, that is a way. But i thought if there is any other way using react navigation itself. If not will have to use redux. – Fury Oct 07 '22 at 05:08
  • 1
    You can use context, if you don't want redux, and the app is not too big. – Alija Fajic Oct 07 '22 at 06:36