Cloning Tinder Using React Local Items and Exhibition

Cloning Tinder Using React Local Items and Exhibition

100 % free JavaScript guide!

Write strong, neat and maintainable JavaScript.

Producing pixel-perfect designs on cellular is difficult. Even though respond local makes it much simpler than their local counterparts, it nonetheless need many try to get a mobile app to perfection.

Inside guide, well be cloning the quintessential greatest dating application, Tinder. Well discover a UI structure labeled as React Native Areas, helping to make styling React local apps smooth.

Because this merely will be a design guide, very well be utilizing Expo, as it produces place activities right up easier than the usual react-native-cli . Well be utilizing a lot of dummy information to help make our very own application.

Well be making a maximum of four displayshomes, Top Picks, Profile, and communications.

Wish learn React Native from the crushed up? This article is an extract from our advanced collection. Bring a complete assortment of respond Native e-books addressing principles, projects, recommendations and tools & extra with SitePoint premiums. Join now let’s talk about just $9/month.


For this tutorial, you will need a standard knowledge of respond Native and some familiarity with exhibition. Youll in addition need the exhibition customer attached to the mobile device or a compatible simulation mounted on your pc. Information on how best to try this can be found here.

Be sure to possess a simple comprehension of designs in React Native. Styles in React local are basically an abstraction like CSS, in just certain variations. You could get a listing of all of the characteristics during the design cheatsheet.

Through the course of this guide very well be using yarn . In the event that you dont have actually yarn currently setup, do the installation from here.

Additionally verify youve currently set up expo-cli on your computer.

If it’s just not setup currently, after that go on and set it up:

Remember to upgrade expo-cli any time you havent upgraded in a bit, since exhibition secretes were easily old.

Had been planning to build something looks like this:

Should you would like to clone the repo, the whole rule can be obtained on Gitcenter.


Helps establish a new exhibition task making use of expo-cli :

It’s going to next request you to select a layout. You will want to select tabs and struck input .

This may be will ask you to label your panels. Type expo-tinder and strike input once again.

Lastly, it’ll request you to click y to put in dependencies with yarn or letter to set up dependencies with npm . Newspapers y .

This bootstraps a brand new React Native application making use of expo-cli .

React Local Elements

React Native Elements is a cross-platform UI Toolkit for React local with consistent build across Android os, iOS and Web.

The simple to use and entirely constructed with JavaScript. The also the first UI kit ever made for respond local.

It permits you to totally personalize designs of any of our very own parts the manner by which we want so every app has its own unique appearance.

You’ll establish stunning software easily.

Cloning Tinder UI

Weve currently created a project known as expo-tinder .

To perform the project, type this:

Push i to run the apple’s ios simulation. This can automatically run the iOS Simulator regardless if its not open.

Push on a to run the Android os Emulator. Keep in mind that the emulator need to be setup and started currently before typing a . Normally it will probably throw one into the terminal.

It ought to look like this:


The original build has already installed react-navigation for us. Underneath case navigation additionally works by default because we picked tabs when you look at the next step of expo init . You can check they by tapping on Links and configurations.

The displays/ folder accounts for the information showed as soon as the tabs become changed.