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

In this first part of “build a dating app using React Native and Firebase” article we will see how we can filter user by their age. We will not be discussing the basics of building this app in this article, as, I have already discussed the basics in my previous articles. So. lets start with the age filter feature.

First lets see whats already working in the app. The users login with Facebook and user data is getting saved in firebase database (http://nobrok.com/how-to-use-facebook-login-in-react-native-using-firebase). In the user settings screen we have a Age button which navigates to Age filter component/screen. So, when user clicks on the button it navigates to Age screen with his login data as parameter. Here is the code for that :

In the Age screen, we have two slider component. These slider components allows user to set a age range between which members of the app will be filtered. Also we validate that bottom slider value is never greater than the top slider value. Here is the code for Age component where all age filtering is taking place :

Now, in the Match screen we are listing the filtered user using a list view and we are using lodash component to filter the user by there age. Also, to convert date of birth to number of years we have used component momentjs.  The list is bound to firebase on even so that as soon as user make changes in age range,  there is change in  members list. Here is the code for Match screen :

Here is the demo of how the age filter works :