React Native Design

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

Hi,

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!