react-native-searchbox provides declarative props to query Elasticsearch, and bind UI components with different types of search queries. As the name suggests, it provides a default UI component for searchbox.
Installation
To install react-native-searchbox
, you can use npm
or yarn
to get set as follows:
Using npm
npm install @appbaseio/react-native-searchbox
Using yarn
yarn add @appbaseio/react-native-searchbox
react-native-searchbox
requires react-native-vector-icons as a peer dependency. Expo or create-react-native-app projects include react-native-vector-icons out of the box, so all you need to do is install @appbaseio/react-native-searchbox
.
If your project is a standard React Native project created using react-native init (it should have an ios/android directory), then you have to install the react-native-vector-icons along with react-native-searchbox
.
Basic usage
A simple example
The following example renders an autosuggestion search bar(search-component
) with one custom component(result-component
) to render the results. The result-component
watches the search-component
for input changes and updates its UI when the user selects a suggestion.
An example with a facet
You can check out the docs for API Reference over here.