Building custom components with Appbase.io ReactiveSearch
In this tutorial I’m going to walk you through the process of creating a custom filter component using Appbase.io’s ReactiveSearch UI library and React Native.
What is Elasticsearch?
Elasticsearch is full-text search engine which allows you to build search functionalities into your applications. Elasticsearch enables you to query large volumes of data and provide results within a few milliseconds. You can deploy Elasticsearch on your own server environment. But this can be a challenging process because you have to go through a lot of configurations to make it scalable and performant. Appbase.io is a service which makes building search functionalities into your apps easier. It is a scalable and easy to use Elasticsearch service which makes things lot easier when it comes to building Elasticsearch based applications.
What is ReactiveSearch?
ReactiveSearch is an open-source UI library developed by Appbase.io. It is available for both ReactJS and React Native. This library contains a lot prebuilt UI components which are integrated with ElasticSearch. You can customize these components by adding custom queries and custom styles.

ReactiveSearch provides most of the search and filtering related UI components out of the box. However, there can be situations where you need to build your own component which works with Elasticsearch. Fortunately, ReactiveSearch provides a way to build your own UI components and make them work with Elasticsearch seamlessly.
In this tutorial we are going to build a simple React Native app where you can filter apartments by price. We are going to create a custom range slider component that can be used to set the price range.

We are going to use a dataset which is already hosted on Appbase.io. This dataset includes information about some apartments in Seattle. You can have a look at the data here.
Setting up the project
To get started create a new React Native project. Inside the terminal (or Command Prompt on Windows).
react-native init ReactiveSearchRangeSliderAfter that we need to install a few dependencies. Go into the project folder and run the following command.
yarn add @ptomasroos/react-native-multi-slider @appbaseio/reactivesearch-native prop-typesreact-native-multi-slider is a slider component for React Native. reactivesearch-native is the React Native version of the ReactiveSearch UI library(for ReactJS you have to use reactivesearch). prop-types will be used for validating props.
After installing the packages, open up the project in your preferred code editor. I will be using VS Code which is one of the most popular options nowadays.
Inside the project folder create the following file structure.
components // you can include all your reusable components here
|_CustomRangeSlider
|_index.js
|_RangeSlider.js // Custom components logic goes hereOpen the index.js file and the lines below to import a few modules.
We use ReactiveComponent to wrap our RangeSlider, so it can work as a ReactiveSearch UI component.
Add the following block of code to the index.js file.
Inside the render function we destructure four props.
componentId-A unique id for the component. All ReactiveSearch component instances should have this.
field-Field that we are going to query. In this tutorial we are going to pass in “price” as the field.
title-Title of the range slider component instance
step-Step that the values of the range slider will be incremented or decremented
Inside the render function we use the ReactiveComponent to wrap our RangeSlider. First we set the componentId. Then we set the defaultQuery for our custom component. Here we are using some Elasticsearch aggregations (max and min). Aggregations allow us to group and extract statistics about the dataset. In our case we use aggregations to get the minimum and maximum apartment prices in our dataset. You can learn more about aggregations here.
Inside the ReactiveComponent we create and instance of the RangeSlider and pass in some props (title, field, step, id).
Then set the prop types and export the class as below.
Now your index.js should look like this.
Writing the code for RangeSlider.js
Now it’s time to work on RangeSlider.js. Open up the file and add the code below.
Since we wrapped the RangeSlider component inside ReactiveComponent in the index.js file, RangeSlider component gets access to the props aggregations and setQuery. That’s one of the key things you need to understand when you’re building your own ReactiveSearch component.
Inside the componentWillReceiveProps function, we update the state’s minimum, maximum and multiSliderValue fields. Then we use thos values to setup the MultiSlider component instance inside the render function.
Now we’re done with our Custom ReactiveSearch component. Next step is to import in into our App.js file and use it. Open the App.js file in your project directory.
Add the following code.
Now you should be able to filter results using the custom range slider we created.
You can find the project source here.
I hope now you’ve got some idea on how to create custom components for ReactiveSearch. Let me know if you have and questions :)