Navigate to a new page when search bar is clicked

Question

I am using react native element search bar. By default when user clicks on the search bar, a keyboard with "Return" key in lower right corner is shown. How can I change this to display keyboard with "Search" key on lower right corner?

Also when I click on the return key, I want a function to be called (Like: this.props.navigation.navigate("abc")). I do not want to use onBlur={() => this.props.navigation.navigate("abc")} as the user might just click else where on the screen and still this function would be called.

Possible duplicate of [Change text of "Return" keyboard button](https://stackoverflow.com/questions/976950/change-text-of-return-keyboard-button) — gravity, Aug 10 '18 at 17:26
@gravity The link you had in comment does not talk about how this could be done in react native when using react-native-element — Chetan, Aug 10 '18 at 17:31

score 3 · Accepted Answer · answered Aug 10 '18 at 17:50

As mentioned in the docs, the react-native-elements SearchBar

inherits all React Native Elements Input props, which means all native TextInput props that come with a standard React Native TextInput element

therefore you can use:

onSubmitEditing

returnKeyType

<SearchBar
 ...
 onSubmitEditing={this.navigate} // <== Your Navigation handler
 returnKeyType='search' />

Navigate to a new page when search bar is clicked

1 Answers1