Create a Dating App with React Native-Part 1
A Tinder clone maybe…

So I recently completed a course on React Native with on Coursera and wanted to put my new skills to some good use. I decided to pick up a large project and create a dating app, heavily inspired by Tinder. In this series of blogs, I will take you through how I created a fully operational dating app with React Native.
In this first part, we will go through the main modules of the app and look at the available tools and libraries. I will soon release the app on the Play Store. Do stay tuned. Follow me on Github and Follow me on LinkedIn.
Lets get started.
Some Previous Works
Looking at previous works and other apps is a good idea before diving into the development. It helps provide some ideas as to how your app should look, feel and behave. I decided to quickly set up a tinder account to look at how the app looks like. Here are a few points that helped me in creating a mental picture of the app:
- Opening page with the branding, nice background image and a catchy tagline
- The phone authentication flow is nice and smooth. You can also register using Facebook, but I simply went with phone authentication
- Straightforward profile setup. No unnecessary fields
- Most importantly, the right and left swiping. Probably the most ‘fashionable’ aspect of the app
- Setting preferences such as age and gender
- Chatting between matched people
These, I feel, are the most important features of tinder, that provide a great user experience and have made it so popular. Now we need to translate it all of this into React Native. So lets break it down.
The Modules
After many days of thinking and applying what I learnt in software engineering class, I came up with this. The app would be divided into 3 main parts.
- First part: This will consist of the Register and Sign In functionalities. Register is self explanatory. The first time the user opens the app, they will register and their account is set up. Similarly, for sign in, existing users will use this to sign in to their accounts. This is most helpful when users change their phones.
- Second Part: This is the profile setup part. Here the user will create his/her profile. It will allow them to upload an avatar and enter other information such as name, age, gender, preference and so on.
- Third Part: This is the main screen where the users will spend most of their time. Here we allow them to swipe for people, open the chat screen, and edit their profile. You will later see that we use Bottom Navigation for this screen.
You might notice that these modules are not equally divided. That is, they don’t contain exactly ‘one-third’ of the app. That is because though a feature might be easy to implement, it may still require multiple screens. For example, registering in this app is fairly simple using Firebase Authentication, but requires two different screens for entering the phone number and the verification code. But the profile setup is large and requires only one screen. Similarly, the main screen will technically show many different screens, but it will still only use one React component for the bottom navigation.
Laying the Groundwork
By now, I had a pretty good idea of what the app should do. Now I had to look around what I had available to implement it. Here we see an in depth break down of each part of the app, and what libraries and packages are used to build it.
First Part — Authentication
This contains two features, the Register and Sign In. Since I had to get set up quickly with phone authentication, using Firebase was a no-brainer. I decided to go ahead with it and found this library React Native Firebase. It replicates the native android Java Firebase SDK for React Native. It has all the features we would require. Firestore(for user data), Storage(for pictures), Authentication and Realtime Database(for chat messages).
Second Part — The Profile
Just like tinder, I decided to make the profile setup as quick as possible. I came up with the essential features, I would require the user to enter to use the app. These were:
- The avatar or profile picture. Optional. Can be uploaded later.
- Name and Age
- Profession and Workplace
- Gender and Preference
That’s it. This is the absolute minimum information needed for the user to have a decent dating experience.
Third Part — The Bottom Navigation
This is the most important and the largest part of the app by the volume of code written. It uses bottom navigation, which you might recognize from other apps. Looks something like this.

Our bottom navigator would contain four pages:
- First, the main screen. This is where the swiping magic happens
- Second, the matches screen. This is the feature we monetize to earn revenue. We show the user all the people who have right swiped them to help them find matches faster
- Third, the chat page, where the user views the people that he/she can chat with.
- Fourth, the settings page, where other options exist, such as to edit profile, get paid feature among other things.
The bottom navigator in out app looks something like this. I use react-native-paper to set up this navigator.

The screens are placed in the left-to-right order. I didn’t use labels because I don’t like them.
More Packages
That is not all for the packages involved in this app. In fact, in the finished app, there are over 20 dependencies. I will discuss some of them here.
- react and react-native are necessary ones. They are added when you initialize the react native project.
- react-native-elements is used for the UI. It provides buttons, input fields, icons and avatar. react-native-paper for the bottom navigation, react-native-router-flux for moving between screens.
- react-native-segmented-control-tab and react-native-vector-icons are also used for UI enhancements and icons.
- react-native-country-picker-modal for choosing user’s country. react-native-card-stack-swiper is a great component used to create the swiping cards. react-native-image-crop-picker is used for cropping images and selecting the avatar pictures. This was a total lifesaver.
- Lastly, not forgetting one of the most important, react-native-gifted-chat will provide the UI for the chat screen. Follow Farid Safi, the creator of this package.
Future Works
That is all for this story. This is the part 1 of this series I have started. I plan to continue this series and explain my experience with this project. The next part will contain the implementation of the first part of this app. Follow me to stay tuned. Follow me on LinkedIn. You can also follow me on Github.
Read my previous blog on how to create a simple chat component with React Native, Firebase and Gifted Chat here
Thanks for reading.
