CODEWITHSUNDEEP
react-nativereact-native-paper
Stefan Todoran
Stefan Todoran

Reputation: 161

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

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.

Upvotes: 6

Views: 5599

Answers (2)

Stefan Todoran
Stefan Todoran

Reputation: 161

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!

Upvotes: 2

tintef
tintef

Reputation: 218

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

Upvotes: 13

Related Questions