CODEWITHSUNDEEP
react-nativetextinputreact-native-textinput
Michael Ostrovsky
Michael Ostrovsky

Reputation: 629

How to display search type Android keyboard in react-native

I've got a text input in my app which I use as a search bar and I know that Android has an API to display a search type keyboard and I'm wondering how I can use it in react-native.

I've looked in the react-native text input documentation but didn't find anything for that type of keyboard in Android.

my screen

Anyone knows which type of keyboard I can use in text input to achieve wanted result?

Upvotes: 3

Views: 8789

Answers (2)

Shaik Nayyar Rabbani
Shaik Nayyar Rabbani

Reputation: 11

It seems like you want to show a keyboard layout that has a search icon in the bottom right corner, similar to:

Something like this

There is a property called returnKeyType, and if you set its type to search, you'll see the desired layout:

Example:

<TextInput placeholder='Search...' 
            returnKeyType="search" // This will show the search icon
            onSubmitEditing={handleSearch} // This handles the search icon press
            value={searchText}
            onChangeText={(text) => setSearchText(text)}/>

Upvotes: 1

Oleksandr Leskiv
Oleksandr Leskiv

Reputation: 668

Looks like you're looking for returnKeyType and keyboardType

Upvotes: 15

Related Questions