Dating App with React Native-Part 2

Made using Canva (www.canva.com)

So, the story continues. By the title, you probably guessed that there is a part 1 to this series. If you haven’t read it yet, read it here. Its not mandatory but it will help give you some context on the terms I will use through this part. Also connect with me so you don’t miss another blog post. Follow me on Github and Follow me on LinkedIn. Now let’s continue.

Previously…

To quickly jog your memory, in the first part, we decided that the entire app would be divided into three parts. They would be:

1. First Part: The Authentication. This consists of registering and signing in.
2. Second Part: This consists of the profile setup of the user
3. Third Part: The main component where most of the magic in the app happens

In this part, we look at how to implement the first part of the app.

The First Part

First, visit the github repository. I hope that you understand that the code is too voluminous to include in this one article. I suggest you to clone the repository to you computer. If you don’t want to do that, then just create a new react native project and copy the code into individual files.

Now to make the firebase phone authentication work, you need the google-services.json file from your firebase console. Go through the instructions here to get that file. I hope that you know how to setup a new project on firebase console. If not, then just google it.

Also you will need API keys from Here, which I used for getting the user’s location. Visit the site here and after signing up, you can get an API key for reverse geocoding. Paste these keys in the ProfileSetup and Main screens, located in the screens folder. I have indicated, where the keys are required.

Now in a console, run this command

yarn install

This will install all the dependencies that are needed for running the app. This might take a while since there are a lot of dependencies

After the dependencies are installed, connect your phone to your computer(Android) and then run the following command. The app should be up and running fine. I am uploading some screenshots from the app:

yarn run android 

From Left to Right: Home, SignIn, Main, ChatPeople, Settings Screens

Note: You will not see any nearby people. Neither will you see any people you can chat with. This is because there would be no data on your firestore server.

Now to explain a little, our firebase collection ‘users’ will store the user data in a format similar to this:

‘users/country/state-district/phoneNumber’

Phone number will be a document with attributes that will be the user data such as name, age, avatar_url and so on. Also, structuring the data in such a way has a great advantage of providing nearby people. You can create a combination such as ‘state-district’ in any country in the world, and you will always find people that are close to the current user. We can limit the number of people we read from the database, to save some reads too.

Another thing to note is that I used a ‘security pin’ here. That is a simple security measure for the user to login later. The collections ‘all_users’ stores the document reference of the user and the security pin. When the user later log in to their account, we use this pin to verify their identity instead of a phone authentication.

Another advantage of structuring our data this way is that, the ‘userDocumentReference’ can be stored as a string, and later used by firestore to access the document that this reference points to. For example, consider you are living in New Delhi, India and your phone number is +911234567890, then your document reference looks something like,

‘users/IND/DL-Delhi/+918130507533’

This way, I can leverage firestores’s data model and make querying for nearby people much easier, for the reason I described earlier. You only need to get a few documents from the reference of ‘users/IND/DL-Delhi’ to get some nearby people. You can sort them according to age and gender also.

To get a feel for the more intricacies of the app, I suggest you to go through the code quickly and see some overall structure. If you want to talk about it, you are welcome to. Connect with me on LinkedIn and Follow me on Github.

Next part of the series is now up! Read it here

Please give a few claps to this article and share it. Thanks for reading.