Search Bar Plugin

The search bar plugin allows you to display a native search bar and receive events when the user interacts with it.

Sample Usage

const searchBar = await SearchBarPlugin.init()
searchBar.on('search:submitted', (params) => {
        query: params.searchTerms


Inactive state

IOS Android

Active state

IOS Android


SearchBarPlugin.init() #

Creates and returns an instance of the search bar plugin that is used to make subsequent method calls.

blur() #

Removes focus from the search bar and hides the software keyboard. In iOS, this hides the "Cancel" button.

Note: This does not clear the search input. Use setQuery('') to reset the search field.

focus() #

Gives focus to the search bar and shows the software keyboard. In iOS, this causes the "Cancel" button to appear.

setQuery(query) #

Replaces the query in the search input field with the provided text. An empty string may be used to clear the search field.

setPlaceholderText(text) #

Sets the placeholder text that displays when the search input is empty. The default is "Search".

setBackgroundColor(color) #

Sets the background color of the search bar's container.

submit() #

Programmatically submits the search bar with the current query. Equivalent to the user clicking "Submit". The search input is cleared and loses focus.


search:submitted → { params } #

Fires when search is submitted. On submit, the search input is cleared and loses focus.

Note: Does not fire on an empty search query.

search:changed → { params } #

Fires every time the query is changed (eg. every character added/removed as the user is typing, clearing the text field, pasting a query, calls to setQuery, etc).

Note: Fires on submit as submit triggers a clearing of the text field.

search:cancelled → { params } #

Fires when search is cancelled by the user. In iOS, this is when the user explicitly taps the "Cancel" button, which causes the keyboard to close. In Android, this is when the user closes the keyboard (there is no "Cancel" button).

Note: This is not fired when the user clicks the little "x" to clear the current query, nor when the search bar is programmatically blurred.