Search

Props

searchable

Enables the search feature in the drop-down menu / modal.

searchable={true}

Type	Default
bool	false

searchTextInputProps

Adds native props for the text input.

searchTextInputProps={{

maxLength: 25

}}

Type
TextInputProps

disableLocalSearch

Disables search between local items. This comes in handy for remote search.

disableLocalSearch={true}

• See: onChangeSearchText

Type	Default
bool	false

addCustomItem

Shows the searched text as an item when there's nothing to show.

addCustomItem={true}

Type	Default	Requirements
bool	false	setItems

Placeholder Text

Changes the placeholder text of the text input. Both of the following properties are available.

searchPlaceholder

searchPlaceholder="Search..."

translation

translation={{

SEARCH_PLACEHOLDER: "Search..."

}}

• See: Localization

Callbacks

onChangeSearchText

Callback that is called when the text changes in the text input.

loading={loading}

disableLocalSearch={true} // required for remote search

onChangeSearchText={(text) => {

// Show the loading animation

setLoading(true);

// Get items from API

API.get("/items/search", {

text

})

.then((items) => {

setItems(items);

})

.catch((err) => {

//

})

.finally(() => {

// Hide the loading animation

setLoading(false);

});

}}

Styling

searchContainerStyle

searchContainerStyle={{

borderBottomColor: "#dfdfdf"

}}

searchTextInputStyle

searchTextInputStyle={{

color: "#000"

}}

searchPlaceholderTextColor

searchPlaceholderTextColor="grey"

customItemContainerStyle

customItemContainerStyle={{

backgroundColor: "#dfdfdf"

}}

customItemLabelStyle

customItemLabelStyle={{

fontStyle: "italic"

}}