Introduction

[00:00:00]
>> 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:00:34]
So, my name is Kadi Kraman. I am a Principal Engineer at Formidable and I mostly build things using JavaScript. So, these days I mostly use React Native and Graph QL. I've been doing web development in React since 2015 and React Native since 2017. I've been super fortunate to have been involved in several exciting end to end React Native projects over the years and I'm really excited to share some of the things I've learned along the way.

[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:04]
Let's start by creating a new project. So let's open the terminal. And we want to copy this MPX command. So this is a react-native init commands that will create an app called MoodTracker. And it's using the react-native typescript template. So this is going to take a little while because what it does is it downloads a template then it does yarn install to install all your JavaScript dependencies.

[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:05:49]
For example, if you were using a project but working on a project with a team. So there are two kinds of dependencies in playing react native. You have your JavaScript dependencies and you have your native dependencies. So to install, the Java Script dependencies, you simply run yarn or NPM install.

[00:06:05]
So you'll be familiar with that already. But because we are now building a native app. We don't just have the JavaScript dependencies to worry about we also need to install the native dependencies. So, if you were using Expo, before Expo managed all that for you, they chose, they picked, and chose the native dependencies that they think you might use, and they handle all of that.

[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.

[00:07:00]
So, in JavaScript, you have a package Jason, which is the list of the dependencies. On imports you have a pod file which is the list of your dependencies. In iOS you have a yarn lock or an NPM lock which is the auto generated file that records exactly which version or dependencies you're using.

[00:07:20]
In CocoaPods you have a pod file lock which does the same. And finally on in JavaScript dependencies you'll have node modules which is the like project dependencies which you don't check in to get an equivalent to an iOS you have a post directory that works the same way.