React Native Design

Build front end of 10 Apps for Android and iOS using React Native. Expo, Native Base, Elements - All covered

Last updated 2022-01-10 | 4.9

- You will be able to write front end of any design of mobile apps
- Build youtube front end clone
- Build Tinder cards with Animations

What you'll learn

You will be able to write front end of any design of mobile apps
Build youtube front end clone
Build Tinder cards with Animations
Complete knowledge of front end of React native
You will be building 10 apps front end in React native
Ready to apply as Jr app developer (Android and iOS combo)
Never look back about device size issues
Keyboard aware loing and much more

* Requirements

* Knowledge of Javascript is required like loops and arrow functions of JS (need not to be a guru)
* REACTJS is not required for this course as we will start from basics and will focus more on design
* WINDOWS or MAC - both are great for this course
* ATOM or Sublime text or any other text editor


What is the problem that we are solving with this course?

  1. When you want to learn app development, for iOS it’s swift and for Android it’s Java or Kotlin. 
  2. When screen size varies on any device, it’s really hard to make sure that your app looks consistency
  3. Getting same look on both Android and iOS is another nightmare.

These are the issues that you will never look back after taking this course. We will use Javascript code to build Native mobile apps for both android and iOS. We will use React native, used by Facebook, messenger, Instagram, tesla etc, to build our apps. This is like a front end course for mobile apps.

With React Native, you can use your web skills to produce native mobile apps. Further to help us in fast production, we will use Expo client to generate boiler plate code. Expo is very popular tool in industry to create React native apps.

We will create 10 apps, each addressing different design issues that you will face in your app development journey. Apps like tutorial screen, login screen with keyboard awareness are must to put in your bag.

Also we will create some clones like youtube app clone, of course front end only, so that you can replicate any design that is passed to you.

After taking this course, you will be able to create front end of mobile apps, both android and iOS, using react native. All apps are tested on both iPhone and Android devices and have consistent look on both platform. 

React native is a state of art technology, used by Facebook and loved by developers. Now, finally you can focus on your project concept instead of being worried about learning many languages to create an app.

Have a look at Promo video and there we have mention about the apps that we will be creating in this course.

See you inside the course !

Happy coding!

Who this course is for:

  • Students interested in app development
  • Want to build Android or iOS app
  • Want to use their web skills into app development
  • students who wants layout and design issues for their apps

Course content

12 sections • 47 lectures

Introduction to the course Preview 04:31

A quick overview of what we will be building in this course.

Get all the tools - Do not skip Preview 09:20

Let's get all the required tools for React Native development

Setting up Expo, AVD and XCODE Preview 14:50

In this video we will learn to setup Expo, our main code generator, Android simulator, you can use Real device too, and Xcode

File structure of expo project Preview 03:54

In this video let's try to understand the simple architecture of expo generated project and it's file structure

Exercise files Preview 00:01

Get your exercise files from here.

Configure Atom - Important Preview 06:59

In this video we will learn to configure atom. We will add some custom snippets to help us to generate boiler plate code quickly

Basics of React Native and styling Preview 09:12

First of all, let's understand the basics of React native and How it's styling works. In react native all styles are written in the same file.

Creating a seperate component Preview 07:57

In this video we will learn about creating a separate component and call it in our main App.js file. This is an easy process.

Flexbox basics and free resource to learn flexbox Preview 08:48

Flexbox is a great way to design your web elements and we will be using the same for React native applications as well.

Getting ScrollView ready for screens Preview 08:51

Let's first generate a Expo project aka React native project. We will create 3 vertical views first so that we can put our content first.

Styling tips for scrollViews Preview 11:49

Next, we will learn to write styles for our views and texts. Styling is little different from what you have seen in web development

Running it on Actual Android device Preview 02:10

Finally, let's run this app in Actual Android device. I will be doing this a lot in this course as I prefer real android device, it's fast.

Getting started with login screens and situations Preview 13:02

Next we will work on a fresh project of login screen. This project can be easily converted into Sign Up form too and some tips.

Nesting components styling Preview 06:17

In this video we will learn to create nesting of styles in a single components. This is a very common technique that everyone uses.

Avoiding keyboard in login Preview 12:58

In this video we will learn about how we can move our view when virtual keyboard appears on the mobile screen on both Android and iOS

Running app on Actual Android device Preview 02:28

Just like what we do at the end of project, we are going to launch the app on actual android device. This is just to show that project looks exactly same on android.

Shopping cart top bar Preview 16:30

In this video we will setup a shopping cart top bar. We are going to start by creating a fresh project and then creating a separate component.

Adding hero image Preview 05:54

Next we will create a component that will have  a hero image. Usually in shopping app page, you have a top hero image with text

Adding Scrollable body with prop components Preview 14:48

Next we will add a scrollable component that will have different size images in a row. Every row will have different CSS.

Overlay Text over images Preview 10:26

Next, just add some looks to this app images, we will add overlay texts. We will create a separate component for this overlay text too.

Running project on Actual Android devices Preview 02:41

Next, we will do the same thing just like we have done in past projects as well. We will run this project on an actual android device.

Designing Header for Gallery Preview 17:19

Let's first setup a new and fresh project. Then we will design the first component of this app. This is going to be the header of the app

Styling Text elements of header Preview 07:10

Next we want to add some text to the header. Text like name and a tag line. We need to provide custom CSS styling for it.

Mid section - subscribers Preview 10:33

Next, we will add a mid section to this app. This mid section will help you have numbers to feature like subscribers etc.

Scrollable gallery Preview 10:13

Next we will like to have a scrollable gallery with photos in it. This will be helpful in viewing all photos and is inspired by instagram

Getting started with youtube logo Preview 11:42

First we need to get youtube logo. You can pick up any logo from google or can use one in the exercise files and we have to fix it's height and width

Getting the material icons Preview 07:45

Youtube uses Google's material icons. Luckily material icons comes as a package in expo and even there are many types of other icons too.

Having bottom bar of youtube Preview 12:19

Next we would like to have bottom bar of youtube app. This app consists of 5 icons and name under them. Later will learn about badges too.

Designing body of video tiles Preview 20:01

Next we will use json data to fetch youtube thumbnails and video titles. You can put them manually but using jsonmakes more sense

Debugging and running it on Android Devices Preview 03:55

Next, we will do the same thing just like we have done in past projects as well. We will run this project on an actual android device.

Introduction to Native Base Preview 07:18

in this video, we will learn to install Native base. Native base is like bootstrap for mobile apps. Build in components with styling.

Installing Native base with Expo Client Preview 14:09

Installing expo is really simple. We will use NPM to install native base. There is just one additional step while installing native base.

Fixing Android issue related to fonts Preview 01:49

If you are using Android, you might face an issue that Roboto font is not loaded properly. You can just add this code to avoid this issue

React Native Elements setup Preview 10:35

React native elements is another library for RN, just like native base. you can even use both libraries or can choose to go with just one.

Horizontal card view with ListView Preview 09:10

Next, we will learn to put horizontal cards in a scroll view. This will help you to get a view like amazon prime use in their app.

Setting up Native base for Drawer Preview 05:38

Let's create a new project for the drawer application. You can choose that drawer should come from left or right but usually left is more user friendly.

Getting Instagram style cards Preview 07:50

Let's also talk about instagram style cards that has a like button and share button. You can put even more information in these cards.

Getting a footer with badges Preview 06:11

Next we will get a footer and will even have badges with number in this footer. Usually notifications are displayed here.

Creating sidebar component Preview 10:07

In order to create a sidebar, we first have to create a sidebar component. This component will load up as soon as we tap on a button.

Sidebar and scrollable card in both directions Preview 13:26

In the final touch we will call our sidebar and will learn more about cards. We can put our cards vertically or even horizontally. 

Running it on Actual Android device Preview 03:02

Next, we will do the same thing just like we have done in past projects as well. We will run this project on an actual android device.

Creating a project for Tinder cards Preview 03:26

Let's create a new project to have tinder cards. These cards are simple to use and we don't have to be much worried about animations.

Custom header components Preview 07:54

Let's make sure that app looks great and for that we will make sure to have a header in our app. Also you can wrap it in component

Tinder swipe cards components Preview 08:06

Finally let's have our swipeable cards. There are many props with these cards like repeat allowed or to be not allowed.

Chatlist view setup Preview 06:01

Let's setup a chatlist view project. Here we will be using api from randomuser me, a website that provides lorem ipsum data but with little more meaning.

Having a Chatlist and assignment Preview 12:29

Having a chat list is very simple, specially with react native elements. Also, there is a small assignment with this app.

More free resource and thanks Preview 00:14


Thank you for taking this course. Hope you will be able to use these apps knowledge. Also I have provided links of pexels, from where you can use my clicked photos totally for free. join me at youtube for more discussion, as I post regularly there. With over 120K+ subscribers, programming community is growing there.

Thanks and Happy coding!