How to build a dating app using React Native and Firebase – part 2

In last article we implemented age filter( http://nobrok.com/how-to-build-a-dating-app-using-react-native-and-firebase-part-1/ ). So, we were able to filter user by there age. In this article we will add height filter and then we will be able to filter users by there age and height, both.

For age filter we user two sliders to input of users age range. For height filter we will do something similar, but, its a bit more complicated, because we will have to use four slider components. Age range will be in feet and inches and thats why we will need four sliders for height range. Now enough talk, lets start coding.

First we will add some code to our Profile component. Here is the new code of Profile component :

We have added one more button, Height button, below the Age button. On pressing the height button the user will be navigated to Height component, with his login info as parameter.

Now, lets add code for Height component :

In the above code we have used four slider component.  The first slider take input of height in feet and the second slider takes input of height in inches. The first two slider takes input of lower part of the height range. Similarly, the the third and fourth slider takers input of higher part of height range. In the above code, we are also validating that the lower part never exceeds the higher part.  In ‘onSlidingComplete’ event of slider we are updating the height range in the database.

Now, Lets update code in Match Component so that the members list updates when user changes height range. Here is the code for Match component :

In the above code,  we are taking the result of age filter i.e. ‘filterByAge’ and passing it through the height filter. Next, we are taking the result of height filter i.e. ‘filterByHeight’ and passing it as data source to ListView component.