Skip to main content
Version: 5.0

Search

Props

searchable

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

searchable={true}
TypeDefault
boolfalse

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}
TypeDefault
boolfalse

addCustomItem

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

addCustomItem={true}
TypeDefault
boolfalse

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..."
}}

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"
}}