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

This is the third part of our dating app. If you haven’t gone through the previous parts/articles make sure you read them , so that, you are able to better understand this part of article.

In this part we we will be doing one of the most important feature of dating app. Tinder app got famous because of this feature. We will be doing the distance filter feature in this part of article. Distance filter allows users to connect to the other people near to to there location. They will be able to set the distance around which they want people to filter out.

To start with we will get the users location in form of latitude and longitude then they login and save it under their profile in firebase database. The code for the same will be some thing like this :

In the above code user will we asked access to their location. In case they deny access to the location,  latitude and and longitude will be set to 0.

Next, we will add one more button, Distance button , to our Profile Component, below the Height button. On pressing the Distance button user will be navigated to Distance Component with they user info as parameter. Below is the updated code of Profile component :

Distance component is quite simple. We are using only one slider to change distance, so, we don,t even need any validation like Age ( and Height ( Component. Here is the code for Distance component :

In the above code we are take input of distance using the slider component and updating distance in the firebase database.

Now, lets update the Match component. We will add a formula to calculate distance between two latitude and longitude pair, and, using this formula we will filter the members who are near to the logged in user. Here is the code for the match component :

In the above code, the filtered array that we are getting from Height filter is getting passed to distance filter and the result of distance filter is finally passed to List component. So, after passing three filters members list is finally getting rendered.