Intermediate React Native Introduction
Transcript from the "Introduction" Lesson
>> Hi there, and welcome to this intermediate React Native course. So, in this course we are going to use this course website that you can access and basically all the course materials are available from here. So you can follow along and you can also reference things if you miss what I was typing, it can use the light or dark modes.
[00:00:20] I'm going to go for dark mode just to match all my editors. And if we go to course, so we've got a course structure here and basically the format will be, I'm going to go through this course page and we're going to build a React Native app together.
[00:01:02] So, this course is going to be an intermediate React Native course. So it's going to expect you to know the basics already. In particular, you should already be familiar with View Text, Touchable Opacity, Flat List and Scroll View. You should already know how to style your components using Stylesheet.
[00:01:20] And you should have an idea on how to use Stack Navigator in React Navigation. We also expect you to be able to use the basic react hooks the use state use effect and use callback. In this course we are not going to be used expert will use plain React Native that means we're getting fully native and you need to build the actual app on your device.
[00:01:44] That means if you want to build an IOS app, you will also need to use a Mac device. Aside from that restriction, please feel free to follow along with Android or IOS Oracle's both. I myself will be using VS code for my code editor. An iPhone 12 simulator and an Android pixel five emulator throughout.
[00:02:03] Throughout the course, usually at the end of the page, but sometimes in the middle, you'll see these blue banners. And this is basically a link to a commit for the demo app that we're going to be building. So if you want to check your work, or you want to make sure that you're in the right place, just reference these commits, and you'll see the actual code that's used in the demos.
[00:02:23] Now look at what we're going to be building. We are basically going to be building this mood app so you can record your moods throughout the day. So we have a list of emojis where you can pick our moods. Notice we have a little animation on the button.
[00:02:43] Then we have a tab layout with the history tabs so we can look at past moods in our history. We can delete the moods from the list and also we have implemented we will implement swipe delete. And on the last hour we have a little pie chart for the ratio of moods so we're going to be using.
[00:03:38] And then it also does pod install to install all their IOS dependencies if you're building on a Mac. So this is why it takes a little while for this command to run. So I already have mood tracker in this directory, so I'm going to delete it and run this again.
[00:03:57] Okay, we're done. Okay, so whenever you start a new project, and this is something I always do so even if you're not sharing it with anyone, even if it's just by yourself, or just like a demo thing that you're trying out, still make it into a git repository.
[00:04:14] So you just get in it, get at everything and get commit,initial commit And the reason that I always do that is then anything that I add later, I will always know exactly what I've added because you can look at the git diff. And whenever you get to a point where things are working, just commit it, because if in the future you add something.
[00:04:39] And it happens a lot in React Native because if you mess with the native dependencies on Xcode or Android Studio, you change something you don't know where it changed it. It's just good to have a state to get back to. So always do this. All right, so let's now open this in Xcode.
[00:04:58] So can I space Xcode so I'll do the iOS project first and so in Xcode you choose open a project or file and then go to wherever you initialize your project. So mine is here and then open the iOS directory this is very important so if you go inside the iOS directory you actually have two of these files you have a Xcode project and a workspace and one of these doesn't recognize pods.
[00:05:32] So just to, like avoid the possibility of that issue happening, just click on highest directory and hit open and they'll open the correct project. So one thing that we didn't have to do because we're using a template is installing dependencies. But I just wanna run you through how dependencies work.
[00:06:24] But now that we are building our own app, we need to also install a native dependencies. So, on iOS, the build dependencies in React Native, and managed using Cocoa pods or pods for shorts, and you can think of cocoa pods kind of like the iOS version of NPM.
[00:06:40] And the way it works is quite similar as well. So to install the native iOS dependencies, we'll need to run the install command in the project's iOS directory. So you'll CD into iOS and run pod install. We'll be doing this a lot about the course, because we're using a lot of native libraries, but dependencies work, very similar to geometry dependencies.