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

In this part of article we will add one more filter to our dating app, gender filter. Before adding this filter lets consider the four case that can arise in a dating world :

  1. Men looking for women ( common and frequent)
  2. Women looking for men ( common and frequent)
  3. Men looking for men ( rare and occasional)
  4. Women looking for women ( rare and occasional)

So, we have to consider above all situation while coding gender filter.

To take input of gender filter we will be using a switch component.  If switch is on the the user is looking for women and if it’s off then user is looking for men. So, this will meet all four instances we have mentioned above like this :

  1. User is male and he turns switch on, so, he is looking for women
  2. User is female and she turns switch off, so, she is looking for men
  3. User is male and he turns switch off, so, he is looking for men
  4. User is female and she turns switch on, so, she is looking for women

Now, lets add the above cases in our code. Firstly, we will add a switch component/control to our Profile screen ( component). When user toggles the switch the gender state changes in firebase database. The updated code for profile component is here :

Now, lets add gender filter to our match component. Below is the updated code of Match component :

So, in the above code the members list of dating app, after passing the four filter we have coded, finally gets render by ListView component.

Here is a demo of how the gender filter feature is working :