Is there a way to grab the keyboard search/return input in react-native-paper SearchBar?

Question

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.

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.

Hudson

If you take a look at the implementation of react-native-paper SearchBar github.com/callstack/react-native-paper/blob/master/src/… 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. – Tabethatabib

Answer 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

Tabethatabib

To get the search query use: onSubmitEditing={(event) => { console.log("searching", event.nativeEvent.text); }} – Optional

Answer 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!

Hudson