Tutorial: Uber App UI Clone

Follow along with programmer (and pilot!) Varun Nath as he walks us through cloning the Uber app’s user interface in React Native.

A little bit about Varun

Varun didn’t scratch his programming itch until five years ago, when at age 21 he had finished his flight training and was waiting for a job. He started from basic HTML, which led him through php (and its multiple frameworks), SQL/jQuery, Angular, PhoneGap/Cordova, Ionic, Firebase and ultimately Swift — where he really got hooked. He skipped developing for Android, feeling it was too much to learn Java. That’s when he came across React Native and Expo, and hasn’t looked back. While he felt programming with hybrid frameworks (Ionic/PhoneGap) disappointing, he found that RN easily matched the performance of native apps, and had a solid community to boot.

In the last year, Varun’s shifted completely to developing RN apps. During this time, he’s also pursued his dream of flying a commercial airliner (viz. the Boeing 737 NG) for an airline in India. While his full-time day job is as an airline pilot, you can find him geeking out and writing code in most of his off time. It’s quite challenging to find a balance, but while he might forget to pack clothes, he never forgets his laptop!

As a completely self-taught programmer, Varun’s seen many ups and downs, including several times when he felt like giving up — and probably would have done so long ago if weren’t for the amazing resources created by others. To honor this, he started a small YouTube channel last year to give back to the other unsure programmers by creating React Native tutorials.

So without further ado, here’s his video walkthrough of cloning the Uber UI, including:

• Login Layout

• Login Animation, and

• Keyboard Animation