Dating App with React Native-Part 3

5 min readApr 7, 2020

This third part in this series is seriously delayed. I didn’t write this post earlier because frankly, I believed that there wasn’t much interest in this series. But now that more people at there homes, due to the pandemic, I think I should complete this series and get this over with. So, here we are. I suggest you read the previous articles. Part 1 and Part 2. Also, connect with me on LinkedIn and follow me on GitHub, so that you don’t miss any future posts. Let’s get started.

Previously…

A quick refresher, in the previous story, we had a look at the user authentication using Firebase Phone Authentication. That completed the first part of the app. In this story, we will understand the profile setup of the user. I hope you have at least had a look at the code of the app. If not, you can do that here.

The Second Part

In this part, we implement the user profile creation. This is the ProfileSetup.js file in the screens folder. It looks something like this.

Looks neat, I think. So lets discuss how to set this up along with the logic. First lets have a look at the dependencies. Most of them are pretty self explanatory. NetInfo, Geolocation and AsyncStorage are react-native APIs. The storage and firestore modules are imported for Firebase usage.

ImagePicker allows the user to pick and image from the phone and crop it to their liking. This is the avatar that will be uploaded to storage later. And lastly, react-native-elements is the UI package that I am using. It contains UI elements such as buttons, modal and such. This has been used in previous screens also.

The State

I will take little time to explain the state of the component. The loading variable indicates if we are in a loading state or not, such as if avatar is being uploaded, we are in a loading state and can render a different screen. Variable errorMessage is a string, which describes the error that has occurred, response is used to temporary hold the selected avatar before it is uploaded and pictureSelected simply tells us if the avatar picture has been selected or not. Rest of the variable are pretty self explanatory.

The Front End

Go ahead and have a look at the code inside the render() method. Again, there is not much to explain here. I have used components Avatar, Input, Header, Button from react-native-elements. ScrollView and Text are from react-native.

One thing to note is the SegmentedControlTab component. I found this package on npm and decided to use it since its a good way to take user’s input for gender and preference and also looks pretty good. The profileGenderIndex and profilePreferenceIndex variables in state are used to keep track of choices in the two segments.

The Input Flow

That was the UI for this screen. Now we focus on how the user interacts with the screen. Go ahead and have a look at all the functions in the component. I will explain the functionality of each in brief. The flow is simple and goes something like:

User selects the avatar
User enters other details about himself
Finally, they press the ‘Create Profile’ button, which initiates the chain of functions.

The Logic

When the user clicks on ‘Create Profile’ button, the createProfile() function is executed, which is basically such a calling function for other functions.

createProfile() { 
    this.setState({ loading: true, errorMessage: ‘ERR_UNKNOWN’ });          this.checkInternet() 
        .then(() => this.checkProfileValues()) 
        .then(() => this.uploadAvatar())
        .then(() => this.getAvatarUrl()) 
        .then(() => this.getLocation()) 
        .catch(error => { 
            this.setState({ loading: false }); 
            const { errorMessage } = this.state; 
            switch (errorMessage) {
                case 'ERR_NO_INTERNET':                                                                                      
                ToastAndroid.show('No internet', ToastAndroid.LONG);                         
                break
                ....
}

I used async functions along with then and catch to chain function executions. The functions, in their order of executions are:

checkInternet: Uses NetInfo the check if there is active internet connection. If not, it throws and error.
checkProfileValues: Checks that entered values are not null and choices have been selected. Throws an error if not.
uploadAvatar: Uploads the avatar, if selected to Firebase storage. Throws an error if upload is unsuccessful. Takes the longest time to complete execution.
getAvatarUrl: Get a URL for the uploaded avatar and saves it to AsyncStorage for later use. Throws an error if any operation failed.
getLocation: Gets the current user location using Geolocation and Here API to create a reference for Firestore.
createFirestoreProfile: Called from inside getLocation, this function uploads all the profile values to Firestore, at the userDocumentReference that is created in the format ‘country/state-district/phoneNumber’. Read the second part of the series, where I discuss this in more detail.

The rest of the function does the error handling. Based on the error string, a toast message is shown, which notifies the user of the error that occurred. If the function completes execution without any errors, we move on to the next screen, which is the main screen. This line is the last line in the createFirestoreProfile function.

Actions.push(‘bottomNavigator’);

Actions, is an import react-native-router-flux, which is the routing package that I am using. The push function will push the new screen into the stack.

Conclusion

I know that this might be a little too much of an information dump but I suggest if you want to understand this well, go through the code once. If you feel you need to talk to me about anything, feel free to ping me on LinkedIn. Connect with me, if you feel like it. You can also follow me on GitHub.

In the next part, we will discuss the main part of the app, where all the swiping and the rest happens. Follow me here on Medium to stay updated. Please give a few claps to this article and thanks for reading! Oh and stay home!