4

I am working on a react native android app that needs a search bar. I am using the SearchBar from react-native-paper, and I checked their documentation and couldn't find any sort of way to find if the user pressed the little search button on their keyboard.

Not sure if there is an official name for this input or the button itself as I am unfamiliar with mobile app development, but here is an screenshot from the app in case it is unclear. I am referring to the search button on the keyboard itself, which is in this case blue.

Screenshot

From some digging I found out that TextInputs in react native have an onSubmitEditing={} that triggers whatever return key action you want.

Essentially I was wondering if there was an equivalent prop for the SearchBar in react-native-paper.

Stefan Todoran
  • 93
  • 1
  • 10
  • 1
    If you take a look at the implementation of react-native-paper SearchBar https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.tsx it looks like you can pass a `onSubmitEditing` prop to it and, as react-native-paper uses a TextInput, that input will receive that prop. – tintef Apr 09 '20 at 01:17

2 Answers2

9

If you take a look at the implementation of react-native-paper SearchBar https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.tsx it looks like you can pass a onSubmitEditing prop to it and, as react-native-paper uses a TextInput, that input will receive that prop

tintef
  • 178
  • 2
  • 9
  • To get the search query use: `onSubmitEditing={(event) => { console.log("searching", event.nativeEvent.text); }}` – Roberto Jun 07 '23 at 21:27
2

Ok so it seems that as tintef pointed out, you can just pass onSubmitEditing to the SearchBar since it uses a TextInput. I just tested this and it works perfectly!

Shiva
  • 11,485
  • 2
  • 67
  • 84
Stefan Todoran
  • 93
  • 1
  • 10