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.

Answer 1

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' />