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