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.
react-native-searchbox, you can use
yarn to get set as follows:
npm install @appbaseio/react-native-searchbox
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
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
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.
This example demonstrates the usage of some of the props available with
react-native-searchbox. Please go over here to check it out.
In this example we can see the usage of
search-box component in a controlled way using the
onChange props and also how to use the
transformRequest prop to get in more context from an extrenal API. Please go over here to check it out.
In this example, we show the usage of an additional facet to display the search results with increased relevancy. Please go over here to check it out.
In this example, we have shown how to usage
distinctFieldConfig props to display distinct value documents based on the specified field. Please go over here to check it out.
In this example, we can see the usage of the
index prop in the author-search-component to explicitly specify an index to query against for the component. Please go over here to check it out.
In this example, we show the usage of the
transformRequest prop, which gives us the request object whenever a query gets triggered from the search-box component. It allows us to either modify the request being sent or create a side-effect based on this request. Please go over here to check it out.
Check out the docs for API Reference over here.
Looking to customize styles, rendering of a UI component or bring your own design system? See the ReactiveSearch UI customization guide.