React Native Full Stack Course – Clerk, Postgres, NativeWind

[00:00] Welcome to this comprehensive full stack [00:02] React Native tutorial. In this course, [00:04] you will learn how to build a complete [00:07] cross-platform grocery list application [00:10] from scratch using Expo and React [00:13] Native. Throughout the lessons, we will [00:15] integrate modern technologies like Clerk [00:18] for secure authentication, Neon [00:20] Postgress with Drizzle OM for the [00:22] database, and Native Wind for styling. [00:25] By the end, you will have the practical [00:27] skills needed to confidently develop and [00:30] deploy your own full stack mobile [00:33] applications for both iOS and Android. [00:36] Barack from Code Consistency developed [00:38] this course. This is the mobile [00:40] application that we're going to build in [00:42] this tutorial using React Native and [00:44] Expo. I will assume that you don't have [00:46] any mobile development experience at [00:49] all. So, it is completely fine to follow [00:51] along as a complete beginner. We are [00:53] going to build it in a way that it'll [00:55] work both on Android and iOS smoothly [00:58] without any issues. Before we jump into [01:00] coding, I'd like to give you a quick [01:02] demo of the end result so that you know [01:04] what we are building in this course. So [01:06] this is a full stack application where [01:09] we can list our groceries. You can think [01:11] of it like a to-do app but it is built [01:14] for grocery list. You can use it with [01:16] your partner or with family members. And [01:18] in total it has four different screens [01:21] which are authentication list planner [01:24] and insights. To be able to use this app [01:27] first you have to authenticate. And for [01:29] this we have three different options [01:31] which are Google, Apple and GitHub. If [01:34] you want to add more of these oath [01:35] providers like Facebook, Twitch, Slack, [01:38] so on and so forth. I'll show you how to [01:40] do it a bit later in the video. Now once [01:42] you log in you will be redirected to the [01:44] list screen where you will see the list [01:47] of items that you need to buy. Now here [01:49] you can check the items update the [01:51] quantity and delete them. And under the [01:54] planner tab you can add items to the [01:56] list by filling in this form. And [01:58] finally under the insights you can see [02:01] the profile information with a log out [02:03] button, a quick analytics section and a [02:06] button to clear all completed items from [02:08] your application. On top of all these, [02:11] you will also learn how to add a [02:13] feedback button so that your users can [02:15] give you some suggestions about what [02:17] feature to include or what is buggy so [02:20] that you can jump into your codebase and [02:22] fix those problems. Now, notice how we [02:24] have the liquid glass effect on the [02:26] tabs, which is one of the latest [02:28] features on iOS, and you're going to [02:30] learn how to build it in this course [02:32] from absolute scratch. To build this [02:35] application, we are going to use the [02:36] latest and greatest technologies. So for [02:39] the database we are going to be using [02:41] Postgress and integrate it with an OM [02:43] called Drizzle and we are going to [02:45] deploy this database on the cloud using [02:48] neon. For authentication we will [02:50] integrate clerk which is completely [02:52] secure and easy to set up. When it comes [02:54] to styling we will use native wind which [02:57] is tailwind but for react native we are [02:59] going to handle global state management [03:01] with zastand which is also pretty easy [03:04] to get started with. So that's the tech [03:06] stack and overall once you complete this [03:09] project you should be able to build your [03:11] own mobile applications because this [03:13] guide will give you everything you need [03:15] to get started with mobile development [03:17] with React Native and Expo. All the [03:20] tools we use in this course are [03:22] completely free. So you don't need a [03:24] credit card to be able to follow along. [03:26] As usual, the source code of this [03:28] project will also be free. You can find [03:30] the link in the description. So if [03:32] you're ready, let's get started. In this [03:34] project, we are going to be using Sentry [03:36] to implement the feedback button and I [03:39] will leave a special link in the [03:40] description which is going to provide [03:42] you with $80 free credits. Go ahead and [03:45] sign up and get those free credits. Now, [03:48] one thing I want to mention before you [03:49] get started, this course will teach you [03:52] the fundamentals of mobile development [03:54] by building a full stack app from [03:56] absolute scratch. But if your goal is to [03:58] build a real app that people actually [04:01] use and pay for, that's a completely [04:03] different game. Things like app store [04:05] deployment, pay walls and subscriptions, [04:08] user onboarding, real-time databases, [04:10] authentication, privacy policy, terms of [04:13] service, contact and support pages, app [04:16] marketing, getting your first users, [04:18] monetization, and so on. These are the [04:20] things that turn a coding project into [04:23] an actual business. And that's exactly [04:25] what we are doing inside my school [04:27] community right now. We are currently [04:29] building a fitness app using AI. And [04:31] this app is designed to help skinny [04:33] people gain muscle and transform their [04:36] physique by tracking their calories [04:38] daily. This is a 100 day app building [04:40] challenge where I'm documenting the [04:42] entire process in real time. Now, as of [04:45] today, we are on day 10, but you can [04:48] jump in at any point and catch up on all [04:50] previous lessons because everything is [04:52] recorded. Inside this community, you [04:54] will see exactly how I turn an idea into [04:57] a real product. Use AI to create designs [05:00] and UI UX. Build the app step by step. [05:04] Test and improve the user experience. [05:06] Publish the app to the app store. Add [05:08] monetization systems. Do the marketing [05:11] with the AI influencers. Generate the [05:13] revenue from the finished product. Now, [05:15] here nothing is hidden. I'm sharing the [05:17] wins, mistakes, decisions, and [05:20] strategies as we go. So, if you ever [05:22] wanted to see what it actually looks [05:23] like to go from idea to customers, this [05:26] is probably the most valuable thing that [05:28] I can show you. Lifetime access is [05:30] currently just $25. Now, this isn't just [05:33] a course. It's a community where we stay [05:36] in touch, keep each other accountable, [05:38] and help each other make progress. As of [05:41] recording this video, we have 25 members [05:43] from all around the world, and everyone [05:45] is building their own app idea while [05:48] following along with the challenge. and [05:50] I am adding new content every single [05:52] day. So, the price will increase as the [05:54] community and content library grow. You [05:57] can join now and log in lifetime access [05:59] for the lowest price possible. Thanks [06:01] for watching and I'll see you inside. [06:04] All right, so to get started with I have [06:07] an empty folder which is opened up in VS [06:09] Code. This is the name that I came up [06:11] with. It is called Crosify, but you can [06:13] call it anything that you wish. Just go [06:16] ahead and open this up in VS Code or any [06:18] ID that you wish. Now before we start [06:21] writing any code, I'd like to show you [06:23] some diagrams that I have prepared so [06:25] that we can understand React Native and [06:28] Expo before we start writing any code. [06:31] Okay, so let's start with the question, [06:33] what is React Native in the first place? [06:35] So it is a framework that allows you to [06:38] build mobile applications using React, [06:40] specifically JavaScript or TypeScript. [06:43] In this video, we're going to be using [06:45] TypeScript, which is I think a lot [06:47] better than JavaScript because you get [06:49] the type safety, but if you wanted to, [06:51] you can still use JavaScript to build [06:54] it. Okay, so once again, it is a [06:56] framework that allows you to build [06:58] mobile applications using React. Now, [07:00] there is something called crossplatform [07:03] development, and this basically means [07:05] that you write code once, and that can [07:09] run on multiple platforms. And this is [07:12] exactly what React Native allows you to [07:14] have. It is a cross-platform framework [07:17] because you can write one codebase in [07:19] JavaScript and you can deploy it to both [07:22] iOS and Android. This could be also [07:25] TypeScript. So you get the point. It is [07:27] crossplatform. Basically you write one [07:30] codebase in one language which is [07:33] JavaScript. Then you can deploy it to [07:35] multiple platforms. Okay. Now, this [07:38] wasn't really the case back in the old [07:40] days. So, for iOS, you need to learn [07:43] Swift or I think Objective C and for [07:46] Android, you need to learn Java or [07:48] Cotlin, which is not really convenient, [07:51] right? But now, you can just basically [07:53] learn JavaScript and be able to both [07:57] like be able to build both web [07:59] applications with React and mobile [08:02] applications with React Native. Now, [08:04] let's just scroll to the bottom. Now, [08:06] React Native itself by itself it is not [08:09] enough. And this is a screenshot coming [08:11] from the React Native documentation. [08:14] They say we believe that the best way to [08:16] experience React Native is through a [08:19] framework and specifically they [08:21] recommend us to use Expo. Let's just [08:24] double check from React Native. This is [08:26] the documentation they have reactive. [08:29] Just say get started. And here you'll [08:32] see that's exact same screenshot that I [08:34] took. Now expo like what is expo right [08:38] it is you can think of it like basically [08:41] a platform that is built on top of react [08:44] native. It gives you everything that [08:47] react native provides but on top of it [08:50] it has extra features. So you will get [08:53] more components that is optimized you [08:56] know you can you can use this even to [08:59] deploy your app to app store. Now we [09:02] will get into the details for now. Just [09:04] know that this is something that you can [09:06] use to get started with and this is [09:09] actually what React Native official [09:11] documentation recommends. [09:15] Okay, let's just scroll to the bottom. [09:17] Our goto framework for React Native is [09:20] going to be Expo which is completely [09:21] production ready. So you can build apps [09:24] and deploy it to App Store. Now again uh [09:27] they are not the same thing. React [09:29] Native is different than Expo because [09:32] like some people think they are the same [09:34] thing. Well, not really. React Native is [09:37] the core framework. Expo is built on top [09:41] of it. Okay, so when you're writing when [09:44] you're using Expo, at the end of the [09:46] day, you are still writing React Native [09:48] code, but on top of it, you have some [09:50] extra features like let's say API [09:53] routes, which is something that we'll [09:55] get into the details. So you have more [09:58] performance optimizations. Let's put [10:01] this in that way. So if you ever used [10:03] React and Nex.js, it is the similar [10:06] concept. When you're using Nex.js, at [10:08] the end of the day, you are still using [10:11] React, right? But you have some [10:13] additional features like the image [10:15] component which is optimized. You have [10:18] font optimizations. I don't know like [10:20] you have server actions, server [10:22] components, things like that. So it is [10:25] the similar concept and here are some [10:28] applications that are built with expo [10:30] that is very popular like the Coinbase, [10:33] the Phantom crypto wallet app, the blue [10:36] sky social. Um like this is just an [10:39] example to let you know that Expo is [10:42] completely production ready and these [10:44] are one of the top startups that are [10:46] using Expo. All right. So now that we [10:49] understand React Native and Expo, just [10:52] before we jump into coding, I'd like to [10:54] show you some differences between React [10:56] and React Native and some similarities. [10:59] So let's started with the component [11:01] structure. [11:03] Okay, so on web we would have things [11:05] like a div, H1, P, so on and so forth, [11:09] right? And we would write JSX. So here [11:11] it is almost the exact same thing in [11:13] React Native but basically instead of [11:16] using a div which is kind of like a box [11:19] you would use a view element which is [11:21] imported from React Native and then you [11:24] can get text for any kind of text that [11:27] could be H1 H2 P tag span it doesn't [11:31] really matter anytime you have a text [11:34] you're going to use the text element so [11:37] here if you write view this is going to [11:40] fail it'll say if you are going to have [11:42] text it should be within the text [11:44] element okay and we will see this in [11:46] detail just you know like just see the [11:49] differences you don't need to memorize [11:50] at all and then when it comes to styling [11:53] in web you would have a class name then [11:56] within a CSS file you would create that [11:58] class name add your styles here in React [12:01] Native it's a little bit different you [12:03] would create a stylesheet so you would [12:05] import this then create an object then [12:09] here you would give the class name, then [12:11] the styles would be under an object. And [12:14] then if you wanted to use this class, [12:16] you would say styles.cart. It'll get you [12:19] all these styles and apply it to right [12:21] here. Then you can say styles.profile [12:24] image, so on and so forth. And now this [12:27] is the old way of doing it. I wouldn't [12:29] say old, but you know, it's the default [12:32] way. On top of this, we're going to be [12:34] using tailwind. So we can just add our [12:37] classes just like that within the view. [12:40] itself instead of creating a JavaScript [12:42] object. So this is something that we'll [12:44] get into a bit later in the video. Oops, [12:48] what have I done? Then we have event [12:50] handling. Now on web you would have [12:53] things like on click, on mouse over, [12:55] things like that. But on React Native, [12:58] we don't have a mouse, right? So we use [13:00] things like on press, on double press, [13:03] on long press, so on and so forth. And [13:06] instead of using a button element, we [13:08] would use something like touchable [13:10] opacity. And I think this is kind of [13:12] like an old way of doing it. The better [13:14] way is now to use a pressable component. [13:17] And we will get into uh we will get into [13:19] the details as well. [13:22] Okay. So very last two examples. When it [13:26] comes to the lists in React web, you [13:28] would use items.m map and then you would [13:31] map through it, right? For every single [13:33] item, you would display something. You [13:35] can do the exact same thing on React [13:37] Native. But there is a better and more [13:40] performant way which is called flat [13:42] list. And we will get into the details [13:44] later in the video. Just know that [13:47] instead of using items.m map or you know [13:50] array.m map there is an alternative [13:53] called flat list which is more [13:55] performant. You can keep it in your [13:57] notes if you really wanted to. You can [13:59] also get these diagrams. The link will [14:01] be in the description for completely [14:02] free. [14:04] Okay. Finally, we have forms. In React [14:06] web, you would have a form onsubmit, [14:09] input, onchange, value, so on and so [14:12] forth. It is very similar to React [14:15] Native, but we don't have a form [14:17] element. Instead, you would add the [14:19] submit on the button with on press and [14:22] instead of using input, you would use a [14:24] text input element just like this one. [14:27] The rest is mostly the same. You can [14:29] give the style, value, on change, [14:32] placeholder, so on and so forth. So as [14:34] you can tell React and React Native is [14:37] very very similar. If you have the [14:39] fundamentals of React, you should be [14:41] good to go. Um I'll try to explain most [14:43] of the things that you need to basically [14:46] follow along with this course. Okay. So [14:49] let's jump into VS Code. [14:51] We will open up our terminal and we're [14:54] going to be using Expo to initialize a [14:57] template application. Okay. So, we're [14:59] going to say MPX create expo app. We [15:04] will say latest and let's say I'll just [15:07] kill the left hand side. Let me zoom in. [15:09] We're going to say dash template [15:12] default. We're going to be using the [15:14] default template. And here I'll put add [15:17] next at the end. Now, depending on when [15:21] you are watching this video, you don't [15:23] need to add the next. I'm going to put [15:25] it in the description of this video. But [15:28] at the time that I'm recording, I need [15:30] to add the next so that we can use the [15:32] latest version. Okay. So before you run [15:35] this command, just take a look at the [15:37] description of this video. I'll tell [15:39] I'll tell you like if you should include [15:41] this or not. Okay. So I'll say add next. [15:44] And I'm going to put dot at the end [15:46] which means create it under the current [15:49] folder. So I'm going to run this. [15:52] This will get some files and folders. [15:54] Then it'll install the dependencies. [15:57] Then we can run our application. Now, [16:00] while this is installing, you're going [16:01] to find two different links in the [16:03] description where we can set up our [16:05] database and authentication. So, go [16:08] ahead and click to those links, then [16:10] sign up to both clerk and neon, which is [16:13] completely free to get started with. You [16:16] don't need to pay anything. And if you [16:18] go with the link, they would know that [16:19] you are coming from this video and I [16:21] would appreciate that. Now, clerk is the [16:24] platform where we will have the [16:26] authentication. So, we're going to store [16:28] the users here. Everything will be safe. [16:31] Then we can get the social [16:33] authentication service like Google, [16:36] GitHub, LinkedIn, Facebook, so on and so [16:38] forth. And I'll like I'll show you how [16:41] to implement that. Then we will have [16:43] Neon which is going to provide us a [16:45] Postgress database on the cloud. So [16:48] they're going to deploy it. They're [16:50] going to handle it so that we don't [16:51] really need to think about setting up [16:53] our own database. Okay. Now let's go and [16:57] sign up to clerk and then once you sign [17:00] up you will be under the dashboard. So [17:03] here we can create an application. [17:06] Let's give it a name. I'll just say [17:08] grossify but once again you can call it [17:10] anything that you wish. Then you can [17:13] toggle any of these providers. So I'm [17:15] going to keep the email. I'll have the [17:17] Google, let's say GitHub as well as [17:20] Apple. Okay. So I'll say create [17:21] application. And if you want to add [17:23] more, you would just toggle them. Now in [17:26] free plan, you can add only three [17:28] options. But if you're in the paid plan, [17:30] you can add more. I think you don't need [17:32] to pay anything to get started with at [17:34] the moment. And it is very very [17:36] generous. So I'll say create the [17:38] application [17:41] and then we can get the expo SDK. So [17:44] they have bunch of different SDKs but we [17:46] are interested in this one. Now here we [17:49] will follow along the steps but first [17:52] let's go ahead and get the neon as well. [17:55] I will try to log to my account [18:01] and then we will create a project. So [18:04] once you're authenticated you will be in [18:06] the console [18:08] where you can create a project. Now here [18:11] I have bunch of different projects but [18:13] we will start from scratch. You can just [18:15] ignore them completely. We'll say create [18:17] a new project. Let's give it a name. So [18:20] here I already have corrosify test. This [18:23] is something that I have created last [18:25] week to test things out. But we will [18:28] start from scratch. So here I'll say [18:30] grossify and I'll leave everything as it [18:34] is. Then I'll say create the project. [18:37] Then we will be using the connection [18:39] string [18:41] like this one so that we can connect to [18:43] our database. Actually I'll just copy it [18:45] right now. Let's go into our you know VS [18:49] code here. This is done. I'll get into [18:52] the details first. Let's create thev [18:56] file right here. and I will paste this [18:58] in. And we can do a similar thing for [19:01] the clerk. Just scroll to the bottom. [19:04] You're going to see the expo public [19:08] clerk publishable key which should be [19:11] under the env file. So again, go ahead, [19:13] copy that and paste that in. [19:17] Okay. So these are the environment [19:20] variables that we are going to be using [19:21] a little bit later in the video. [19:24] All right. So that was the setup for [19:26] clerk and neon. Now I'd like to walk you [19:28] through the codebase what we have at the [19:30] moment because it it might look a little [19:33] bit confusing as a beginner but don't [19:35] worry it is not really that confusing [19:38] and we will actually delete most of the [19:40] things and we will start from scratch. [19:42] Now first off we have the source folder [19:45] as you can tell. So this is where we [19:47] have the application code. Things like [19:50] our custom hooks, you know, components, [19:52] screens, [19:54] app logic, anything would go under the [19:56] source. So I'll get into the details in [19:58] a second. Other than this, we have some [20:01] scripts. This is going to reset the [20:03] project. You will see what that means. [20:05] We have node modules, assets where we [20:07] have images, icons, so on and so forth. [20:10] And I have a VS code folder. This is [20:13] just for configuration. You can ignore [20:15] this completely. Then we have some more [20:17] configuration files like app.json. This [20:21] gives the you know information about our [20:24] app. You can add more plugins which is [20:26] something that we'll do later in the [20:28] video. So just know that DS is for [20:30] configurations right? Then we have [20:32] package.json [20:34] with some scripts and all the [20:36] dependencies. Now once you use expo [20:39] which is what we have done as you can [20:41] tell you get a giant list of [20:43] dependencies which is very cool. So that [20:45] means almost all these um like all these [20:50] packages are installed for us. So we can [20:53] use expo image expo linking expo router [20:56] so on and so forth. Okay. So these are [20:58] the default packages that are installed [21:00] when you use expo. Okay. So other than [21:03] this let's take a look at this source [21:05] folder. You have some components. It's [21:07] not really important. You can delete [21:09] this completely. You can delete the [21:11] constants. I mean, if you're interested, [21:13] you can take a look at the details, but [21:15] that would be pretty confusing. So, [21:17] we'll just basically delete everything [21:19] and start from scratch. You can delete [21:21] them manually, but you can also run this [21:24] script. So, you can open up your [21:26] terminal. Let's clear this up. I'll say [21:28] mpm run reset project. [21:32] So by doing this you are basically [21:34] calling this script called reset project [21:38] and it's going to run this file. Let's [21:41] just run that. [21:43] I'll press no. [21:46] So it'll basically delete everything. [21:48] Okay. So all the default templates that [21:51] we had. So all the default files and [21:53] folders we had are now gone. And here I [21:56] said no so that it doesn't store it [21:58] right here. If you say yes, it would [22:00] take everything and put it under an [22:02] example folder. Okay. Now, anyways, [22:05] everything has been cleared out. How do [22:07] we run this application? Now, there is [22:10] two different ways. Let me uh let me [22:12] first show the first one. So, I am on [22:15] Mac. I'll be running the simulator. If [22:17] you're on Mac, you can do the same [22:19] thing. But if you're on Windows, you can [22:21] run a simulator with Android Studio. [22:25] Okay. Now, let's just try to run it with [22:27] iOS. And if you don't have a simulator, [22:29] I'll show you how to run it in your [22:31] actual device. Okay. Now, you would [22:34] basically say MPX expo [22:39] and I will put them side by side. Looks [22:41] like I have another application running. [22:43] Let me just kill this in my second [22:46] screen. I'm going to kill that [22:47] application and I'll just run this once [22:49] again. MPX Expo. [22:53] Okay. Now you can press I to load the [22:57] iOS simulator. You can press A to run it [23:00] on the Android. So I'll press I. [23:04] So here it says we should install this [23:05] version. Like I'll say yes. It's going [23:08] to basically get the Expo application [23:10] with the latest version. And you can [23:13] install this app in your physical device [23:15] as well. I'll show you that in a second. [23:18] And actually while this is installing, [23:20] let me walk you through it. Now there [23:23] are two different ways to follow along [23:25] this course. So first you can install [23:28] the Xoggo application in your actual [23:31] device. So either from oops let's go [23:34] back either from app store or play store [23:37] you would go ahead and install it. Then [23:40] when you say MPX expo you would get this [23:43] QR code. Then you can scan this in your [23:46] actual device. Then it is going to run [23:48] this app in your phone. Okay. So that's [23:50] the most convenient way. The other way [23:53] is what I'm doing right here. You would [23:55] install a simulator and you would run [23:58] it. If you're on Windows, you would run [24:00] it in Android Studio. If you're in Mac [24:03] OS, you would run it with Xcode. Okay, [24:06] so this is a bit a slower installation [24:09] process, but in the long term, I think [24:12] this is better because you don't really [24:14] need to always use your phone, right? [24:17] you can just get the simulator, put them [24:19] side by side. Okay, in this course I'll [24:22] be using the simulator since you need to [24:25] see it. But if you wanted to, you can [24:27] use the, you know, the first option [24:30] where you can use your actual device. So [24:33] with that being said, let's take a look [24:34] at the app that we have at the moment. [24:39] So what you see here is the content we [24:42] have under the index.tsx file. And you [24:45] can, you know, change it and save it. [24:49] It's going to update in real time. Okay. [24:51] So, there is like a hot reload going on. [24:54] And you can add more styles. Let's say [24:56] something like the background color is [24:59] going to be something like red. It [25:01] should work out. Right now, we will get [25:03] into the details. But first, let's take [25:05] a look at the source folder where we [25:07] have the app folder. Now, this is a [25:10] special folder called app. And anything [25:12] that you put here would become a screen. [25:15] So this has what we call filebased [25:18] routing. Let me just delete the [25:19] background color first. Let's try to [25:22] create another route. So before we do [25:25] so, let's take a look at the root layout [25:27] as well. This is a file where we have [25:30] the stack component. We will get into [25:32] the details for now. Just please don't [25:34] get confused. I'll just try to go very [25:37] slowly until we understand everything. [25:40] And once you understand most of the [25:42] things then we can speed up the process. [25:45] So we will get into this file. Just know [25:47] that this is a special file. You have to [25:50] call it in this way underscore layout. [25:53] The extension could be tsx or jsx [25:56] depending on if you want to use [25:57] typescript or javascript but basically [26:00] the name should be underscore layout. [26:03] And you can have multiple versions of [26:05] this file. Now let's go under the app. [26:08] We are going to create a let's say an [26:11] about screen. Within this you can have [26:13] underscore layout.tsx [26:16] as well. Then you can have index.tsx [26:19] file. I'll just say rnf. [26:23] And I'll get this boilerplate code. If [26:26] you would like to get the same thing, [26:28] you can install this extension [26:30] called react and react native snippets. [26:34] Go ahead and install this. Then you [26:37] should be able to say something like R [26:39] NF which means React Native functional [26:42] component and I'm going to call this as [26:45] the screen. [26:48] Now let's go here under the home screen. [26:51] We can add a link. This is just an [26:53] example by the way. You don't need to [26:55] follow along. So this will be a link [26:57] element. We'll say href take us to about [27:02] screen. Here you can tell it is type [27:04] safe and I'll just say about screen [27:07] link. [27:08] So we just got the link. I can click it [27:10] and it'll take us to the about screen. [27:13] Now we have a layout file right here. [27:16] But we are not using it. So we can use [27:18] this. I'll just say rnf. We are going to [27:21] return a stack component coming from [27:24] expo router. And now if you let me just [27:28] go here once again. If you want to get [27:31] rid of this kind of like the title, you [27:34] can say screen options, you can add the [27:37] header shown to be equal to false. [27:41] Notice how the header is gone. Right? So [27:44] this is one of the ways to use layout [27:48] component. You can add different [27:50] configurations. So you can add logic for [27:52] redirection etc. And we're going to see [27:55] it later in the video. So once again, [27:57] please don't get confused if some of [27:59] these things looks a little bit weird. [28:02] That's completely normal, but we will [28:04] get into the details later in the video [28:06] in more detail. Now here, let's just try [28:09] to kind of like repeat what we have [28:12] done. What we have we have a root layout [28:15] where we are using the stack component. [28:18] And by using the stack, you can also get [28:20] rid of the header. Again, you would say [28:22] screen options header shown is going to [28:25] be equal to false. And now it's gone as [28:29] you can tell. So, there are a ton of [28:32] other options that you can use to [28:34] customize it, but for now, we'll just [28:36] keep it simple. And then we have the [28:39] home screen, right? We are using a view [28:41] element with some styles. We have a text [28:45] element, which is this one. And then we [28:48] have a link element coming from Expo [28:50] router. And when you clicked it, it [28:53] takes us to it takes us to about screen. [28:56] Now here you can tell the content is [28:58] overflowing with the status bar. This is [29:01] a very popular bug, but we are going to [29:04] fix it. I'll show you how to fix this [29:06] behavior a little bit later in the [29:08] video. Then here we have the about [29:10] screen. If you want to have a new [29:12] screen, you can create folders like this [29:15] one about or let's say you want to have [29:18] a contact screen, then you would create [29:20] a folder and then put a file into it. Or [29:23] if you wanted to, I believe you can just [29:26] call it as a file as well, like [29:29] contact.tsx. [29:30] Let's test this out. It's been a while [29:32] since I haven't tried it, but I'll just [29:34] say contact screen. [29:38] And I'm going to duplicate this link. [29:40] Let's say can we go to contact? Yes, we [29:43] can do so. So, I'll just say contact [29:44] screen. Let's go back. If I clicked it, [29:48] notice how we are in the contact screen. [29:51] But the problem with this is that you [29:53] can't really add a layout file for [29:56] contact. Right here, you can add a [29:58] layout file and customize some stuff if [30:01] you're interested, but here you cannot [30:04] really do it. So I would recommend that [30:06] whenever you want to create a new route [30:09] just create a folder and within that [30:11] create the index file as well as the [30:14] layout. Okay. So these were just [30:16] examples. Now we can delete the above [30:18] screen. We don't really need it. We can [30:20] delete these link elements. [30:24] And I think we can also delete the [30:26] styles for now. I'll just leave it. And [30:28] let me show you some more components [30:31] before we end the section. So you can [30:33] get the image component both from React [30:36] Native and Expo image. But this is more [30:40] performant. This is optimized. So I [30:42] would almost always use the Expo image. [30:45] And here you would put some props like [30:48] the source. If you wanted to import a [30:51] local image like from the assets, let's [30:54] try to get I don't know the icon.png, [30:58] then you need to require it. So here [31:00] you'll say require go one up and then [31:04] another up. So basically you would add [31:06] the relative path to [31:10] you know to the icon that you would like [31:12] to have. So here we go under the assets [31:14] under the images and then we get [31:17] expo.png. I think we don't really have [31:20] it. So maybe we can use icon.png. [31:23] Now when you save you are not going to [31:25] see anything because you need to add the [31:27] width and height. So we'll say style [31:29] width and height. Now it is right here [31:32] visible. We can add anything that you [31:34] want like border radius. Let's just say [31:37] something like 20. It should work out. [31:40] So you get the point. You would import [31:42] the component. Then if you want to [31:44] import a local image like from your [31:46] codebase, then you would add the [31:48] relative path. But if you want to get an [31:51] image, let's say from Unsplash, then you [31:53] would just paste the URL, right? and [31:56] then you would see the actual icon. So [32:00] this is something that we'll see later [32:01] in the video. But just know that you [32:03] also need to add the style where you [32:05] have a width and height. [32:09] Now there are more components that we [32:11] can take a look at like we have a text [32:13] input. We have I believe things like [32:16] pressable, right? Which is a button. We [32:19] have touchable opacity. So on and so [32:21] forth. But instead of using all of them, [32:24] I'll leave this section right here and [32:26] we are going to learn these components [32:28] as we need them. Okay, so I hope that [32:30] makes sense. Now let's just quickly do a [32:33] recap of this section and then we are [32:35] going to end it. So we initialized an [32:38] Expo React Native application using the [32:40] Expo CLI which was this one at the very [32:44] top. I think I cannot see it but it was [32:48] okay I cannot see it but it was MPX [32:51] create expo app [32:54] at the latest then we set template [32:57] default [32:58] at next. So you got the point. So we get [33:01] the application then we run the script [33:04] to reset our project then we have a root [33:07] layout as well as the index file. So [33:09] this is our home screen that we can see [33:11] at the moment where we can have some [33:13] styles, components, so on and so forth [33:16] and under the root layout we have the [33:19] stack element. Now we will get into the [33:21] details what this means but for now just [33:24] know that the underscore layout is a [33:27] special file and here you can add like [33:32] customizations. You can add some [33:34] providers which is something that we'll [33:35] do later in the video. And finally we [33:38] have the app folder which is a special [33:40] folder. Anything that you put here [33:42] becomes a screen. Right? Finally we got [33:45] um some environment variables. And [33:48] that's it. So with this let's try to end [33:50] the section. I don't really want to make [33:52] it any more confusing or complicated. [33:55] Just try to follow along with the [33:57] diagrams. Maybe pause the video read it [34:00] just to get the hang of it and then we [34:03] will move forward with the next section. [34:06] So I'll see you there. And just before I [34:08] end this section, let's try to commit [34:10] our changes. I'll go under the get [34:12] ignore and I'll just add the env file so [34:16] that this is ignored. Right? We don't [34:19] really want to push this to GitHub. Once [34:21] we have done this, we can go right here. [34:24] Let me just shrink this. I'll say stage [34:27] everything. So press this button. Then [34:29] we can create a you know a commit [34:32] message with AI. [34:36] So it says refactor, clean up project [34:38] structure and remove unused components. [34:40] That's correct. Let's say commit. And I [34:44] think that should be fine. Later in the [34:46] video, we can create a git um GitHub [34:49] repo and push it. And actually, let's do [34:51] it right now. I'll visit my GitHub [34:53] account. And then I'll say create a new [34:56] repository. Let me zoom in. I'll say [34:59] crossify [35:02] expo. And then for now I'm going to make [35:04] it private but at the time that you are [35:07] watching this video it's going to be [35:08] public. Okay. So for now I'll leave it [35:10] private. If you wanted to you can make [35:12] yours public you know if you really [35:14] wanted to. Here I'll say create the [35:17] repository. [35:20] We're going to go here copy this which [35:22] says if you have an existing repository [35:25] you can basically copy and paste this. [35:28] It'll take this code and push it to [35:31] GitHub. [35:32] So let me paste this in [35:35] after like maybe five on or 10 seconds [35:39] it should be right here. Let's refresh. [35:41] Okay. So our code is now on GitHub and [35:44] at the end of every single section we [35:46] are going to add a new command. Okay. So [35:48] with this hopefully I'll see you in the [35:50] next section. All right. So in this [35:52] section we are going to set up native [35:54] event which is Tailwind CSS but for [35:57] React Native. Head over to [35:59] nativeevent.dev dev and say get started. [36:03] We are using the version 4 at the moment [36:05] which is completely fine. It is the [36:07] latest version. Now there is version [36:10] five but it is not really stable. So I [36:12] want you to use the version 4. Okay [36:16] let's follow these steps. We already [36:18] have an application. We are going to [36:20] skip this one. Here it says install the [36:22] native event. I'm going to copy this. Go [36:25] into my codebase. I'll kill my terminal. [36:28] Let's clear this up and I will paste [36:30] this in. [36:32] While this is installing, let's try to [36:35] copy this file name called tailwind [36:38] config.js. [36:39] We will create it under the root. Okay, [36:41] not under the source, not under the app, [36:44] but here under the root and I'll copy [36:47] this file [36:50] and then we'll just paste this in as the [36:52] content. Now, we'll update this in a [36:55] second. For now, let's go and get the [36:57] next step, which is global.css file. [37:02] And again, it's going to be under the [37:04] root. [37:06] Let's copy the content. Paste this in. [37:09] Now, I'm not going to lie, these steps [37:12] are kind of annoying because it's like [37:14] seven different steps, but it's just [37:16] something that you don't need to [37:17] completely understand. Just copy and [37:19] paste. It's going to work. Let's get the [37:22] babelconic.js. [37:24] All in all, it is just setting up [37:26] Tailwind for React Native, right? So, [37:29] create this file, get the content, [37:32] and paste this in. [37:35] Then, we're going to get the [37:37] Metroconfig.js [37:38] file as well. [37:43] Let's grab the content. [37:47] And I believe our packages have been [37:49] installed. [37:53] And then we can get the global.css [37:56] basically imported under the root [37:58] layout. So here I will paste this in. [38:02] Let's see if this path is correct. I [38:04] think it's not. We need to go one up [38:06] because at the moment we are under the [38:08] app, right? We will go one up under the [38:10] source. And then from here we will go [38:12] one up so that we are under the root. [38:15] Then we can get the global.t CSS file. [38:17] As you can tell now VS code can see it. [38:21] Now there is one thing that we need to [38:23] fix and then it's going to work which is [38:27] under the tailwind config.js file. Now [38:30] here it says implement tailwind CSS to [38:34] all the files that are under the [38:36] components and also the app.tsx file but [38:40] we don't really have app.tsx file right [38:42] this is just the template. So instead of [38:45] doing it in this way, I'm going to [38:47] delete this part actually this part [38:50] completely and I'll say anything under [38:53] the source [38:55] like this and then it should work. [38:58] Basically it says anything under the [39:00] source folder under the components [39:04] has any of these extensions JavaScript, [39:06] JSX, TS, TSX it should implement the you [39:11] know tailwind successfully. Now by doing [39:14] this it only includes the components [39:16] folder but if we delete this part it [39:19] should include anything under the [39:20] source. So both the app folder you know [39:23] let's say later you would have the [39:25] components you would have I don't know [39:28] like the [39:30] um let's just say hooks anything it's [39:32] going to implement the tailwind nicely [39:34] in these folders right even though in [39:37] hooks we don't really need tailwind but [39:39] that was just an example let's see the [39:41] next step I think we can skip this [39:44] because it is already done we will get [39:47] this part which is optional but this is [39:50] To make TypeScript happy, I'll say [39:53] native event. Let me just get this file [39:56] under the root. So native event env.ts, [40:00] which is for type declarations. Copy [40:03] this and paste it. And once again, just [40:06] don't get confused. These are some steps [40:08] that you need to follow along. Even if [40:09] you don't understand completely, just [40:12] know what we are doing right here. Okay. [40:14] So we put the correct path so that [40:16] Tailwind is working under the source [40:19] folder. Now with this let's try to run [40:21] our application. I'll say MPX expo [40:29] and then I'll press I which is going to [40:32] start our application and you can press [40:34] R to reload it. Okay. [40:39] Now we can go under the app and try to [40:41] add a class name to test out the [40:45] tailwind. [40:46] Now I'll say text red of 500. And as [40:51] soon as I save here, you can tell it is [40:53] working. So we can add things like text [40:56] forex large. It's going to get bigger. [40:59] We can add maybe like background of say [41:02] purple. So you get the point. Tailwind [41:05] is working. Now if you're not able to [41:08] get these highlights or suggestions, [41:11] that means you don't have this extension [41:13] called Tailwind IntelliSense. [41:16] just go ahead and install it. Then you [41:18] should be able to see the exact same [41:20] thing what I see right here. Okay. So [41:23] that was the native event setup. Once [41:25] again we haven't done anything special [41:28] other than following along the [41:30] documentation. So we installed the [41:32] packages set up some files and for some [41:36] reason it is working magically. So with [41:38] this now you know how to implement [41:40] native wind in your next react native [41:43] projects. So this is the exact same [41:45] setup you will be following if you're [41:47] building a new project in the future. [41:50] That's the exact same setup. Okay. So [41:52] for now let's keep this section as it [41:54] is. Let's put it simple. I'll try to [41:57] stage everything. [41:59] I think it is stage. Let's create a [42:01] commit message. And then we're going to [42:03] end the section. So here, as you can [42:06] tell, I'll be using AI and I'll say [42:09] commit, then sync this up, which will [42:11] take everything that we have right here [42:13] and push it to our GitHub account. Let [42:16] me open up the repo. Where the hell is [42:19] that? We'll say GitHub and the repo name [42:22] was Grossify Expo. [42:27] Now we can tell we can see the latest [42:29] commit. Okay, so that's it for this [42:32] section. Hopefully I'll see you in the [42:33] next one. [42:34] So this is where we left. Now in this [42:36] section, I would like to implement [42:38] authentication. Let's first take a look [42:40] at the documentation of clerk because we [42:43] are going to follow these steps. So head [42:45] over to dashboard, select your project [42:47] and press the expo SDK. Now here the [42:51] first step is to create an expo [42:53] application. We already have it so we're [42:55] going to skip that. The second step is [42:58] to clear the template files. And since [43:01] we have already deleted them, we can [43:03] skip this as well. Then we will start [43:05] with the third step. So we need to [43:07] install the packages. I'm going to copy [43:09] this, open up my terminal, and I will [43:12] run, you know, we will install the [43:14] cleric expo and expo secure store. So [43:17] these are the packages that we need to [43:19] implement the authentication. Then we [43:22] already like we already got the [43:24] environment variable, right? It is right [43:26] here. And then we are going to wrap our [43:29] entire application with the clerk [43:31] provider component. So let me just copy [43:33] this part. Go under the root layout as [43:37] you can tell [43:39] which is under the app and I will paste [43:42] this in. We're just getting the [43:44] environment variable. If it is not [43:46] defined, we are throwing an error. And [43:48] then we're going to import the clerk [43:50] provider as well as the token cache. [43:53] I'll import it at the very top. And then [43:56] we are going to wrap the stack element. [43:58] Let's just say return. [44:02] Wait, let me clear this up. [44:05] So here we will paste the stack as it [44:08] was before and we will wrap it with the [44:10] clerk provider component and we're going [44:13] to pass the publishable key also the [44:16] token cache as well. But I think I need [44:20] to copy it and paste it at the top. For [44:22] some reason it has been deleted. [44:26] So let's say token cache and paste it [44:29] you know pass it as it is which is this [44:32] one and it should be cleric provider. [44:36] Okay. So once again we got the if check [44:38] if it is not defined we will throw an [44:40] error but else we are going to wrap our [44:42] application with the cleric provider. [44:45] Now I'm using stack here in the [44:47] documentation that they use slot which [44:49] is not very different. Um basically what [44:53] we have here is also going to work and [44:56] I'll explain what the stack component [44:59] is. Let me just add a to-do for myself. [45:01] I'll say explain stack a bit later in [45:05] the video. Okay. So now the next step is [45:07] to create the authentication screen. So [45:10] we're going to create a folder called [45:12] oath under the app and we're going to [45:15] wrap it with the brackets just like [45:17] that. And we will also create another [45:20] folder for the home screen. [45:24] Now make sure to add the brackets. This [45:27] makes it a route group so that you can [45:30] add you know related files to [45:31] authentication. You can group them under [45:34] a specific folder. And under this we're [45:36] going to create a biod file. Just follow [45:39] along with me for now. I promise [45:41] everything will say everything will make [45:43] sense in a couple of minutes. We will [45:45] have signin.tsx file and then we will [45:49] have sign up.tsx file. Okay. Now let's [45:53] first get the layout file for the [45:55] authentication screen. I'm going to copy [45:58] this paste this in. Let me walk you [46:01] through it. So we are getting the use [46:02] oath hook from clerk. We're just going [46:05] to check if user is signed in or not. [46:08] It'll also check if clerk is loaded or [46:10] not. Right? So we will say if clerk is [46:12] not loaded, don't return anything. Just [46:15] wait until clerk is loaded. And then we [46:18] will say if user is signed in, take them [46:20] to the home screen. Right? Because if [46:23] they are signed in, they should not be [46:24] able to visit the authentication screen. [46:27] We're going to take them to the home [46:29] screen. But if they are not [46:30] authenticated, then we can show them the [46:33] stack component. So this basically says [46:35] show the you know authentication screen [46:38] and let's scroll to the bottom. I will [46:41] copy the signup screen. Paste this in. [46:45] Now here you can tell we have a ton of [46:48] different styles. You can ignore this. [46:50] This is just CSS. This has nothing to do [46:52] with React Native. And let's just go to [46:56] the top. I will explain the logic for [46:59] now. Let's ignore everything. Just paste [47:02] this as it is. We have a warning. I [47:04] think this would be fixed. Let's go [47:06] under the sign in and copy this content [47:09] as well [47:11] and paste that in right here. Again, it [47:15] is mostly styles and some logic that we [47:18] are going to see in a couple of minutes. [47:21] Now, let's go under the home layout. [47:23] Copy this as well. Again, this is for [47:26] redirection. It basically says if user [47:28] is not signed in take them to the [47:31] sign-in page because if they're not [47:33] signed in they cannot visit the home [47:35] screen right so we will go under the [47:37] home [47:39] create a layout file [47:43] paste this in [47:45] then we will create I believe index.tsx [47:48] KSX file [47:50] and just copy the content. Paste that [47:52] in. Now, this will make sense, I [47:55] promise. For now, just save everything [47:58] and run our application with MPX Expo. [48:06] And then we're going to press I as well [48:08] as reloading the application. Now, once [48:11] you start the app, you're going to see [48:13] all the errors are gone. [48:16] And let's see what we have now. I think [48:18] we need to delete this index.tsx [48:21] that is right here. So under the app we [48:24] have index.tsx which was the test file. [48:27] So we can delete that. And then we can [48:29] see the sign in screen right and you can [48:32] say sign up. You'll be right here. And [48:35] then let's try to sign up with you know [48:37] one of the accounts that I have just to [48:39] test this out. I'll uh press command [48:42] shift K to get the keyboard to get the [48:45] add symbol. Then you can say gmail.com [48:50] and let me add a password like test 1 2 [48:53] 3. We have a button. I don't know if it [48:56] is visible but here it says sign up. It [48:58] is white. It is not really visible. [49:01] Okay. It says password must be eight [49:03] characters. So let me just say 456 [49:07] sign in once again. So since the [49:10] password is super simple like test 1 2 3 [49:13] 4 5 it says you need to change it right. [49:16] So that's the beauty of clerk it thinks [49:19] about every kind of edge case. So here [49:22] let me just put an actual password maybe [49:26] I'll say sign up. Now we got a [49:29] verification code. I'll go ahead and [49:31] grab it from my inbox. So as you can [49:34] tell we got this zero minutes ago. I'm [49:36] going to copy it and then I'll paste it [49:38] right here and I'll say verify. So there [49:41] is a button again. I think it is not [49:43] visible from the video but I can see it. [49:45] I'll say verify. [49:48] As you can tell we are redirected to the [49:50] home screen which is this one here. It [49:52] says [49:54] you know hello the username or the email [49:58] right and then it says sign out. If you [50:00] clicked it it's going to call the sign [50:02] out method coming from clerk. And we can [50:05] get the user with this hook. Okay. So [50:07] once again we have use user to get the [50:10] user information. We have sign out [50:12] method coming from use clerk. When you [50:15] click to it it's going to sign you out. [50:18] But here notice how we have a different [50:20] component called show. Right? So you can [50:24] say show this content when user is [50:27] signed out and show this content when [50:30] user is signed in. At the moment we are [50:32] signed in. So we can see this part. So [50:35] this component is coming from clerk as [50:37] well. Now there is another component [50:39] that we can use. Let me just save this. [50:42] We will say sign out. [50:45] This is working. Now before we use that [50:47] component, let me pretty quickly explain [50:49] the sign up and sign in screens how they [50:52] work. Let's start with sign up. So first [50:56] off, let's scroll to the top. We are [50:58] getting this hook where we can get the [51:00] status errors and the sign up method. [51:03] Then we have this check if user is [51:05] signed in or not. We have the router so [51:08] that we can navigate the user. Then we [51:10] have let's see you know we have the [51:13] email state. We have the password and [51:16] then the verification code. Now when you [51:18] submit this what happens is that you [51:21] send the email address as well as the [51:23] password to this method and if there is [51:25] an error it's going to fail. But else we [51:28] are going to call the verification step. [51:30] So it's going to send an email to your [51:32] inbox. Once you put the verification [51:35] code and submit that we are going to [51:37] call this method by passing the code and [51:40] it'll say if it is done successfully [51:43] just navigate the user to the home [51:45] screen. So that's the logic. You can [51:47] take a look at it in detail if you're [51:49] interested. [51:51] But that's the general gist of it. And [51:53] here we have an if check which is going [51:55] to display the verification UI right. So [51:59] like once you put your information you [52:01] would get the verification UI which is [52:03] thanks to this if statement. And finally [52:07] you have the form which is what you see [52:09] here. So please feel free to pause the [52:11] video take a look at it. Basically we [52:14] have some components like view text [52:17] input. We have things like placeholder, [52:20] placeholder text color, keyboard type, [52:24] so on and so forth. These are the things [52:26] that you can understand by yourself just [52:28] by pausing the video. Yeah, like that's [52:32] it. Now what we would like to do maybe [52:35] just go and close these files. Also the [52:38] same thing for sign in. It is very very [52:40] simple like very similar. You can pause [52:43] the video and try to read it. So, it's [52:45] not really that complicated to be [52:47] honest. So, I'm going to close these [52:50] files. And now, let's say you don't [52:52] really want to build your own UI, right? [52:55] Let's say you would like to use a custom [52:58] UI coming from Clerk. Is something like [53:01] this existed, right? Is it possible? [53:03] Yes, it is. And I'll show you how to set [53:06] that up. So, first off, we need to visit [53:08] the clerk documentation. Just type Expo [53:11] Clerk quick start and then scroll to the [53:15] very bottom. They just released a new [53:17] feature where they have some pre-built [53:20] native components. So it is under the [53:23] beta but it is working. So there are a [53:26] couple of different requirements. SDK 53 [53:29] or later. So we are using 55 which is [53:32] completely fine. And then they say you [53:34] need to use a development build because [53:37] like I'll explain what that is but [53:40] basically at the moment we are running [53:42] our application under the Xpogo [53:45] application right once again our mobile [53:48] app is running under the Xpogo. Now this [53:51] is fine but this is mostly for very [53:53] basic applications. Whenever you want to [53:56] build something serious, you need to get [53:58] a development build. And it is basically [54:02] your own custom app as if it is [54:05] installed on your device like one of [54:07] these examples that I have in the past. [54:09] And here is how you can do it. Just kill [54:12] your terminal. Clear this up and say mpx [54:16] run, sorry, MPX expo run iOS. And if [54:20] you're on Windows or if you want to do [54:23] it for Android, just say Android here. [54:26] Since I'm using iOS, I'll say iOS. And [54:30] for the first time, this will take a [54:32] couple of minutes, like maybe one or 2 [54:35] minutes. As you can tell, we got the iOS [54:38] folder. It'll basically build our app, [54:42] and then it's going to get the [54:43] development build, install it right [54:45] here. Then we can run our application. [54:48] So it is going to work in the exact same [54:50] way but you know on top of it we can [54:53] have some native modules. [54:56] Okay. So if it sounds confusing overall [54:58] just understand that expo go application [55:01] is for simple apps. Okay. So it is for [55:04] learning purposes for students but [55:07] whenever you want to have some serious [55:10] features like this one that we will have [55:12] at the moment you need to get a [55:14] development build. So go ahead and run [55:17] this and then wait for it to be [55:18] completed. And actually while this is [55:20] installing we can take a look at the [55:23] other requirement. It says you need to [55:25] visit app.json and get this under the [55:28] plugins. So copy this string. Okay. So [55:31] under the expo under the plugins [55:34] let's find the app.json file [55:37] under the plugins maybe just right above [55:41] the expo router. paste this in which is [55:44] clerk expo and then add a comma. So [55:48] we're going to save that. Now we can [55:50] scroll to the bottom. They have three [55:52] different components. So we can just use [55:54] the oath view component under the [55:57] sign-in screen. So I'm going to copy [56:00] everything we have right here. Then I [56:03] will go into the signin screen [56:06] which is this one. So remember what we [56:10] had. That's the current signin UI we [56:13] have right it is like 200 lines of code [56:16] even 250 but instead of having all this [56:20] we can just have 15 lines of code where [56:23] we have the oath view element which is [56:26] going to allow the users to sign in or [56:28] sign up. This is coming from clerk. [56:31] Notice how they have three different [56:33] modes. Sign in, sign up or both of them. [56:37] Okay. So, we're going to save that and [56:39] let's wait for this to be completed. [56:41] Then we can see the end result. [56:44] Hopefully, it should be working out [56:46] nicely. If not, we're going to fix the [56:48] errors. So, as you can tell, it is done. [56:51] It is trying to install it. Then, it [56:53] says, let's open this application, [56:55] right? [56:58] So, I'll just say open. It's going to [57:00] bundle it. And hopefully, we should see [57:02] that it is working. Looks like we got an [57:05] error. Let's see what's the problem. [57:08] O view [57:12] is this option true? Yes, it's correct. [57:15] Let's just see what is going on. View [57:18] config not found for component. I think [57:21] this is [57:23] like it should be working out. I'm going [57:25] to reload this. Press I once again. [57:32] Okay. So, for some reason it is failing. [57:34] Let's see what's the problem. So, I [57:36] found the solution. Basically, I just [57:38] paused the video, deleted the iOS [57:40] folder, and then I run this command once [57:42] again, which is called MPX export run [57:46] iOS. Let me try to display it if I can [57:49] find it. So, I cannot find it. But [57:51] basically, I deleted the iOS folder and [57:54] then I run this once again. [57:58] Okay. So, once you have done this, [58:00] hopefully it should be working out. As [58:02] you can tell, this is the 03 UI that you [58:05] get from clerk out of the box. So these [58:08] are the providers that we included when [58:10] we set up this application. We also set [58:13] up the email authentication, right? So [58:16] here you can both sign in and sign up. [58:19] Now I'll just try to select my Google [58:21] account [58:24] and I'll try to sign in with it. [58:33] And once we are authenticated, we are in [58:36] the home screen. So everything is [58:37] working as expected. Now we can go under [58:40] the home screen and use a different [58:42] component. So within the show when user [58:45] is signed in I think it is called user [58:47] button like this one. [58:51] I'm going to copy this and paste it. [58:54] Let's see what we're going to get. Right [58:56] after the pressible, I will get the user [58:58] button from clerk expo native [59:03] and then I'll save. [59:05] So we have the user button. If you [59:06] clicked it here, you can see we can [59:09] update the profile. You know, we can [59:11] select a different image from the photo [59:13] library. Let's go with the default one. [59:16] You can update the first name, last [59:18] name, you can save it, and you can also [59:20] cancel it. We have the security tab. We [59:22] can sign out. So that's the beauty of [59:25] clerk. You just get this component [59:27] without writing any code. And other than [59:30] the user button, there is one more [59:32] component called user profile view. [59:36] I'm going to copy it. Let's see where [59:38] that is. [59:44] Wait, this is for web. We would like to [59:46] have it for, you know, for React Native. [59:49] So we have O user button [59:53] where is user profile. [59:56] So let me go find it under the overview. [59:59] Okay. So I'm going to copy this part. [60:02] Let's just paste it and see what we will [60:04] get right after this view. Import the [60:08] user profile. It is basically what you [60:11] have right here. But it is built in to [60:13] the UI, right? It doesn't open like [60:16] within a model. It is just right here. [60:18] you know, if you're interested, you can [60:20] use it in that way. And we can also sign [60:22] out from here if we really wanted to. [60:26] Okay, so that's the default component. [60:28] And let's just try to get rid of the [60:30] header under the oath. So here you can [60:33] say screen options [60:36] header shown to be equal to false. [60:40] So that's the default UI. If you wanted [60:42] to, you can keep this. But in this [60:44] application, I will actually customize [60:46] it completely. So, we're going to have [60:49] this UI, right? I think this looks a lot [60:51] more cleaner. We have our own branding. [60:54] We have an like a hero image. And we [60:58] also have three different sign-in [61:00] options. In this project, I will like [61:03] I'm not going to be using the email [61:05] option, but if you wanted to, you can [61:07] include it somewhere in this UI. Okay. [61:10] So, this is what we'll have. For that [61:12] reason, I'm going to get rid of this one [61:14] for now. Let's leave this section right [61:16] here. [61:17] And in the next section, we're going to [61:19] make the authentication UI look like [61:21] this. And we will make every single one [61:23] of these button actually work. And by [61:27] the way, this is working out of the box. [61:29] Like if you click to Apple sign in, it [61:32] should work out as well. Here it took us [61:34] to the settings to give the you know [61:37] access and sign into our Apple account. [61:40] But if you were in your physical device [61:42] and if you were signed in, it would just [61:45] work out of the box. Right? Then we have [61:47] the GitHub login. Let's see. You can put [61:51] your information and it's going to log [61:53] in and create the account. You can also [61:55] check out the dashboard like right here [61:58] under the users here. I can tell we have [62:01] this user who just signed up and the [62:04] profile image also has been updated. So [62:06] if you're just getting started with [62:08] Expo, the clerk authentication I think [62:11] is the best option. This is what I would [62:13] use as a complete beginner. And [62:15] honestly, as a professional React Native [62:17] developer, I'm still using it. It's very [62:20] generous. Pro plan is also not that [62:22] expensive, like $20 a month. And in the [62:25] free plan, you have up until 50,000 [62:29] monthly active users. That's crazy. Like [62:32] until you hit this amount of users, it's [62:35] completely free. And like hitting this [62:38] amount of users is very, very hard. [62:40] Trust me. So in free plan you can [62:42] basically build a complete app with [62:45] 50,000 users while paying nothing. So [62:48] yeah that was the first setup for the [62:50] authentication. Now we can delete the [62:52] signup screen because we don't really [62:55] need it since we can both sign in and [62:57] sign up from this component. Right? We [63:01] can go right here. Basically we can you [63:04] know delete this entire part. We don't [63:06] really need these links. [63:09] Okay. For now, we can leave everything [63:11] as it is. And in the next section, we [63:13] are going to, you know, as I said, we're [63:15] going to build this custom UI. And we [63:18] will create a custom hook as well right [63:20] here. But for now, let's close [63:22] everything and commit our changes. Once [63:24] again, let me try to give a quick recap [63:26] like 1 minute under the root layout. [63:29] What we have done is wrapping our entire [63:32] application with the cleric provider. We [63:34] got the publishable key from the MV [63:37] file. pass it right here as well as the [63:39] token cache and I will explain this as [63:42] well. For now, just ignore that. So that [63:44] was the root layout setup. Then we [63:47] created two different folders for the [63:49] authentication screen and for the home [63:51] screen. Under the layout file, we check [63:54] if clerk is loaded. We handle the [63:56] navigation, right? And under the sign-in [63:59] screen, we have this component which is [64:02] the default template you get from clerk. [64:04] And then under the home screen again we [64:07] have the I mean under the layout we have [64:10] the navigation and under the index.tsx [64:13] we have the home content which is very [64:15] simple but it allows you to sign out by [64:18] using this method. Okay. Now let's [64:21] finally try to explain the uh stack [64:24] component and then we're going to end [64:25] the section. Now let me try to give you [64:28] an example here. Here I'll visit Safari [64:32] and let's say I will open up a new tab. [64:36] Let's visit somewhere like Instagram [64:41] if I can type it. [64:43] Instagram.com [64:46] and after this one I'll visit somewhere [64:48] like google.com [64:51] and finally I'll say facebook.com. [64:58] Okay. So notice how if I want to go back [65:02] the previous screen comes from the left, [65:05] right? It is like at the bottom and the [65:08] next screen is coming from the right. So [65:10] it is like a stack of plates, right? [65:14] Like it is literally in this way you [65:16] have a plate and on top of it you have [65:18] another plate top of it. On top of it [65:21] you have another plate, right? So just [65:23] notice how this one is above the [65:25] previous one, right? like this is [65:27] literally above the previous one. So [65:29] this is the stack navigator behavior. [65:32] Basically the new screens comes from the [65:34] right and previous screens comes from [65:37] the left. Now this behavior is within [65:40] the browser at the moment, right? But we [65:42] would like to implement it in our actual [65:44] application which is this one. So to be [65:47] able to implement this, we use the stack [65:49] element. I hope that makes sense. And [65:51] you can take a look at it in more [65:53] detail. just say stack expo and take a [65:56] look at the documentation. You can read [65:59] it but it's basically what I have [66:01] explained. It says a stack navigator is [66:04] the foundational way of navigating [66:06] between routes in an application. On [66:08] Android, a stacked route animates on top [66:11] of the current screen. On iOS, a stacked [66:14] route animates from the right. Just like [66:16] what I what I have explained, it comes [66:18] from the right hand side on iOS. But in [66:22] Android apparently it comes from the top [66:24] of the current screen. Okay. And you can [66:27] see like in more details you're using [66:30] the stack component. [66:32] You can add more options. So on and so [66:34] forth. Okay. So please feel free to take [66:37] a look at it in more detail. Since I [66:39] have explained it, I can delete this. [66:41] And let's try to stage all of our [66:43] changes. I'm going to say stage [66:45] everything. Generate a commit message. [66:50] Let's commit sync this up and then [66:53] hopefully I'll see you in the next [66:55] section. [66:57] All right, so this is where we left. Now [66:59] in this section, as I said, we would [67:01] like to build our own custom UI for the [67:03] authentication screen and you can find [67:05] the screenshots in the diagram. So [67:08] basically, I put the dark mode for the [67:10] iOS and Android. Then same thing for [67:13] light mode. Okay, so this is how that [67:15] would look like in light mode in iOS and [67:18] in light mode in Android. Now, this is [67:20] what we would like to build for the UI. [67:23] And as you can tell, we have a custom [67:25] green color, right? And to make [67:28] everything simpler, we will set this up [67:30] in in the Tailwind config file. So [67:33] before we get into UI, let's go ahead [67:35] and set that up. And notice how we have [67:38] dark mode and light mode. Now, this is [67:40] going to work out of the box. Whenever [67:43] we go and say something like let me go [67:45] under the settings. [67:47] So just scroll to the bottom we have [67:49] developer tools. So here we can toggle [67:52] the state. So notice how in in this [67:55] simulator itself dark mode works out of [67:58] the box. Now how do we make that work in [68:00] our application as well? So we'll go [68:03] ahead and set that up right here. Now [68:06] first off I'll visit Tailwind config.js [68:09] file. I want you to visit the source [68:11] code. Okay. So find this file under the [68:14] source code. You will find the colors [68:16] object. So go ahead, copy that and paste [68:19] that in. So basically we have couple of [68:21] different variables. So this is how we [68:24] use tailwind. If you don't know already, [68:26] let's say you would like to use the [68:27] background color. You would just go into [68:30] a component. Let's say can go maybe [68:33] right here under the class name. You [68:36] would just say background. And let's say [68:39] you would like to use the background [68:41] color, right? You would say background. [68:43] Or let's say you would like to update [68:45] the text color. You would say text. And [68:47] then let's say you would like to get I [68:49] don't know like muted foreground, right? [68:52] So you would say muted foreground. So [68:54] you got the point. This is the basics of [68:57] Tailwind. Now we have all these CSS [68:59] variables or let's say the Tailwind [69:02] colors and as you can tell they are [69:04] using some CSS variables, right? like [69:07] background, foreground, card foreground, [69:10] so on and so forth. And we would like to [69:12] set this up under the global.css file. I [69:15] want you to visit the source code, find [69:17] this file, and here are the variables. [69:21] Now, notice how we have the same values [69:25] twice because this is for the light [69:28] mode. Okay? So, these are the colors [69:29] that we're going to be using in the [69:31] light mode. Notice how the green is a [69:34] little bit different than this one, [69:36] right? because we update it in the dark [69:38] mode. So these are the colors for the [69:41] dark mode. Okay. And these are the [69:43] colors for the light mode. [69:45] So go ahead and save this file. One more [69:48] thing that we will do under the Tailwind [69:50] config here just above the theme. I'll [69:53] say dark mode. Now this has three [69:55] different values. We are going to be [69:56] using the media in this case. And I'll [69:59] just leave a comment right here. Let me [70:01] grab it from my from my notes. Like what [70:05] this does this basically tells to native [70:08] event that it should follow the device [70:11] color scheme. So if device is using [70:14] light theme, our application should be [70:16] using the light colors, right? And if [70:18] you are in the dark theme, it should use [70:21] the dark colors. Okay, I hope that makes [70:24] sense. Now we'll go finally under the [70:26] root layout. I'll just set up one more [70:28] thing and then we should be good to go [70:30] with the light mode and dark mode. Okay, [70:33] so we have the stack element, right? [70:35] This is the let's say our application. [70:37] Now we would like to wrap this with the [70:41] theme provider component coming from [70:44] react navigation/native. [70:46] And here we are going to pass a value. [70:49] So this will be let's just get the color [70:52] scheme and we need to get it from a [70:54] custom hook. So we'll import use color [70:57] scheme coming from React Native and [70:59] we'll say if this value is equal to dark [71:03] and it has like three different values. [71:05] We'll get the dark. If we are in the [71:07] dark mode, we would like to use the dark [71:10] theme. Else we would like to use the [71:12] default theme. Okay. So just go ahead [71:15] type this out and we should be good to [71:17] go. Now let's try to see if it is [71:20] already working. But we don't really [71:22] have any content, right? Let's just go [71:24] under the [71:26] like our application. I'll just try to [71:28] run this. Let's reload it. [71:34] Now we are in the dark mode. Let's try [71:35] to use the light mode. [71:39] As you can tell, it's already been [71:41] updated. Now maybe even if we didn't set [71:44] this up, this component would work [71:46] because it is coming from clerk. But in [71:49] the incoming sections, you're going to [71:51] see that our colors will also work. [71:54] Okay. So, we are in the authentication [71:55] screen. Now, we would like to change [71:58] this as I said. So, under the sign-in [72:00] screen, we don't really want to have [72:02] this component. Instead, we'll we will [72:04] build our own UI. First off, let's [72:07] delete the use effect. We don't really [72:09] need it because we already handle the [72:12] redirection under the layout file. So, [72:14] I'm going to delete this part for now. [72:17] Basically, we are going to create a [72:18] custom hook something like use social [72:22] oath. Okay, so this is a hook that we [72:25] will create and this will get us two [72:27] different values. The first one is a [72:29] method like handle social oath let's say [72:33] and we're going to call this method by [72:35] passing like um a value that is either [72:40] Apple, GitHub or Google. And then we're [72:42] going to have a loading state. Let's say [72:45] loading strategy. So I just paste this [72:48] in called loading strategy. You're going [72:50] to see why. Basically, we're going to [72:52] call every single one of these options [72:55] as a strategy. Okay. Now, let's try to [72:57] build the component. I promise it's [72:59] going to make sense. First, let's build [73:01] the custom hook under the hooks. So, [73:05] I'll say TS file and then we can jump [73:07] into it and build the logic. So, first [73:10] off, I'll import couple of different [73:12] things. So from clerk expo we're going [73:15] to get use SSO which is single sign on. [73:18] Then we have use state as well as the [73:20] alert from react native. So we're going [73:22] to create the use social oath method. [73:30] Now here we will have a uh state for the [73:33] loading strategy. Okay. Initially that's [73:35] going to be equal to null but it can get [73:37] a string value as well. So if you click [73:40] to this button the value of it will be [73:43] Google. If you click to this one it'll [73:45] be GitHub and this one it'll be Apple. [73:47] So that we know like if you click to [73:49] this one this will have a loading [73:51] spinner. Right? If you click to this [73:53] button this will have the loading [73:55] spinner. So we would like to know which [73:57] button is clicked so that we can show a [73:59] loading spinner until the authentication [74:02] popup displayed. Right? Then from the [74:05] use single sign on hook we are going to [74:07] get start SSO flow. This is a method. [74:11] This is coming from clerk documentation. [74:13] You don't need to memorize it. Just try [74:15] to understand what we are doing here. [74:17] Okay. So we're going to create this [74:18] method called handle social oath [74:23] which will be an async method and this [74:25] will get an argument which will be [74:28] called as strategy. Now let's make the [74:31] typescript happy. Let's say this can get [74:33] only three different values. So we'll [74:35] say oath Google and it has to be typed [74:39] in this way then like we'll say or it [74:43] can be oath [74:45] github or it could be oath [74:50] apple. Okay. So these are the options [74:53] that strategy can take and then we'll [74:56] say set loading strategy to be equal to [75:00] whatever they pass [75:02] and then we'll have a try and catch [75:05] block. Now within the try I'll say const [75:08] and we're going to get two different [75:10] values by calling this method. [75:14] So I will say await start single sign on [75:17] flow pass the strategy which is one of [75:20] these. Okay. And then this is going to [75:22] give us two different values. So first [75:24] off, I'll just add an if check. I'll say [75:26] if we don't have the created session ID [75:29] or if we don't have the set active [75:32] method, that means something failed, [75:34] right? So we can just return out of this [75:37] method and just before we return, we can [75:40] display an alert. And this is how we can [75:43] use it. You would say alert. [75:45] Then first you would pass the title and [75:47] then the message, right? You can type [75:49] anything but here I'll say sign in [75:52] incomplete. Sign in did not complete. [75:54] Please try again. And you will see how [75:56] that would look like in a second. But if [75:58] this is not the case that means [76:00] everything is done successfully. So we [76:02] can just call the set active method by [76:05] passing the session which is created [76:07] session ID. Okay. So believe it or not [76:10] that's the entire thing. Let's handle [76:12] the catch. We're going to get the error. [76:14] I'll just put a console log for [76:15] debugging purposes. And then I'll show [76:17] another alert. That's the title and [76:20] that's the message. Now finally, either [76:23] we succeed or we fail. Eventually, I'd [76:27] like to run this block so that I can say [76:30] the loading state will be equal to null. [76:33] And at the end we'll just say return [76:36] handle social oath as well as the [76:39] loading strategy [76:42] because these are the values that we are [76:44] destructuring right let's try to import [76:47] this hook I think we need to say export [76:50] default [76:53] use social oath not this one let me do [76:57] Ctrl C [76:59] okay if you save now this should be [77:01] visible we can import [77:03] And here I'll just add one more thing. [77:05] This is an optimization. We will say if [77:07] we are already in the loading state, we [77:10] don't want to do anything, right? We'll [77:12] just say if return [77:15] because just imagine if user let me go [77:18] back. So let's say you click to this [77:20] one. While this is loading, if you click [77:22] this one, what's going to happen? This [77:24] will also get the loading state, right? [77:27] But we don't really want this to happen. [77:28] We'll say if we are already in the [77:30] loading state just don't do anything [77:32] right don't call this method once again. [77:35] So we'll just say return this return out [77:38] of it immediately and it'll just say [77:40] quart against concurrent flows. [77:45] Okay. So that's the entire hook. Now [77:47] once we use it I think it'll be even [77:49] more clearer. Right? For now just save [77:51] and let's go into the sign on screen and [77:54] get started with it. Now I will provide [77:57] this image. You can find it from the [77:59] source code. I'll actually go ahead copy [78:01] it and paste it. So you can find it [78:03] under the assets under the images. There [78:06] will be a file called oath.png. [78:09] So find it from the source code and [78:12] paste this in [78:14] and we'll be using it now. Now first [78:16] things first, we'd like to get rid of [78:18] the o view element because we're going [78:20] to build our own custom UI, right? So [78:23] first off, I'll just have a view element [78:26] which is coming from React Native. And [78:28] within this, let's just have a text [78:30] maybe I'll say [78:32] first, let's try to import it from React [78:34] Native. And here I'll say something like [78:37] hey everyone. And for the view class I'm [78:41] going to say flex of one. So it is [78:43] taking the entire space and we'll say [78:45] justify centered as well as item [78:48] centered so that the content is in the [78:50] middle of the screen. Now in the past we [78:53] had this problem where the text was in [78:55] the status bar right it was right here [78:58] if you remember it was not really [79:00] visible to be able to fix that issue [79:02] like at the moment we cannot see it but [79:04] let's just try to delete this part like [79:07] as you can tell it is right here right [79:10] how do you fix it it's very simple there [79:12] is a couple of different ways one of the [79:15] ways is to use this element called save [79:17] area view so go ahead import it and [79:21] Notice how it's immediately fixed. The [79:24] content is within the safe area, right? [79:27] It is not really overlapping with the [79:29] status bar. So that's the first thing. [79:32] Now I will say use the background [79:34] primary [79:38] for some reason like did it work? [79:40] Background primary maybe let's just say [79:44] EG red of 500. Okay, so this is working [79:47] but for some reason primary did not [79:49] work. Maybe we need to rebuild our [79:52] application. So I'm going to open up my [79:54] terminal. I'm going to kill this. And [79:57] here I'd like to install a package [79:59] because every single time we have to run [80:03] MPX [80:04] expo run iOS to start our application [80:08] which is not very convenient. So there [80:10] is a package that we can install. Just [80:13] say MPX expo install expo dev client. So [80:18] by doing this, you only need to rebuild [80:21] your application whenever you install [80:23] some native packages, native modules. [80:27] Now, we just installed this one. I'm [80:29] going to say clear. [80:32] I will delete the iOS folder and I'm [80:34] just going to rebuild my application. So [80:36] I'll say mpx expo run iOS. And once this [80:41] is done, hopefully the colors should be [80:44] working out. I'm going to kill the [80:46] application. [80:47] Let's wait for this to be completed. And [80:49] I'll just be right back. Okay. So, as [80:51] you can tell, it has just done. It's [80:53] completed. Now, it's going to rerun our [80:55] application. [80:58] And here we go. The background primary [81:00] is working now. Let's just check if we [81:03] are in the light mode or in the dark [81:04] mode. I'm going to go into the dark [81:06] mode. Notice how it's going to update [81:08] like it's a bit more light. And if you [81:11] wanted to, you can say in the dark mode, [81:13] don't use primary, but use the secondary [81:16] color. Now, with this, once you save, [81:18] you're going to see that background [81:20] would update. Let's say in your case, it [81:22] doesn't. Maybe, you know, you might get [81:24] a bug where it looks like black. You can [81:27] just go ahead delete the text. So, it [81:29] would be probably because you don't have [81:31] a content. So, just have a view. Give [81:34] the class name. Let's import this by the [81:37] way. [81:38] So, we'll say class name. Just give the [81:40] flex of one. Then you should be able to [81:42] see this background. Okay. Once again, [81:45] by default, we are going to be using the [81:48] background primary here. But let's say [81:50] in the dark mode, this is too light. And [81:52] this is what I think. In the dark mode, [81:54] this is like a bit too light. So I'll [81:56] say in the dark mode, go ahead and use [81:58] the secondary color. Okay. Now, let's [82:01] build the rest of the UI. As you can [82:03] tell, we have two different kind of like [82:05] circles. And we are going to position [82:07] them absolutely to the top left and kind [82:11] of like top right. [82:13] So this has nothing to do with React [82:15] Native. It is just some decorative [82:18] elements with CSS. I'll add a comment. [82:21] I'll say decorative elements. And I'm [82:24] going to copy it, paste it from source [82:26] code. It is literally two lines of code. [82:29] Notice how we are using the position [82:31] absolute. We position that give width [82:33] and height. Make it circle. update the [82:36] background color and in the dark mode [82:38] you know we use a different color and [82:41] that's it. So I'm going to put them side [82:43] by side. Once you save you're going to [82:45] see these circles. So right after this [82:48] we're going to have a wheel element and [82:51] this will get the class name. Let's say [82:53] petting x of six and petting top of [82:56] four. Within this I'm going to have a [82:58] text that will say corrosify which is [83:01] our let's say the brand name. Let's [83:04] import the text from React Native. Here [83:07] we go. That's what we have at the [83:08] moment. Right below it, I'm going to [83:11] have another text. This will be plan [83:14] smarter shop like shop happier, but the [83:18] color should be white for some reason. [83:21] Here we have black. Let's see what we [83:24] are missing. So, we're going to update [83:26] the color for now. Let's keep going. [83:28] Right after this text, but still within [83:30] this view, we're going to have another [83:32] view. So this is going to hold the image [83:35] but we're going to add this kind of like [83:37] background that you can see here the [83:39] rectangular. So this is that view. We'll [83:42] just say class name should be equal to [83:45] margin top of six. We'll say rounded and [83:48] you can give custom colors like 30 [83:50] pixels by doing this. Then you can say [83:53] we'll add a border. Border color will be [83:56] white but we're going to update the [83:58] opacity. We'll say 20%. Then we'll say [84:01] background should be white and again 10% [84:05] this time we'll say petting x of three [84:08] or actually petting from all directions [84:10] will be equal to three. Then we're going [84:12] to import the image component if I can [84:16] type it correctly from expo image. Then [84:19] we're going to add the source where we [84:21] need to get the o.png. So I'm going to [84:24] pass the relative path. We're going to [84:26] give the width and height. I'll go with [84:28] 100% to 300 pixels. Then content fit [84:32] will be equal to contain. Once you save, [84:35] you're going to see that image is right [84:37] here. If you wanted to, you can update [84:39] the values. So we'll go below to both of [84:42] these views. Just above the save area [84:45] view, we'll have another one. I'll say [84:48] class name margin top of eight. Let's [84:51] say flex of one. So it is taking the [84:53] entire remaining space. Then I'll add [84:56] the rounded top of 30 um 36 pixels. Now [85:03] as you can tell only the top corner is [85:06] rounded right not the bottom. [85:10] So that's what we are saying basically. [85:13] Then we'll just say background color [85:15] should be the card padding x of six y of [85:20] eight. [85:22] Sorry, maybe like bottom of eight and [85:26] padding top of six. [85:30] And within this, we will have a view as [85:32] well as a text element. As you can tell, [85:34] it says welcome back. Like, we just [85:37] built this part. And like I literally [85:40] don't know why here it's black, but in [85:43] the demo it is white. Because this is [85:46] the same code that I have in my notes. [85:48] It's working in the white color. [85:50] Probably we are missing something. Um, [85:52] we're going to fix that for now. Let's [85:54] just ignore the colors. But notice how [85:56] we have the text. Then right below to [86:00] this view, I'll have another text. I'm [86:02] going to copy and paste to right here. [86:06] Okay. Then what else? So it was this [86:09] text. Now we're going to add our buttons [86:11] one by one. Right. So the first one is [86:14] the continue with Google. Below to this [86:17] text have a view element. We're going to [86:20] say class name margin top of six and [86:23] within this we'll have a pressable [86:25] element. [86:27] Now this will get some class classes as [86:29] you can imagine. First off I will create [86:31] a variable actually a couple of [86:33] variables. So I'll say if the loading [86:36] strategy is equal to oath [86:41] Google [86:43] that means the Google button is just [86:46] clicked right we'll say is Google [86:48] clicked [86:50] if this is the case that means Google [86:52] button clicked then we will have the [86:55] same thing for apple clicked [87:00] I'm going to duplicate it finally we [87:02] will have it for GitHub [87:04] And we need to update this part. Let's [87:06] say that's going to be both Apple and [87:10] GitHub. Now if any of them is equal to [87:13] true, let's say const is loading. [87:17] We'll say if Google is clicked, you [87:20] know, or Apple basically we're going to [87:22] put all of them side by side. [87:26] If any of these equal to true, that [87:29] means we are in the loading state. So [87:31] we'll go right here within the pressable [87:33] because the class name is going to be [87:35] like dynamic. I'm going to say class [87:38] name curly braces back text and actually [87:42] I'd like to copy and paste rather than [87:44] typing this out. [87:48] Okay. So I'll just paste this in and [87:49] walk you through it. So these are the [87:51] classes that we will implement for every [87:54] single button. But we will say if it is [87:56] in the loading state add the opacity of [87:59] 70%. But if it is not in the loading [88:02] state just don't do anything right. And [88:04] here we will say this pressible should [88:07] be disabled if we are in the loading [88:09] state. [88:12] And finally we'll say on press [88:15] since this is the Google button right on [88:18] press we are going to call the handle [88:22] social oath by passing the Google as the [88:25] strategy right and for the text we can [88:28] say actually we'll have some content [88:31] like the icon right and the text and [88:36] then another icon. So for the Google [88:39] image I think I'm going to provide it to [88:41] you. You can find it under the source [88:43] code. Just go under the assets images [88:46] you will find google.png [88:49] and just copy it then paste it right [88:51] here. [88:54] And within the pressible we are going to [88:56] be using it now. So again this is just [88:58] CSS. So for that reason I'd like to copy [89:01] and paste. So we just have a view with [89:03] the white background. Then we have the [89:06] image. We are just importing it, giving [89:09] width and height and that's it. Now [89:11] right below to this view we're going to [89:14] have a text element. [89:17] Let me put this in. Now here by default [89:21] it says continue with Google but if we [89:23] are in the loading state let's just say [89:25] true. It's going to say connecting [89:28] Google and three dots. Right? So you got [89:31] the point. And finally, we're going to [89:34] have an icon on the right hand side. I'd [89:36] like to copy it and paste it right here. [89:39] So, we're going to use font awesome. [89:42] This is how we can use icons from expo. [89:44] Let's try to import it. So, I'm going to [89:47] go right here. We'll say import [89:50] something from at Expo. [89:54] I think it should be expo/ [89:57] vector icons. Now we can get bunch of [90:00] different font families or the icon [90:03] families like we have ion icons, font [90:06] awesome and actually in this page we're [90:09] going to be using font awesome and font [90:11] awesome version 6. Go ahead and import [90:14] them. [90:16] Then here you need to pass the name. So [90:19] let's delete this part. If you press [90:21] control space, you're going to see they [90:23] have millions of different icons. And [90:25] this is what we would like to use. Size [90:27] and color. put it. It should be visible [90:30] right here. So that's the very first [90:33] pressable. The rest will be almost the [90:35] same. We will just update this part [90:38] right. We will update the icon, the text [90:41] and that's it. So I'm going to copy the [90:44] next pressable just put it right below [90:46] to this and I will walk you through it. [90:50] So here it says is GitHub clicked [90:53] mismatch. Let me just update this part. [90:55] It should be is GitHub [90:58] I'll just uppercase DH. [91:02] Okay, so this is what I just copied and [91:04] pasted. Let me walk you through it. We [91:06] have the same classes. If it is in the [91:08] loading state, let me just make it true. [91:11] So you can see it pass the updates [91:13] elbow. Then when you press to this [91:16] button, what happens is that we are [91:18] calling this method by passing the [91:19] GitHub as the option. Instead of using [91:22] an image, we use the icon coming from [91:24] font awesome. Then we have the text. You [91:27] know, it's the same thing. And we'll [91:29] just do it one more time for the apple. [91:32] If you wanted to, you can pause the [91:34] video and just do do it by yourself. But [91:38] in this case, I'm going to copy and [91:40] paste. Okay. So, as you can tell, it is [91:43] right here. Finally, we're going to put [91:45] a text at the very end. So, above, [91:49] sorry, below to this pressable and view. [91:52] Paste this text. It is like it is this [91:56] what we see here. So here I just pause [91:58] the video and try to fix the colors make [92:01] it accessible. Notice how everything is [92:03] white already. And the solution for this [92:05] is that here I am missing one zero under [92:08] the primary foreground under the dark [92:10] theme. So if you copy and paste it from [92:12] the source code probably you already [92:14] have the correct colors. But in my case [92:17] I just had to fix this part. Now with [92:20] this everything is working fine. But why [92:22] does this part is not matching with this [92:25] background? Right? So that's because of [92:27] the safe area view element. Now safe [92:31] area view is not only this part, right? [92:33] It's also the bottom. But we can just [92:36] eliminate this part by saying this edges [92:39] should only apply to the top, right? [92:42] Only this part should be within the safe [92:44] area view, not this part. And now that [92:47] fix it. And we can see the exact same [92:50] output just like in the demo [92:52] application. Now let's try to give it a [92:55] go. I'll press this one. Okay, looks [92:58] like it failed. Why this is the case? [93:00] Let's take a look at the terminal. [93:04] So looks like we need to install this [93:06] package expo o session right [93:10] and actually it says install them by [93:13] pasting this. I'm going to copy it. Kill [93:16] this terminal. [93:18] I'm going to clear this in and paste [93:20] this in [93:28] and let's try to rerun our application. [93:30] I'll say mpx expo. Since we are using [93:33] the expo dev client, it is already using [93:36] the development build. I'm going to say [93:38] rerun this. [93:43] As you can tell, as soon as you click, [93:45] it says connecting. But looks like we're [93:48] missing another module called Expo [93:50] Crypto. [93:54] Let me double check. [93:59] Yeah. So, I'm just going to install that [94:01] one as well. I'll say MPX [94:04] expo install. [94:07] Is it like expo- crypto? [94:14] Okay, so it's been installed. I'm going [94:16] to rerun my application. [94:19] So this is real world development. Like [94:22] you would get some unexpected errors and [94:24] you just need to read it and then fix [94:26] it. Like I'm not going to cut this part [94:28] from the video so that you can see how [94:31] we fix these issues. I'm going to rerun [94:34] the app by pressing I. Let's just say [94:37] okay. Press this one. Hopefully, it [94:40] should work. Fingers crossed. But what [94:44] the hell? It says cannot find. Maybe we [94:47] need to rebuild our application, right? [94:50] I'm going to stop my terminal. [94:53] Now, why do I think in this way? Because [94:56] I can see it says there is no native [94:58] module. That means probably it is [95:01] something related to the development [95:03] build. And to double check, I'm going to [95:06] delete the iOS folder [95:09] and then I'll say mpx expo run iOS. So [95:14] this is what I would do whenever I get [95:15] some native module issues. I would [95:18] probably delete the iOS folder and then [95:20] run this script or the command so I can [95:24] rerun my application or rebuild it. Once [95:28] this is done, we'll test out if [95:30] everything is working successfully or [95:32] not. All right. So, here we go. It's [95:34] done successfully. I'll just say let's [95:36] try to continue with Google. [95:39] So, I'm going to say continue. Okay. So, [95:41] as you can tell, it is working. Now, if [95:43] I wanted to, I can cancel it. Then, we [95:45] see this alert. Now, notice how this is [95:48] the exact same thing how we set this up, [95:51] right? So, we say the title will be [95:53] equal to sign in incomplete and that's [95:56] the message. So this is how you build an [95:58] alert. Now just say actually try to log [96:02] in with this account. [96:06] Hopefully it should take us to the home [96:08] screen once we are authenticated. [96:10] And here we go. We are in the home [96:12] screen. We cannot see the text because [96:15] colors are not really accessible. We're [96:17] going to fix it. But overall everything [96:19] is working. Now we'll go under the home [96:22] screen. [96:24] As you can tell we have the sign up [96:26] button. If I press I should be [96:28] redirected to the authentication page. [96:31] Okay. So with that we can leave this [96:33] section right here. Let's try to quickly [96:36] reiterate like what we have done. So we [96:39] built a custom hook right and here we [96:42] have basically one call where we pass a [96:45] strategy which is either Google, GitHub [96:48] or Apple and clerk wants you to pass it [96:51] in this way like ooth Google. Same for [96:55] GitHub and Apple, right? If everything [96:57] is done successfully, we're going to [96:59] call the set active to pass our session [97:02] ID. That means user is authenticated. [97:05] And from this hook, we are getting two [97:07] different values, right? And we grab it [97:09] under the sign-in screen [97:12] just like that. Then we have the loading [97:14] state depends on these variables. We [97:17] have our UI like this is mostly CSS I [97:20] would say. Don't worry about this too [97:22] much. Just try to understand the logic. [97:25] You can always try to you know build a [97:28] beautiful UI by taking some time or even [97:31] build it with AI. Now at the moment just [97:33] try to understand the logic. Anyways, we [97:36] have three of these buttons. When you [97:38] click you pass the specified [97:42] like strategy either Google, Apple or [97:44] GitHub and then everything works [97:46] successfully. Okay. So that's it. One [97:49] last thing that I'd like to mention, we [97:52] added these variables, these CSS [97:54] variables so that everything is working [97:57] successfully like in the light mode and [98:00] dark mode, right? Let's try to actually [98:03] switch and see the light mode. As you [98:06] can tell, that's the exact same UI we [98:08] have in our screenshots. Right. [98:12] Okay. So, it's almost identical. [98:17] Now I'll just go into the dark mode and [98:19] then we're going to commit our changes. [98:22] So I'll close everything [98:25] stage it all get a commit message with [98:27] AI and then we're going to sync this up. [98:32] Okay. So with that hopefully I'll see [98:34] you in the next section. [98:38] In this section let's try to get into [98:40] our database. At the moment, all we have [98:43] is a database URL where we can connect [98:46] to our database, which is this one. But [98:49] it doesn't have any tables, any data, [98:52] nothing. Right? So, let's try to set [98:54] this up where we can create a table for [98:56] the items. Right? So, every single item [98:59] will have a name, category, quantity, so [99:02] on and so forth. So, let's see how we [99:04] can set this up. Now, we are going to be [99:06] using an ORM called Drizzle. And you can [99:10] think of an RM like let me try to [99:13] visualize it. [99:15] So we have our codebase and we have a [99:18] database right. So here we would like to [99:21] write some code so that we can [99:23] communicate to our database. So we will [99:26] basically get an ORM like drizzle and we [99:29] can just still write a JavaScript code [99:32] but it is going to take that JavaScript [99:34] code and convert it to SQL because we [99:38] have a Postgress database right. So you [99:40] will be able to have some abstractions. [99:43] You will still write JavaScript at the [99:45] end of the day but it'll be converted [99:48] converted to SQL. So it is more than [99:51] this but basically if you're interested [99:53] you can check what is an RM [99:58] right and then specifically you can take [100:00] a look at the result. I'll try to walk [100:02] you through it as much as possible but [100:05] that's the general gist of it. Okay so [100:07] we are going to be writing JavaScript at [100:10] the end of the day it'll be converted to [100:13] SQL or you know yeah I think SQL in this [100:16] case. So I'll just try to clear this up. [100:19] Let's jump into VS Code. We're going to [100:22] install a couple of different packages. [100:24] First, I'll clear this up. Let's say mpm [100:27] install. We're going to have drizzle-rm. [100:32] And then we're going to get one more [100:34] package for neon database. So, it'll be [100:37] at neon database/serverless. [100:43] Go ahead and run this. It's going to [100:46] install these packages and we're going [100:48] to get one more package, but that's [100:51] going to be for the development. Okay, [100:53] so this is done successfully. I'll clear [100:55] this up. So, why is it so slow? Let's [100:59] say mpm install. This time we're going [101:02] to say trizle [101:05] dashkit and we'll say d-savedev. [101:10] So, this will be installed. Let's go [101:12] under the source. We will create a [101:14] folder called lib and within the lib I [101:18] will create a server folder and within [101:21] this we can have one more folder called [101:24] database or db within the db we're going [101:28] to have some files like client.ts [101:32] and we're going to have schema.ts [101:34] Yes. So schema file as the name suggests [101:38] this is where we can define our schema [101:40] like which tables we are going to have [101:42] which fields so on and so forth and [101:45] within the client file we can generate [101:48] an object so that we can interact with [101:50] our database. So I'm going to get a [101:52] couple of different imports. I'll get [101:55] neon from this package that we just [101:58] installed. We're going to get the result [102:00] and we're going to get schema from the [102:03] schema file in a second. For now, let's [102:06] just say const schema. [102:10] This is just for testing purposes. For [102:12] now, leave it as an empty object. Then [102:14] we can get the database URL from the [102:17] process. [102:19] Okay. So, we have the database URL. I'll [102:21] just add a check if this is undefined. [102:23] I'm going to throw an error. I'll say [102:25] this is this is required. Then we can [102:28] create a SQL object by calling the neon [102:32] method passing our environment variable. [102:35] Right? And at the very end we'll just [102:37] say export const DB. This will be the [102:40] object that we will be using to be able [102:42] to interact with our database. So I'm [102:45] going to say call and we're going to [102:47] pass an object. So, we're going to pass [102:49] the client, which is this SQL variable [102:53] or the object, and we're going to pass [102:56] our schema. [102:58] Since they are the same thing, we can [103:00] shorten it. And this is not going to be [103:02] an empty object. This is just for [103:04] testing purposes for now. Let's actually [103:07] create it. Okay. So, I think I just made [103:09] a mistake. This should not be under the [103:11] schema file. Sorry, my bad. This should [103:14] be under the client. I thought we were [103:16] in the client file. Um I'll just paste [103:18] it here. Now we're going to get the get [103:21] into the schema file and build our [103:24] schema. Now from the drizzle rm from the [103:27] posgress core we are going to import [103:30] couple of different values and we'll be [103:32] using them right now. So we're going to [103:34] say export con [103:38] items. Let me type this out correctly. [103:43] items and we're going to say postgrass [103:46] table. We can give the name of the [103:48] table. We can put anything. The name [103:50] that I'll be going with will be grocery. [103:54] Wait, what the hell? Why can I I cannot [103:56] type. So this should be grocery items. [103:59] And we're going to pass every single [104:01] column. So every single item will have [104:03] an ID and it's going to be type of text. [104:07] We'll say this is primary key. Then [104:10] every single item will have a name. So [104:12] we're going to be using text and we will [104:14] say this cannot be null. Then we will [104:17] have the category. So I'm just going to [104:19] copy and paste because it is super [104:21] simple. Just understand what we are [104:23] doing. You don't need to memorize the [104:25] syntax. This is coming from the drizzle [104:28] documentation. You can always double [104:30] check. So we're going to be using [104:31] quantity which is integer not null and [104:34] by default it's going to be one. Then [104:36] we'll have the purchased field which [104:39] will be boolean either true or false. [104:41] And this is needed because depending on [104:44] that we can toggle the state right if [104:47] you press it's going to go like at the [104:49] very bottom of the screen it'll say like [104:52] this is purchased [104:54] okay this is what we are doing and [104:56] finally we'll have the priority so as [105:00] you can tell we have high low and I [105:02] think we also have medium in this [105:04] screenshot you cannot see it but by [105:07] default it'll be medium and finally we [105:10] will have the updated that field [105:13] and we are going to be using this value [105:15] so that we can sort it. Right? So you [105:18] will see the latest one at the very top [105:20] or the latest updated one. Right? [105:24] So super simple, nothing complicated. [105:27] Just go ahead type this out or get it [105:29] from the source code. Here we have some [105:31] extra details. Not really that important [105:34] like it has nothing to do with React [105:36] Native. So I'm just going to skip that. [105:38] These are all the columns that we're [105:39] going to have in the [105:42] um like in our database right in the [105:44] table. [105:46] So now we will go here instead of having [105:49] this hard-coded schema, we will actually [105:51] import our own schema that we just [105:53] created. So I'm going to say import [105:55] everything as schema [105:58] from the schema file. Right? So if this [106:01] is confusing, let me explain because I [106:04] remember when I was a beginner, I was [106:06] like, what the hell does this mean? [106:08] Right? Just imagine here you have [106:10] multiple different tables like you have [106:13] users. Let me just say users, you have [106:17] maybe like products, books, posts, so on [106:21] and so forth. You basically import [106:23] everything as schema. Then you can just [106:26] come here. We can say schema users [106:29] schema grocery items. Right? So this is [106:33] what that means. And we just get the [106:35] schema as an entire object and pass it [106:38] right here. So I hope that makes sense. [106:43] So that's it for the client setup as [106:45] well as the schema setup. Let's try to [106:48] create a file because at the moment we [106:51] don't have any data, right? I would like [106:53] to add some test data under the tables [106:57] and we don't even have our table. Let's [106:59] just try to first push this schema to [107:02] our database. For this we can create a [107:06] script. So here I'll add a comma. I'll [107:09] say database push and then we can use [107:14] drizzle kit push. So that's it. But we [107:18] need to create the drizzle config file. [107:20] I almost forgot, but this is a file that [107:23] you definitely need. Under the root, [107:26] just say drizzle.config.ts [107:30] file. Yeah, it should be TypeScript and [107:32] copy it. Then paste it from the source [107:35] code. It is like 10 lines of code. [107:38] From the result kit, we get define [107:40] config. Call this method and pass some [107:43] objects. So, we say here is our schema [107:46] file. It is under the source lib server [107:49] db and here is the file. Then the out [107:52] directory will be drizzle dialect. We [107:54] are using posgress and our database [107:57] credentials [107:59] is right here. So that's it. That's the [108:01] config file. Now with this we can save [108:05] everything and go into our terminal. We [108:08] will just run this script. So I'm going [108:10] to clear this out. I'll say mpm run db [108:14] push. [108:17] So this is going to do some magic. [108:19] Basically it'll take the schema and push [108:22] it to our database. Let's go here [108:25] refresh this file or this page. As you [108:28] can tell we got our table called grocery [108:30] items because this is how we called it. [108:33] If you put hello that would be hello as [108:36] well. So we got all the columns like the [108:39] ID, name, category, quantity, so on and [108:43] so forth. Now let's create some test [108:45] data. [108:47] I will go under the should we go under [108:50] the source maybe like outside [108:53] um like where should we put it? Yeah, I [108:56] think I'll just put it under the root. [108:58] I'll just say scripts and then we can [109:00] add a seed file. I'll explain what that [109:04] means. We'll say seed dash grocery.js [109:10] or I'll just say commonjs. This is what [109:12] I have in my notes. So I'll just stick [109:14] to it. [109:17] Now seeding is a concept where you would [109:20] like to have some initial test data and [109:23] I have prepared this file for you [109:25] actually with AI. Basically we have [109:28] couple of different items. I think total [109:32] like in total it has 10 different items. [109:34] We have some bananas. Here's the [109:36] category, quantity, priority, [109:40] and if it is purchased or not. Okay, so [109:44] overall you can read it. This will [109:45] basically create the table. If not [109:48] exists, then it's going to push this [109:50] data to our database. So save this file. [109:54] We're going to create a script. [109:58] I'm going to say db seed and we would [110:01] like to basically run this file right [110:04] and actually instead of calling this [110:05] database I'll just say seed and let's [110:08] say grocery [110:11] this is just naming preference like I'll [110:13] go with this one then we would like to [110:15] run this file with node so I'll say go [110:18] under the scripts [110:21] find this file and run it so just make [110:24] sure you put cjs right [110:27] Okay, now we'll open up our terminal. [110:29] We'll say mpm run seed grocery. [110:36] Okay, looks like it failed. Why this is [110:38] the case? So I think it cannot find the [110:41] database URL. So instead of having it as [110:44] an environment variable, let me copy [110:46] this value [110:49] just for like 10 seconds. I'll put it [110:52] right here. [110:55] And then I'm going to rerun this file. [110:58] Hopefully it should work. [111:03] Okay, as you can tell, it's completed. [111:05] It inserted 10 different items. I'll [111:08] bring this back because I don't want to [111:10] push my credentials to GitHub. Okay, [111:13] let's double check. We didn't had any [111:16] data. Let's refresh. Now, we should have [111:18] 10 different items. Now, we are going to [111:20] be using them a bit later in the video. [111:22] For now let's create our actions and [111:25] then we are going to end this section. [111:27] So under the lib I think should we go [111:30] under the DB maybe like under the server [111:33] I'll say like database actions dot ts [111:38] file and here we will have some queries [111:41] and mutations. A query is basically when [111:44] you want to fetch some data and mutation [111:47] is when you want to create something [111:50] delete or update. So once again a query [111:53] allows you to fetch data and mutation [111:55] allows you to insert update or delete [111:58] data. Now here we'll go ahead and import [112:01] two different things from drizzle OM [112:04] which says you know in the descending [112:06] order and equal we'll be using them. [112:09] Then from the client we're going to get [112:11] the DB object which is this one. And [112:15] finally we're going to get the grocery [112:17] items from the schema. Right? So we're [112:20] going to get this object. Now let's go [112:23] ahead and create our very first query. [112:26] I'll say const list [112:29] grocery items. So this will basically [112:32] get every single item in our database [112:34] and we can say con rows. We can call [112:38] await database dot select. [112:42] So call this. Okay. Then we'll say from [112:45] the name of the table which is grocery [112:49] items and then we'll say order by in the [112:53] descending order [112:55] and the field that we will be descending [112:57] or the like order by is going to be [113:00] grocery items do updated at field. [113:04] So believe it or not that's the entire [113:06] thing. We'll just say return the rows [113:10] which is like the documents. Okay. So, [113:12] super simple. You don't need to memorize [113:14] this. Like this is coming from the [113:16] Rizzle documentation. And as you use [113:19] this more and more, it'll just stick to [113:22] your mind. Now, in the similar concept, [113:25] we would like to create a mutation. So, [113:27] I'll say create grocery item. [113:32] And this is not only going to take name. [113:34] So, I'm going to delete this part. We'll [113:36] say let me just kill the AI. It is kind [113:39] of annoying. [113:43] Okay. And by the way, I just press [113:45] commandshiftp or control shiftp to open [113:49] this up. And then you can say toggle [113:51] status bar, right? So just keep that in [113:54] mind. Okay. So we're going to have the [113:56] input coming from user. And this can be [114:00] let's say it's going to have a name [114:02] which is type of string. Then it's going [114:04] to have the category [114:07] again it'll be type of string. quantity [114:10] as well as priority. Now we don't have [114:12] to type this out but since we are using [114:15] TypeScript if you don't add it this will [114:17] get mad and it is a best practice to [114:20] always add the type. Okay. So within [114:22] this method we are going to say await [114:25] database doinsert [114:28] into the grocery items table and we're [114:31] going to say here are the values that we [114:33] would like to have. So for the ID we can [114:37] use crypto.random random UYU ID. So it [114:40] is just going to generate a random ID. [114:43] Okay. Then for the name, we're going to [114:45] say input.name, right? [114:49] Okay. Same for the category. [114:52] Let me just get the rest of it and I [114:54] will walk you through it. [114:56] So we have the quantity. It can be like [114:59] minimum of one. We are using max because [115:02] just imagine if this is equal to minus 5 [115:06] it's going to get the maximum value [115:08] which is one. But if it was + 5 it would [115:11] get the five. Right? This basically says [115:14] get the maximum value but at minimum it [115:16] could be one. I hope that makes sense. [115:19] Then the purchased by default it's equal [115:22] to false pass the priority and updated [115:25] that is date. Now, now at the very end, [115:28] we'll just say dot returning. So, it'll [115:31] basically say return all these fields [115:33] back. So, we can say const rows [115:37] and we'll just say return like this is [115:40] an array. Okay, we would like to get the [115:42] first option which is an object. [115:47] So, that's the mutation. Now, in the [115:49] same way, I'll just grab this and paste [115:52] it from the source code and I will walk [115:54] you through it. Let's import the equal [115:58] from drizzle rm. [116:01] Okay. So this is the method that we are [116:03] going to call whenever you press one of [116:05] these items. So when you press this [116:08] would be marked as purchased. Right? [116:12] So here set grocery item purchased. [116:15] We're going to pass the ID of the item [116:18] and the purchased field either true or [116:20] false. And we say database.update update [116:24] under this table and set this field [116:27] called purchased whatever user is [116:29] passing and update the updated at time [116:32] and we'll say where it's equal to this [116:35] ID so if you press this one it should [116:38] update this one right if you press that [116:41] one it should update that one so that's [116:43] how we can filter it with the wear [116:46] clause and we say if there is not a [116:48] value return null but if there is just [116:51] return that value. Now we'll do similar [116:55] thing when you want to update the [116:57] quantity, right? So if you press this [116:59] one, it'll be decremented and here it'll [117:02] be incremented. [117:04] So it is very similar. I'd like to copy [117:07] and paste instead of typing this out. So [117:09] just pause the video and try to read it. [117:12] I promise you will understand it. Again, [117:14] we say update something in this [117:16] database. Here is our wear clause. Here [117:19] is the fields that we would like to [117:21] update which is updated at and the [117:24] quantity once again it could be at [117:27] minimum of one here if you pass minus 5 [117:31] right this could be one because quantity [117:34] cannot be less than one and then we [117:36] finally return the value and now we are [117:39] going to have another mutation when you [117:41] press this button it's going to delete [117:43] that item right so it's going to be just [117:46] one single line we say delete something [117:49] from this table where it is matching [117:52] with this ID right and very last [117:56] mutation so I think under the profile [118:00] screen or under the insights if you [118:02] press this button it's going to clear [118:04] everything from the database but it's [118:08] going to clear the completed items okay [118:11] so I'm just going to copy and paste it [118:13] it's very very simple and similar to [118:16] this one here we say If purchase field [118:19] is equal to true, just go ahead and [118:22] delete it. So these are all the actions [118:25] that we are going to be using later in [118:27] the video. For now, we can leave this [118:29] section right here. Just before we do [118:31] so, I'd like to give you a quick recap [118:34] of what we have done. So we created a [118:37] drizzle config.ts file to tell to [118:40] drizzle like here is our schema. This [118:43] would be our out directory. This is [118:46] dialect that we're using because you can [118:48] also pass something like my SQL single [118:51] store SQL light so on and so forth but [118:54] we are using Postgress SQL and here is [118:57] our database URL and then under the [119:00] source folder we created a DB folder [119:03] right so we have the client where we [119:05] pass our schema as well as our SQL [119:08] object. So by using this DB we can have [119:12] our actions right notice how we are [119:15] always using the DB object to update [119:17] something delete something create so on [119:20] and so forth then we have our schema [119:23] where we say that's our table these are [119:25] the fields and finally we have our DB [119:28] actions now we didn't have any data [119:31] right we didn't had like anything so we [119:34] created a seed file and to be able to [119:37] run this we created a script script. So [119:40] once you run that, it's going to create [119:42] some test data. And to be able to like [119:46] to be able to create this table or this [119:49] schema, we run database push, right? [119:53] It's going to take the schema and push [119:55] it to Postgress or in the Neon [119:58] dashboard. Okay. So I hope that makes [120:01] sense. Now we can close everything. [120:03] We'll go and commit our changes. So I'm [120:06] going to stage everything, generate a [120:09] message, [120:13] and then commit that. [120:15] Finally, let's sync this up. [120:19] And once it is done, hopefully we can [120:22] end this section right here. I'll see [120:24] you in the next one. In this section, we [120:27] are going to learn how to build a tab [120:29] navigator. Now, what does that mean? [120:31] Basically a tab navigator is this kind [120:34] of a component that you would have and [120:36] depending on the current tab UI would [120:38] update. So like this is the list tab. [120:42] This that's the planner and that's the [120:44] insights. This is a very common [120:46] navigation pattern that we have in React [120:49] Native. Now just before we jump into [120:51] coding let's take a look at the [120:53] documentation. [120:54] So you can just search for expo tab [120:57] navigation and you're going to see that [120:59] they say tabs are a common way to [121:01] navigate between different sections of [121:03] an application and expo router provides [121:06] a couple of different ways of [121:09] implementing that. So we have JavaScript [121:11] tabs, native tabs and custom tabs. Now [121:15] if you would like to get the native [121:17] feeling, what does that mean? Let's say [121:20] you open up a native application like [121:23] fitness app that iOS has. You're going [121:26] to see that they have this liquid glass [121:28] effect which is the latest version of [121:32] the tabs that is built into Apple, [121:34] right? How do you get this? Do you build [121:36] it from scratch or do you use like a [121:39] component? Well, you definitely don't [121:42] need to build it from scratch because [121:44] export router gives you native tabs and [121:47] this is the one that we will be using. [121:49] You can take a look at the other ones as [121:51] well. Let's say you are building a very [121:53] complex UI where everything is custom. [121:56] Then in this case, you can use the [121:58] custom tabs. Okay, but in our case, [122:00] we're going to be using the native tabs [122:02] which is very very cool and I'll try to [122:05] explain as much as possible. [122:08] Okay. So just know that this is working [122:10] I think from SDK 54 and above. But we [122:14] are in SDK 55. So it is completely fine [122:17] to work with this. [122:20] Now first off we're going to jump into [122:22] VS Code and we're going to create a [122:25] folder. So under the source under the [122:28] app actually instead of calling this [122:30] home I'll just call it as tabs and we're [122:33] going to put all of our tabs into it. So [122:37] the index is going to be the very first [122:39] tab that we have which is a list. Then [122:42] I'm going to have planner and then [122:43] insights. So for every single tab you [122:46] would create a file. So I'm going to say [122:48] planner.tsx [122:51] and then I'm going to create [122:52] insights.tsx. [122:54] Let's try to generate a test content for [122:57] now like rnf. I'll say insights [123:02] screen [123:06] and let's say planner screen. [123:09] Okay, I'll try to authenticate first. [123:14] Now just by adding these files is not [123:16] going to work. You need to set this up [123:19] under the layout file. So I'll try to [123:23] login. [123:25] And here instead of calling this only [123:27] layout, you can change the name. It's [123:29] not really needed but let's just say [123:32] this is going to be called as a tabs [123:34] layout and instead of only returning [123:36] stack here we are going to return the [123:39] native tab element. So just like in the [123:42] documentation we're going to import the [123:44] native tabs. [123:46] This is the parent element. So we'll say [123:49] native tabs and within this for every [123:52] single tab we're going to have the [123:54] trigger. So I'm going to copy this one. [123:57] actually both of them. [124:01] So just follow along. In two minutes it [124:04] should make sense. Okay. So the very [124:06] first tab we have is for the index [124:09] screen, right? And then the other one is [124:12] for the settings, but we don't have the [124:14] settings screen. We would like to have [124:16] it for let's say planner, right? So I'm [124:19] going to say planner. And then for the [124:21] trigger icon I can use maybe not [124:25] settings but I'll just try to update it. [124:27] So here under the SF I'll say maybe like [124:30] plus circle [124:32] and MD here I'll say add. Now MD is used [124:36] in Android and SF used in iOS. Okay. So [124:40] in Apple you're going to get this icon [124:43] and the like on Android you would get [124:46] MD. Okay. Same thing right here. For [124:49] now, let's just use house. That's fine. [124:52] And here for the text, I'm going to say [124:54] planner. Let's save what we're going to [124:57] get. Maybe we should rerun our [124:59] application. So, I'll say MPX [125:02] expo. [125:04] And I'm going to reload my app. [125:11] Okay. So, as you can tell, we already [125:13] got our tabs, right? Let's take a look [125:16] at it how that work. So first off you [125:18] have the parent element called native [125:20] tabs. And then for every single tab you [125:23] add a trigger. You give the name of the [125:26] file. So we have the home which is this [125:29] one. Right? We can update it. Like for [125:32] the label you have native [125:34] tabs.trigger.label. [125:37] Instead of saying home I'll say list. [125:40] And we're going to update the icon as [125:42] well. So for the icon as I said you [125:44] would be using this. For iOS, you would [125:46] update SF. Let's say I think I'm going [125:49] to use a list [125:52] bullet circle or I think clipboard. [125:57] Do we have it like list dot [126:01] bullet clipboard? Okay, so that's what [126:04] we have as well just like in the demo [126:07] application. Now here the color is [126:10] green, right? By default we have blue. [126:12] We are going to fix it. But for now, [126:14] just understand the concept. Let's do [126:17] the same thing for the very last tab [126:19] which is called as insights. You need to [126:22] put the file name. [126:27] And then you can put the label, anything [126:29] you want. I'll say insights as well. [126:32] Let's update the icons. That's going to [126:34] be [126:35] chat bar like this. [126:39] Okay. Looks like it failed. [126:42] not chat, it should be chart. My bad. [126:44] Then for the MD, it's going to be um [126:47] sorry, it should be analytics. [126:51] And I think this should be list. [126:56] Okay. So, as you can tell in the planner [126:59] screen, we have this text. Let's just [127:01] make the class name text of white. It [127:04] should be visible. It is right here. You [127:07] can make this a safe area view. So, you [127:09] get the point. Whenever you click to one [127:11] of the tabs, you see that specific [127:13] screen. Now, this is the simplest way of [127:16] using it. You can of course customize [127:18] it. Like let's say if this is active, we [127:21] can update the icon. So, under the SF, [127:24] I'm going to delete this. This should be [127:27] an object, we're going to say in the [127:30] default case, use this icon, which is [127:33] what we just cut, right? But we'll say [127:36] if this is selected then you can use [127:39] this icon list bullet clipboard but it [127:44] should be filled in. Notice how if it is [127:46] not selected it uses the default one but [127:50] if it is selected it is filled in. So [127:52] we're going to do the same thing for the [127:54] other icons as well. I'm going to delete [127:57] this part. If it is selected it should [127:59] be filled. Um, wait. [128:04] I think I just made a mistake. It should [128:06] be under the icon. [128:09] Okay. Now, if it is selected, notice how [128:12] it is filled. If you wanted to, you can [128:14] change the icon completely. Like, do we [128:16] have home? Let's just say HomeKit. [128:20] If it is selected, icon is changing. But [128:23] this is what we will be using. Let's do [128:25] the same thing for this one. I'm going [128:28] to delete the SF. [128:33] Okay. [128:35] Now, how do we update the color? So, you [128:37] can go under the native tabs and you can [128:39] say tint color and then I think you can [128:43] add a color. So, here for now, I'll just [128:46] add a string like red. As you can tell, [128:50] it's been updated. But, of course, we [128:52] don't really want to use red. We're [128:54] going to be using a custom value [128:56] depending on the theme. So I'm going to [128:59] get the color scheme first. [129:03] So I'm going to import this from React [129:04] Native. Then we will check if we are in [129:07] the dark mode or not. If that's equal to [129:10] dark, that means we are in the dark [129:12] mode. And depending on the dark mode, we [129:14] are going to get this tint color. So [129:17] either it's this value or that one. [129:22] And I'll just pass this in. I'll say tab [129:24] tint color. [129:27] So as you can tell it is working. Let's [129:30] try to make this in the light mode. [129:35] Okay. So it is still working. And if you [129:37] wanted to, you can customize it. You [129:39] know, if you didn't like the colors. [129:42] Wait, why this is complaining? Color [129:44] scheme. [129:46] Um, I think this should be coming from [129:49] not React Native, but it should be [129:52] native wind. My bad. [129:55] We need to maybe rerun this. [130:00] Okay, now it's fixed and we don't really [130:02] have any warnings. Now, if you wanted [130:04] to, you can add some badges as well. [130:07] Let's say you have some notifications. [130:09] You would say triggerbatch and at like 9 [130:13] plus. And this is coming from the [130:14] documentation. Just feel free to pause [130:17] the video and take a look at the other [130:19] feature features of your if you are [130:21] interested. Okay? Like if you leave it [130:24] empty, it would look like you have a [130:26] notification but it doesn't show you any [130:29] numbers. [130:31] Okay? So with this I'll just leave this [130:33] layout as it is and maybe we can end [130:35] this section right here. We just learned [130:37] about the native tabs. I don't really [130:39] want to make this any more complicated. [130:42] So once again we have the native tabs as [130:45] the parent element. Then for every [130:47] single one of these tabs you would [130:50] create a trigger pass the file name that [130:52] you would like to see as the content. [130:54] Then give it a label as well as an icon. [130:58] And if you wanted to you can update the [131:00] default state as well as the selected [131:02] state. To be able to update the colors [131:05] we update the tint color and just pass [131:09] our object or the string value. Sorry, [131:12] not object but just a string value which [131:14] is a color. Okay, so these are all the [131:17] things that we have done in this [131:19] section. I'm just going to close [131:21] everything and let's try to stage our [131:24] changes [131:28] and then we're just going to commit that [131:30] sync this up and hopefully I'll see you [131:32] in the next section. [131:35] All right, so this is where we left in [131:36] the previous section. And we have built [131:38] these native tabs. And in this section, [131:41] we are going to learn something called [131:42] API routes. This is coming from Expo. [131:45] This is a feature that they have and [131:48] it's really cool. So we're going to [131:50] learn it. Just type Expo API routes. [131:53] Then go into the documentation. Okay. So [131:56] this is basically a concept or yeah, I [131:59] think we can just call it as a concept. [132:01] So you don't really need to build a [132:03] separate back end to be able to run the [132:06] code on the server side. So if you have [132:08] ever used Nex.js, it is the similar [132:11] concept. Under the app folder, you would [132:14] create an API folder and then you would [132:16] put your backend code. If you have never [132:19] used Nex.js, that's completely fine. [132:21] I'll try to explain from scratch. But if [132:23] you used it, just know that it is the [132:25] similar concept. So if you want to [132:27] create an API route, you just need to [132:30] add this plus API at the end of the [132:32] file. So here, let's go ahead and [132:34] actually test this out under the app. [132:37] You can put it right here like under the [132:39] root. But my convention like not only [132:43] mine, but I would say every developer [132:47] that knows how to use this correctly [132:49] would create an API folder. like this is [132:52] a convention that we would do and within [132:54] this you would create the file. So this [132:56] makes your codebase organized. You just [132:59] know all your API routes are under here, [133:02] right? It's not it's not like randomly [133:05] under the app folder, right? Okay. So [133:07] just make sure to create this folder for [133:09] the best practices. Now we can create [133:12] hello.ts [133:14] file but remember to put plus API just [133:17] before the dot. [133:20] Okay. So here you would create methods [133:22] and it could be called as get, delete, I [133:26] think, put, patch, so on and so forth. [133:29] So let's just get the get request. I'm [133:31] going to copy this and just paste this [133:34] in. So we have the function called get. [133:37] This is a get request. The first object [133:40] is request that you can get. This is [133:43] something that Expo provides you out of [133:46] the box. And here we just like return a [133:48] simple response. Just make sure to run [133:51] your application. And one more thing, if [133:54] you want to use this, you need to visit [133:56] app.json just like what they say here. [133:59] And under the web, all code should be [134:02] equal to server. Okay, by default it is [134:04] static. Just make sure to replace it as [134:07] server. And this is what they say in the [134:09] documentation as well. So that's the [134:12] first step. And then we can call this [134:15] endpoint. Now, make sure that you're [134:17] running your application [134:19] and I can open up a new terminal. We [134:22] will just send a get request like we're [134:25] going to call this basically. [134:27] And I think they have the example. So, [134:30] I'm going to copy this. So, this is [134:32] using the curl. If you don't know what [134:34] that is, basically this allows you to [134:37] send Oops. Let's go here. This allows [134:40] you to send a get request to this [134:42] endpoint. Now, this is what you would [134:44] run normally, but since we put it under [134:46] the API folder, we should add API right [134:50] here. So, I'm going to call this. Notice [134:52] how we got the hello world. If you don't [134:55] add the API, let me just paste that in. [134:58] Like, it's going to say this route did [135:00] not found or I think we don't really get [135:03] any response at all. Okay, I think we [135:05] got it's like 404, right? Like we just [135:08] got some errors. [135:10] Let's clear this up once again. [135:13] Since we have the API folder, you would [135:16] add it into the URL. [135:19] Okay, so we got the response that means [135:22] it is working correctly. I'll just give [135:24] you another example. Let's say under the [135:26] API, let's just say we have something [135:28] like I don't know payments. You would [135:31] like to send a request to API payments, [135:36] right? And in this case, you would [135:38] create a file and I'm going to call it [135:41] as index plus api. Yes. Now when you [135:44] call it index, that means you don't [135:46] really need to add anything else to [135:48] here. So you don't need to say index. [135:50] Okay? When you just call it in this way, [135:53] it's going to find the index file. And [135:55] again, I'll just copy this. Let's say [135:57] this will be a get request. Let's say [136:01] I don't know like success of true. [136:08] Now I'll send the request. As you can [136:10] tell it is working. So I hope this gives [136:12] you an idea how that work. We are going [136:15] to be building couple of different API [136:17] routes so that we can call our actions. [136:22] So here we have like this is what we [136:24] built a delete request right another one [136:29] for the delete. Then we have like [136:31] update. For this we can use patch or [136:33] put. Then for insert we can use post [136:37] request. Right? Then here we have get [136:40] request where we fetch some data. [136:44] Okay. So I'm going to go ahead and [136:45] delete the payments because we don't [136:47] really need it. That was for testing [136:49] purposes. I'm going to delete the hello [136:52] API route as well. But here instead we [136:55] are going to create a folder called [136:57] items. [136:58] And within this first off, I'll create [137:00] the index plus sorry index plus api.ts [137:05] file. So this is going to be the [137:07] endpoint. Let me just type this out like [137:09] into the terminal. That's going to be / [137:13] ai slash items. Okay, since we call it [137:17] as index, you don't really need to put [137:18] anything else. Then here we will have a [137:21] get request. So I'm going to say export [137:24] async function. Let me zoom in. [137:28] Okay, for the name since it's a get [137:30] request, make sure it is all uppercased [137:32] and call it as get. Here you can get the [137:36] request just like a second ago. But here [137:38] I think we don't really need it. Uh I'm [137:40] going to skip that. Then we'll have the [137:42] try and catch block. Now under the try, [137:45] we will basically say call our query [137:48] called list grocery items. So this is [137:51] going to do like that's going to make [137:53] the database call, right? Then I'm going [137:56] to say const. We're going to get some [137:59] items. And we can just return this back [138:01] to the client. So I'll say return [138:04] response.json. [138:06] And let's pass the items. So that's the [138:09] key. That's the value which is this one. [138:11] Since they are the same, I'm going to [138:13] delete this part. And under the catch, [138:15] first off, I'll just get the error. And [138:17] I'm going to, you know, like kind of [138:21] like add a check. I don't know how to [138:23] call it. Uh basically we have a turnary [138:25] operator. We say if this is the instance [138:28] of error get the message else we're [138:30] going to add a generic error message and [138:33] then we're going to send this back to [138:35] the client response.json [138:38] here is the error and status is 500. [138:41] Let's actually test this out. Now in our [138:43] database we have 10 different items [138:45] right? So this should give us 10 [138:47] different items. [138:49] So I'm going to go here. [138:52] We are calling API items. Let's run [138:55] this. [138:56] Hopefully, we should get 10 different [138:58] items. As you can tell, like we have the [139:01] items as the key and then the value is [139:04] an array of objects where we have like [139:06] eggs, banana, so on and so forth. So, [139:09] this is working. That's the get request. [139:11] We are going to be calling it from the [139:13] client. So, for now, let's just build [139:15] the API routes. Now, in the similar way, [139:18] we're going to have a post request [139:20] within this file. So I'm going to say [139:22] export let me actually copy this part [139:26] instead of get that's going to be post [139:28] and we will get the request [139:33] let's say type is request [139:36] and within this we will say try and [139:38] catch log now instead of typing out I'll [139:40] just copy and paste and walk you through [139:42] it because I'm such a slow typer so [139:45] instead of typing it I'm just going to [139:47] explain. So we're going to get the [139:49] request and we're going to call the JSON [139:51] function. Then we're going to await it [139:53] which will give us the data that user [139:55] passed and user is going to pass things [139:58] like name, category, quantity and [140:01] priority. Now if any of these are equal [140:04] to undefined we can throw an error. So [140:07] I'll say if any of these three values [140:10] undefined we'll say please provide all [140:12] required fields. quantity is not like um [140:17] how do we call it? It's not required [140:19] because within the method when we call [140:22] our mutation [140:25] we pass one out of the box right just in [140:28] case if this is not provided let's say [140:30] this is equal to zero or undefined you [140:33] know we are going to just get the one [140:36] okay [140:39] so if this is the case we are going to [140:41] return 400 as the error status code [140:44] right and then we can call our mutation [140:48] if this is not the case. So I'm going to [140:49] say await create grocery item call this [140:53] method. Then we're going to pass the [140:55] name. We're going to pass the category, [140:57] quantity and priority. [141:01] Then this will give us the created item [141:04] and we can just return this back to [141:06] client. [141:08] So status code will be 201 which means [141:12] something is created successfully. And [141:14] we'll do the similar thing for the catch [141:16] block just like what we have done above. [141:20] This time it'll say fail to create the [141:22] item. So that's it for this entire file. [141:25] We have two different endpoints or API [141:28] routes which is a get request and a post [141:31] request. We are going to be calling them [141:33] a little bit later in the video. Now [141:35] let's try to create another file. This [141:37] is going to be for let's say clear clear [141:40] dash purchased. [141:44] Am I typing correctly? Like purchased [141:47] plus API.ts. [141:49] So this is going to be a post request. [141:52] And let's see when you press this button [141:55] under the inside screen, it's going to [141:57] clear all the completed items, right? [142:00] And we already have the action. Let's [142:02] say clear purchased items. We'll just [142:05] import it. Then let's say export async [142:08] function. [142:10] That's going to be a post request. We [142:13] don't really need any arguments here. [142:15] I'll have the try and catch block. Under [142:17] the try, I'll say call the clear [142:20] purchased items. Once this is done, we [142:22] can say return a, you know, [142:25] response.json. [142:27] Maybe something like okay of true or [142:29] success of true. Depends on what you [142:32] would like to send. In my notes, I have [142:34] okay. Okay. So, I'm just going to send [142:35] it in this way. Then let's handle the [142:37] catch. It's going to be pretty classic. [142:41] Okay. Just like that. This is going to [142:44] call the method where we can delete all [142:47] the completed items. Now, a very last [142:51] file that we will create. And here we [142:53] will learn something new. Basically, [142:55] this will be a dynamic dynamic route. [142:58] And for this, you would create a file [143:01] and wrap it with the brackets. So we're [143:03] going to say ID. You can put anything [143:05] really but basically we're going to get [143:08] an ID in the URL. So just call it as ID. [143:12] Then again same convention plus API.ts. [143:16] And before we build it, let me explain [143:18] how we're going to be calling it. So [143:20] from the client, we will say something [143:22] like fetch. [143:24] So / API/ items and then you would pass [143:28] the ID of the item. Let's say its ID is [143:31] like 35, right? So that means this value [143:34] could be dynamic. It could be anything. [143:36] It could be 1 1,000. So you got the [143:39] point. It's like passing it in this way. [143:42] Okay. Now let's try to create this file. [143:46] This will get I think two different [143:48] methods. Let me first give you the [143:51] delete one. [143:53] Okay. So that's going to be a delete [143:54] method where we get the request. Now [143:57] here we pass as like I'll explain. Okay, [144:00] just forget that we got two different [144:02] arguments and we're going to call this [144:04] method called delete grocery item. How [144:07] do we get the ID? It's basically the [144:09] second [144:11] um it's the second argument. So let me [144:13] just delete this and let's type this [144:15] out. As usual, you would get the [144:17] request, right? And then you would get [144:20] an object here. we will get it as ID [144:23] because that's how we call our file [144:26] name. If it was hello then this would be [144:29] hello as well. Let's make it type safe. [144:32] We're going to say we're getting an ID [144:34] which is type of string and let's say [144:37] this is going to be type of request. Now [144:40] since we are not using this variable a [144:42] convention is to put underscore so that [144:45] you know okay we import this but we are [144:48] not using it. So that's the reason [144:51] once you delete it you send okay of true [144:54] and if we have any errors we're going to [144:56] be you know sending this as the message. [144:59] So in the similar way we're going to be [145:02] having a patch request. I'll just paste [145:05] this in. If you wanted to you can type [145:06] this out or just get it from the source [145:09] code. Let me just import everything and [145:12] I will walk you through it. Okay. So, [145:14] first off, we got we got the body from [145:17] the client, right? From the request. [145:20] Now, this is going to do one of these [145:22] things. It's going to either update the [145:24] quantity or it's going to set it as [145:28] purchased. And this is going to be [145:30] depending on if user passes a quantity [145:33] or not. Okay. So, if user pass a [145:35] quantity by calling this endpoint, we [145:38] are going to call this method. But else [145:40] we are going to call this method. Okay. [145:42] And let's say if this is not provided, [145:45] we'll just say call it as true. [145:48] And then we'll say if there is no item [145:50] in the database, right? In this case, [145:52] we're going to say 404 item not found. [145:55] But else we are going to return the [145:57] item. And as usual, we're going to [145:59] handle the catch. So that's it for all [146:02] of our API routes. I hope that wasn't [146:04] really confusing. Once again, the [146:07] convention is to [146:09] basically add this suffix at the end [146:12] called plus API, right? File name could [146:15] be anything, but just make sure to put [146:17] the suffix right at the end. And the [146:20] best practice is to put them under the [146:22] API folder so that you know like just [146:24] imagine here you have 10 different [146:27] folders. If you wanted to find your API [146:30] routes, you would just take a look at [146:31] the API folder and then you could see [146:34] everything. All right. So, let's leave [146:36] this section right here. I'd like to [146:38] keep it simple. Now, I know that we [146:40] haven't like we didn't build UI so far, [146:43] but that's fine. We're just trying to [146:45] understand bunch of different concepts [146:47] like native tabs, API routes, so on and [146:50] so forth. Once you understand [146:52] everything, then it'll be very easy to [146:54] build the UI because if you think about [146:56] it, this is just some CSS. It has [146:59] nothing to do with React Native, right? [147:01] At the moment, we are building the [147:02] backend logic. so that later in the [147:05] video it could be very easy to implement [147:08] all these UI elements. Okay. So with [147:11] this I'll go right here. I'm going to [147:13] stage everything create a commit [147:15] message. Once it's ready we're going to [147:17] commit it and sync this up. And with [147:20] this hopefully I'm going to see you in [147:22] the next section. [147:24] All right. So in the previous section we [147:27] have built our API routes. Right now [147:30] it's time to call them from our client [147:32] code. Now we are not going to be doing [147:34] it randomly because we would like to [147:36] keep our codebase clean and for this I [147:40] will create a store. Now if you don't [147:42] know the concept you will understand it. [147:44] For now let's create a folder called [147:47] store and this will basically have a [147:49] file called let's say grocery dash [147:53] store.ts [147:55] file. So we're going to have couple of [147:57] different methods and states and this [147:59] will be global. That means we can use it [148:02] in any of these components like any of [148:05] these files. Um, for this we'll be using [148:09] a package. Let me just go here and [148:11] search for the stand. [148:14] You can take a look at the details from [148:16] their documentation. But I'll just try [148:18] to explain as simply like as simple as [148:21] possible and it's like very very popular [148:24] as you can tell. 22 million or 21 [148:27] million weekly downloads. That's crazy. [148:30] And I'll just try to explain. First off, [148:33] let's try to import that. I'm going to [148:35] kill this terminal. Kill my app. Let's [148:38] say clear mpm install. Did I just say [148:41] let's install this terminal? It should [148:43] be let's install this package. I'll say [148:46] mpm install zand. [148:53] Okay. So, it's been installed. Now, [148:54] let's try to run our app. I'll say mpx [148:57] expo. [148:58] It's going to run it in the background. [149:00] Now, for now, let's just build a very, [149:02] very simple store. I just want you to [149:05] understand the concept. So, first off, [149:07] you would import the create method from [149:12] the stand package. And then you would [149:14] create a store. Let's just say export [149:17] con something like use grocery [149:21] store. And this would be calling the [149:24] create method. And within this we're [149:27] going to get a callback method. And [149:29] instead of having a function, we will [149:31] wrap it with the brackets. That means [149:34] return an object. So what we return here [149:37] is a global object. This is our global [149:40] state. And we can get two different [149:42] arguments. The setter method and then [149:46] the getter method. We will be using them [149:48] for now. Let's say we're going to have [149:50] the I don't know like I I want to keep [149:53] it simple. Let's say we're going to have [149:54] a state called posts. And here we can [149:58] have first [150:00] post. Let's say second post. And then [150:04] you can have I don't know like anything. [150:07] Let's just say is loading. Let's just [150:09] say true. Now you can save this file and [150:12] you can literally get these states in [150:15] any component just by calling this hook. [150:18] Let's go under the app, maybe under the [150:21] home screen. [150:23] So I'm just going to call use grocery [150:26] store and you can get these values now. [150:30] So you can get the is loading state [150:34] and you can get the posts, right? [150:38] Let's try to console log it. I'm going [150:40] to say posts. [150:42] Let's save and take a look at it. [150:47] I'll just reload my app. [150:50] Notice how we got the posts. So that's [150:53] how easy it is to get this state, right? [150:58] You just call this method. Now you can [151:00] do the same thing in any of these [151:01] components. So that's the beauty of [151:03] using zestand. So you get the global [151:06] state without doing too much work. You [151:08] would just copy and paste and get any of [151:11] these values. Okay. Now, of course, we [151:14] are not going to keep it this simple, [151:16] right? I'm going to delete these. But we [151:19] will have our API calls like some [151:21] methods so that we can call these routes [151:24] that we created in the previous section. [151:28] Okay, I hope that makes sense. And [151:29] notice how this is not type safe. We [151:32] would like to make it type safe. So I'm [151:34] going to delete this part. And here this [151:36] is how we would make it type safe by [151:38] passing a generic. So I'm going to say [151:40] grocery [151:43] store. And we will create this as a [151:45] type. So here I'll just provide you a [151:47] bunch of different types. You can grab [151:50] it from the source code if you don't [151:51] want to type this out. First off, for [151:54] the grocery category, we'll have five [151:56] different categories. Okay, this is how [151:59] you would type it. This is TypeScript. [152:01] This has nothing to do with React [152:03] Native. [152:05] So I'd like to show you pretty quickly [152:07] when you create an item. As you can [152:09] tell, we have five different types. So [152:12] this is what we just built. And then for [152:14] the priority we have three different [152:16] types. It could be low, medium or high. [152:19] And then I'll get another type for the [152:22] grocery item. So basically that's the [152:25] type for a grocery item. Every single [152:28] item will have an ID which is type of [152:30] string. We have name, category and you [152:33] can read the rest. Then we will get [152:35] another type for create item input. So [152:39] if you want to create an item, you need [152:41] to pass these types, okay? Like fields [152:44] and their types, then we're going to get [152:48] the items response [152:50] as well as the item response. So this is [152:53] basically an array of grocery items. And [152:56] this is just one item. So we're going to [152:58] be using these types. I hope you don't [153:00] mind it that we just copy and paste, but [153:03] basically this has no logic other than [153:05] some types. We'll say very last type [153:09] which is called grocery store. [153:12] And then within this we're going to say [153:14] this store will have some items which is [153:16] type of grocery item [153:22] like I'll just copy and paste. [153:25] We're going to say it's going to be an [153:26] array of grocery items. Then we'll say [153:29] it's going to have a loading state. This [153:31] is when we fetch the data. It's going to [153:34] be either true or false. say boolean. [153:38] Then we're going to have the error [153:39] state. This could be either a string or [153:42] it could be a null value. Then we're [153:45] going to have the load items method. I'd [153:49] like to just copy and paste. Let's say [153:51] this will be returning a promise of [153:53] void. Then we're going to have the add [153:56] item. [153:58] Again, this will be a method where we [154:00] get the input. Here is the type. And [154:03] this is what like this is the return [154:07] type. Let's add I think three more [154:10] methods. Update quantity. You can just [154:12] read it. This is some type declarations. [154:16] Toggle purchased, remove item and [154:19] finally clear purchased. Now within this [154:22] state, we are going to create all these [154:24] files. Since we pass this as a generic, [154:27] if you press control space, notice how [154:29] we get all these fields. It is type [154:31] safe. So first off I'll say items by [154:35] default will be an empty array and once [154:38] we fetch them we are going to update [154:40] this state. Then we'll say is loading [154:43] initially it could be I think false [154:48] and error could be equal to null. Then [154:51] we're going to create our methods. So [154:53] for now I'll say load items. Let's say [154:56] this will be an async method. [154:59] For now I'll just leave it empty. And [155:01] let's build the rest so that we don't [155:03] get the errors or warnings. Let's [155:07] actually build this one. Just forget [155:09] about the this like red lines. [155:13] Typescript says you need to add all [155:14] these methods into right here. And here [155:18] I will actually add it so that we can [155:20] get rid of these warnings. So I'm just [155:22] going to let AI to complete it. Okay. So [155:25] we add all these methods and TypeScript [155:28] is not complaining. And let's get [155:30] started with the load items method. Here [155:33] we would like to update the loading [155:35] state. Let me kill AI so it is not [155:37] really confusing. [155:40] So we'll have a try and catch block. But [155:43] before we do anything else, we would [155:45] like to update the loading state. And [155:47] this is how we can do it. You're going [155:49] to call the set method. And the states [155:52] that you would like to update, you would [155:54] just pass them. So I would like to make [155:56] the loading state to be equal to true. [155:58] And I'll say error should be equal to [156:00] null because we are just trying to fetch [156:02] something. And then we can say just call [156:05] the API items endpoint with the fetch [156:09] method and we're going to get a response [156:11] back. And then we can say const [156:13] something like payload or data. Let's [156:16] just say res.json. [156:18] Now type is equal to any as you can [156:21] tell. So for that reason I'm going to [156:22] wrap this with the brackets and I'll say [156:25] as items response. Now if you hover over [156:28] it this is type safe right? It knows the [156:31] type. Then we'll say if you know [156:34] response is not okay. Then we can throw [156:39] I'll just copy and paste never mind. [156:43] So throw new error request failed and [156:45] just put the status. And in the else [156:48] case, if we don't have any errors, we [156:50] are going to update the items array. [156:52] We'll say payload dot items. Okay, so [156:55] that's how easy it is to create a [156:58] method. And under the catch, we can just [157:01] add a console log for debugging [157:03] purposes. And for the error state, we're [157:06] going to say something went wrong. And [157:08] finally, [157:11] as you can imagine, we're going to say [157:12] the loading state should be equal to [157:14] false. either we succeed or we fail. [157:18] Eventually is loading state will be [157:20] equal to false. Now if you wanted to [157:22] call this method, you already know it [157:24] like how to do it. You would go into a [157:27] file in this case under the root layout [157:30] and you would just import this hook. [157:32] Let's say use grocery store. And let's [157:36] say here you would like to get the load [157:39] items, right? And you can call it under [157:41] a use effect. So, I'm just going to go [157:43] here maybe right after the tint color. [157:48] I'm going to say use effect, initialize [157:51] it. [157:53] We only want to run this once, right? [157:55] So, I'm going to say call the load items [157:58] and that should be it. I will save this [158:02] and let's get the items as well. [158:05] And I'm going to console log the items. [158:07] So, let's say items. [158:10] Let's just add an emoji to make it [158:12] obvious. [158:20] Okay. So, as you can tell, we have the [158:23] items. It's fetched and we can see it [158:25] under the terminal. [158:29] And this is actually what we're going to [158:31] have right here. Let's go under the [158:34] grocery store and build the rest of the [158:36] methods so that we can use them easily [158:39] later in the video. So here I'll get [158:42] into the add item method. [158:45] So we're going to say first off set the [158:47] error state to be equal to null and then [158:50] I'll say try and catch block. Under the [158:53] try we're going to call let me just say [158:56] con res. We're going to call the fetch [158:59] method by passing our endpoint which is [159:02] API slash items and if you remember we [159:05] had a post request right so right here [159:09] we have a post method [159:13] and we need to pass it as an object so [159:15] we'll say method it'll be equal to post [159:18] then we can say headers will be [159:20] application JSON [159:23] and then we'll say body we'll say JSON [159:29] stringify we're going to pass an object [159:32] and like once again I'd like to display [159:35] we're going to pass all these fields [159:36] right I'd like to copy and paste [159:40] so we're going to pass the name category [159:44] a quantity as well as the priority [159:48] okay so we're going to get a response [159:50] back just like above we're going to get [159:52] the payload type castes and we'll say if [159:56] response is not okay handle it like [159:59] throw an error but else we would like to [160:02] update our state. So I'm going to say [160:04] call the set method. Now notice how this [160:08] is the add item method. I'd like to show [160:11] you something. Let's say you add an [160:14] item. Once you submit that form, it [160:16] should be at the very top, right? Like [160:19] this is going to go down and it'll be [160:21] right here. So that means we're going to [160:23] keep all the items but on top of it [160:27] we're going to add the new one. So how [160:29] do we make that work? We're going to [160:32] call this and we can get the previous [160:34] state. So I'm just going to say give us [160:37] the state and then we're going to return [160:41] this object. [160:43] So we'll say items. It's going to be [160:46] equal to all the previous items. You can [160:48] just say state dot items and spread this [160:55] like this. Okay. So that's going to get [160:56] all the previous items but at the very [160:59] top we'll say payload dot item which is [161:04] the newly added one. I hope that makes [161:06] sense. Now we can just say return like [161:10] payload dot item. [161:13] Okay. Under the catch, we will add a [161:16] console log and we will update the error [161:19] state. So that's it for this method as [161:22] well. Once again, we update the error to [161:24] be null because we are just getting [161:26] started. Under the catch, we update the [161:29] error. That means something went wrong. [161:31] But under the try, we call our endpoint. [161:35] The method was posted. We add the [161:37] headers body and you know eventually we [161:41] update our state. we keep all the [161:44] previous items but at the very top we [161:47] added the latest created one. Okay. So [161:51] with this now we can go into the next [161:53] method which is called update quantity. [161:56] So user is going to pass the ID and [161:58] quantity from the client and then we can [162:01] get like a variable. I'm going to call [162:05] next quantity. [162:08] And let me explain what this will be. [162:11] Let's say we have like 12 different like [162:16] 12 eggs, right? If user press this one, [162:18] the next quantity will be 13, right? So [162:22] that's what we call the next quantity. [162:25] It's going to be equal to math dot [162:28] maximum either one or the quantity. And [162:32] you already know why we add this one [162:35] because if this is like - 10 or minus [162:37] one, we don't really want to get this. [162:39] it's going to get the one. Okay, so [162:42] that's the next quantity. Once again, [162:44] we'll say set error to be equal to null. [162:48] And I'm just going to copy and paste the [162:50] rest of it because it's very very [162:52] similar. The only difference here is [162:55] that the endpoint. Okay, so we pass the [162:58] ID so that we know which item that we [163:01] are updating. Then the method headers [163:05] pass this as the argument or the body [163:09] right handle the errors but else update [163:12] the state. So this has nothing to do [163:14] with React Native. This is basic [163:16] JavaScript and I hope you you guys [163:20] already know this. Okay. So for that [163:23] reason I'm not going to explain super [163:25] like in super detail. I'll just go into [163:27] this method. And once again I'd like to [163:30] copy and paste. This is just JavaScript. [163:32] Let me copy and paste and then we'll go [163:34] through it. [163:37] Okay. So, we will find the current item. [163:39] This is how we can get that. We're going [163:41] to call the get method and we're going [163:44] to get the items. So, that's our state [163:46] and we're going to find the item that we [163:49] just pass as the ID. So, let's say you [163:52] would like to update this one, right? [163:55] You press this button. You're going to [163:57] send the ID of this item to this method. [164:00] You're going to find the current item. [164:02] Then we have some validation checks. If [164:04] there is no item, we'll just return. We [164:06] are not going to do anything. And then [164:08] we're going to find the next state. If [164:10] it is equal to true or not, we're going [164:12] to negate it. Then we're going to call [164:15] our endpoint once again by passing this [164:17] field. Handle the errors and update the [164:20] state immediately. Now, this is not [164:22] updating the database, right? This is [164:24] updating the UI immediately. Okay. Um [164:29] then finally we have the catch block [164:31] where we handle the errors. So we will [164:34] do the similar thing for the remove [164:36] item. If you don't want to type this out [164:38] just grab it from the source code. This [164:41] is our endpoint method is equal to [164:43] delete and we just filter this item. [164:47] You know we just filter this out from [164:49] the UI. And then finally the clear [164:52] purchased method. Again, we're going to [164:55] call our endpoint pass the method and [164:58] that's it. So, I can already feel like [165:01] there will be some comments saying, "Hey [165:03] man, you didn't really explain this. You [165:05] just copy and paste it. You are not [165:07] really a good teacher." So on and so [165:09] forth. But this has nothing to do about [165:11] being a teacher. Like this is just basic [165:15] JavaScript code, right? And we have done [165:17] much more complicated stuff than this. I [165:20] have explained the very first two [165:22] methods so that you understand the flow [165:24] like the type casting calling the fetch [165:26] method handling the errors updating the [165:28] state so on and so forth. Um this is [165:31] basically like literally the same thing [165:34] nothing complicated. So I hope you guys [165:36] don't mind it that we copy and paste it. [165:39] Um with this I think we are completely [165:42] done with this file. The only thing we [165:44] left is to calling these methods. So we [165:48] are going to go let's say under the [165:50] insights screen [165:53] like right here when we press this [165:55] button we are going to call this method [165:58] right called clear purchased [166:02] or if we are under the planner screen [166:04] when we say create an item we will call [166:08] this method called add item. So that's [166:11] the only thing we left. We'll just build [166:13] some UI elements, write some CSS code, [166:16] and call these methods. So for that [166:19] reason, I'd like to leave the section [166:21] right here just to keep it simple and [166:23] not complicated. [166:25] I'll try to maybe like stage everything, [166:30] create a commit message, [166:36] commit that, and sync this up. And [166:39] hopefully in the next section we're [166:40] going to get started with the home [166:42] screen where we can fetch the items, [166:45] display them, and then we're going to [166:47] build the planner screen. Finally, the [166:49] insights. So with this, I'll see you in [166:51] the next section. Now, it is time to [166:54] build the list tab UI. It'll be easier [166:57] than what you think because all we have [167:00] to do is fetching the data and calling [167:02] our methods whenever we press one of [167:04] these buttons. So we'll just go into VS [167:07] Code and under the tabs. [167:11] We're going to find the index.tsx which [167:13] is our list screen. So I'll just change [167:16] the name to be equal to list screen. [167:19] That's not really important but you know [167:21] I'll just follow the conventions. I'm [167:24] going to delete everything that we have [167:26] in this component. Actually delete the [167:28] styles [167:30] and let's put them side by side. [167:34] And for now, let's even delete the style [167:37] because we don't have these styles. And [167:40] actually, instead of having having a [167:42] view, I will have a scroll view element. [167:45] Let's import it from React Native. Now, [167:48] as the name suggests, this is going to [167:50] allow you to have a view which is [167:52] scrollable. At the moment, that was not [167:54] really scrollable, right? But here, [167:57] since we're going to have bunch of [167:58] different items, you'll be able to [168:00] scroll through this screen. So we're [168:03] going to say scroll view. Let's say [168:05] class name of flex one. So it is taking [168:07] the entire space. We'll say bg of [168:11] background. And I will say petting y of [168:14] four. And I think that should be it. Now [168:17] within this we can add for now maybe [168:19] like a text. I'll say hey. [168:23] Once you save as you can tell we got [168:26] this text. Now I think we cannot scroll [168:29] it because we don't have enough content. [168:32] We will see it a little bit later in the [168:33] video. Now here you can add more props [168:37] like you can say shows vertical scroll [168:40] indicator. By default this is equal to [168:43] true but you can make it as false. So [168:47] whenever you scroll you are not going to [168:49] see an indicator right here. By default [168:52] it would be visible. I'll just hide it. [168:54] So I'll say false. Then you can add [168:56] something like content container style. [169:00] And here you can pass fields like [169:02] petting like all kinds of CSS fields. [169:05] I'll say petting of 20 from all [169:08] directions. I'll say gap of 14. And [169:11] let's just first get started with a [169:13] component called tab screen background. [169:21] Now this will be a self-closed [169:22] component. And let me show you which one [169:24] that is. As you can tell, we have some [169:27] circles, right? And this is something [169:29] that we will repeat in three of these [169:32] tabs under the list, planner, and inside [169:36] like they will all have the same [169:37] background. So instead of typing this [169:39] out every single time, I'll just create [169:42] this component. I'm going to copy the [169:44] name. Let's go under the components [169:49] where that is. Okay, it's right here. So [169:51] I'm just going to create this file and [169:54] I'll say tsx. Now, this has nothing to [169:57] do with React Native other than some CSS [170:00] files or CSS classes, I would say. So, [170:04] I'm just going to copy and paste from [170:06] the source code and let me walk you [170:08] through it. So, since we have two [170:10] different children, we wrap it with a [170:12] fragment. [170:14] Then, we add some classes into this [170:16] view, which will be on, you know, like [170:19] this position, left top, [170:22] it is this one. Then we have the one on [170:25] the right [170:27] and we say pointer events of none. So [170:30] user cannot really select it. So that's [170:32] it. Just CSS, no logic at all. I'm going [170:35] to save this. Let's try to import it. As [170:39] we can tell, we have this one. But where [170:43] the hell is the other one? [170:45] Let's go into dark mode. Is it even [170:47] visible in the dark mode? [170:52] Yeah, we cannot even see it on the dark [170:55] mode. Why this is the case? Left [170:59] top. Um, maybe I'll just reload my app. [171:02] Let's see if this is the case. Yeah. [171:03] Okay. So, once you reload, it's right [171:05] here. Maybe that was a stupid bug. Now, [171:08] other than this component, we are going [171:10] to build a list hero card, which is this [171:15] one. So, let's try to create that one. [171:18] We are going to call it right here list [171:21] hero card. [171:25] We will create it under the components. [171:28] Now instead of putting it randomly, I'm [171:30] going to create a folder called list. So [171:33] we're going to put all components that [171:35] is belong to this tab under this folder. [171:39] So I'll say tsx. [171:42] Let's say we're going to call RNFE [171:46] and give a bit space. I will call my [171:50] store get the items because we're going [171:53] to use some values. Now I will say items [171:56] do filter. [171:58] We're going to find every single item [172:01] and we'll say if item is equal to [172:03] purchased just get the length of it. [172:06] Okay. So this is going to give us the [172:09] amount of completed items. So I'll say [172:13] completed count. Then we'll say the [172:16] pending count and we can calculate it [172:19] just by saying the entire items length [172:22] minus completed count. Right? And [172:24] finally we are going to calculate this [172:28] rate [172:29] so that we can put this progress bar. If [172:32] it is done completely this would be [172:35] 100%. If it is zero, it would be right [172:37] here. 50% so on and so forth. And this [172:42] has some basic math calculation. I'll [172:45] just provide it to you. This is how we [172:48] can calculate it. I'm not going to go [172:50] into the details. You can just take a [172:52] look at it. All right. Here we will [172:54] return a view. Let's say class name [172:57] rounded of 3x large. [173:01] Then I'll say background of primary [173:03] padding of five from all directions. And [173:05] then we'll have a text which will say [173:08] today. Okay. So this is what we're [173:10] building. I'm going to copy and paste [173:14] just like this text small font semi bold [173:18] uppercase it. Add some tracking. And you [173:21] might be asking what is tracking? It's [173:23] basically letter spacing. And here we [173:25] are using one pixel. Then text primary [173:28] foreground that's the color and we will [173:31] add some opacity. So that's it for the [173:33] text and right below that we will have [173:36] your grocery board which is this text. [173:41] So I don't want to waste any time by [173:43] typing this out like it's very stupid to [173:46] type this out. I hope you don't mind it. [173:48] Then right below it we're going to put [173:50] the pending count count as well as the [173:53] completed. So, I'm going to paste this [173:56] in. And finally, we're going to have [173:58] that progress bar. Now, you might be [174:01] asking, how do we calculate the width? [174:03] Well, basically, we'll say width, which [174:05] is equal to this value, and then the [174:08] percent sign. So, this is just CSS. [174:11] Let's go here, import it, and take a [174:14] look at the end result. [174:18] Okay. So, looks like I don't know if you [174:20] can see it from the video, but we have [174:23] eight pending and two completed. [174:27] And like that's the code. That's the UI. [174:31] Just imagine if that was equal to 100, [174:34] it would be filled, right? If it was [174:36] zero, it would not be filled. So, we got [174:39] the point. Let's just say 50. Okay, [174:43] I'll just bring this back. And that's it [174:46] for this component. Right below it, what [174:49] are we going to have? I think we can add [174:51] this text. [174:54] So instead of having this as a [174:56] component, I'll just put it right here, [174:59] right after the list hero card, [175:04] import the view as well as the text from [175:08] React Native. And here we say pending [175:11] items.length. [175:12] So, we can get this from our custom [175:15] hook. And I think we don't really need [175:17] this. So, I'm going to delete them. [175:21] Say const items. Grab it from use [175:25] grocery store. And we can get the [175:28] pending items. [175:32] Let's say items. [175:36] Where the item is not purchased. [175:41] So this is going to give us the amount [175:44] of pending items [175:48] just reload. As you can tell we have [175:50] eight active which means that we need to [175:53] complete that. Now right after this view [175:56] we are going to get every single item [175:58] and for each we are going to you know [176:01] return a card and we are going to create [176:04] this as a component. First, I'd like to [176:06] say pending items do map for every [176:09] single item. We're going to call this [176:12] component. Let's say pending item [176:17] card. And here we can pass the key. [176:24] So, I'm going to say item do ID and we [176:28] can send the item as well. [176:32] So, once I save, it's going to format [176:34] it. And I think we have an error. Let's [176:37] try to fix that. So basically it says [176:40] you don't have this component. So we [176:42] will create it under the components [176:44] under the list. [176:47] Let's say tsx rnf. [176:52] And wait, we'll just try to import that. [176:57] Okay. So as you can tell for every [176:59] single pending item, we have this [177:01] pending card component. Now let's go [177:04] ahead and make this type save. First [177:07] we'll say we're going to get an item. [177:10] And here let's say item what is the type [177:12] of it? I think we already have the type. [177:15] So we will just say something like [177:19] this was called grocery item. [177:24] Okay. Now here we will call our store. [177:29] We will get the let me just import that. [177:32] Okay. I'll zoom out so you can see it [177:34] clearly. We're going to get the remove [177:36] item method update quantity as well as [177:38] the toggle purchased. Now I will give [177:41] you two different objects. The first one [177:44] is priority pill background. So notice [177:48] how depending on the priority the [177:50] background color updates right. So if it [177:52] is high it's in this red color so on and [177:55] so forth. And this is how we can map [177:58] that. We will be using it. And then same [178:01] for the text. [178:04] And let me zoom in. So these are the [178:07] class names that we're going to be using [178:08] in a second. [178:11] Here for the view, I'll say class name [178:13] rounded of 3x large. And let me actually [178:16] get the classes. 3x large. Give it a [178:19] border. This means like one pixel. [178:22] Background of card. Padding of four from [178:25] all directions. I'll save. And within [178:28] this we'll have another view. This will [178:30] get some classes as well [178:33] like we'll say flex of row item start [178:36] and gap of three. So basically we are [178:38] building this entire thing. We say flex [178:41] of row so that everything is side by [178:43] side. That's the first item that's the [178:45] second one and that's the third one. And [178:48] we just give it a gap. So it's the gap [178:50] this one and that one. Right? And we say [178:54] items of start. So this is not like in [178:56] the middle but it is at the top right [178:59] just like this one. So that's pretty [179:02] basic CSS but still I wanted to mention [179:04] and as soon as you save you're going to [179:06] see something. Now within this view we [179:09] are going to have a pressable and this [179:11] is going to be the first button which is [179:14] this one where we can toggle the state. [179:18] So I will go right here. [179:22] I will get the pressable element [179:26] imported from React Native and we're [179:28] going to give some classes. [179:31] So I will say class name paste this in [179:34] where we have margin top of one. We give [179:37] width and height of six and in tailwind [179:40] you can shorten this just by saying size [179:42] of six. If they're the same thing you [179:45] can just say size and whatever the value [179:47] is. Then we center like center with [179:51] items justify make it a circle and give [179:54] the border of two. Then we can also [179:56] update the background color or maybe the [179:59] border color. So I'll say border of [180:02] border which means like one pixel and [180:04] we'll say background of card. [180:08] Okay. So I think this is yeah that's the [180:13] border color not border one pixel. [180:18] Now within this pressible whenever we [180:20] press this we'll say on press [180:25] and we're going to call the toggle [180:27] method. So we will say call the toggle [180:30] purchased and pass the item do ID [180:34] and as for the content we can put an [180:37] icon getting from font awesome. [180:42] Let's import this from expo icons. [180:48] Okay. Now we can save. [180:51] Um like we already have the check marks [180:55] but we don't really want to see the [180:56] check mark because [180:58] um yeah I think we don't really want to [181:00] see it because it's not done. That's the [181:02] pending items. So for the content you [181:05] can leave it empty. Now if you click to [181:07] one of them it would be purchased. Like [181:09] I'm going to click this one. As you can [181:11] tell UI updates let's press this one. It [181:14] is just gone. Right. Now for the [181:17] content, let's try to put something [181:20] right after the pressible. We'll have [181:22] another view and we'll get the class [181:24] name flex one. So it is taking the [181:27] entire remaining place. [181:30] Then we'll have a view with some text. [181:33] So I'm going to copy and paste. Let me [181:35] get the text element from React Native. [181:40] I'll maximize the screen. [181:43] Zoom out. So this is what I just copied [181:45] and pasted. We have a view with the [181:48] text. It shows the item name. Then we [181:51] have another view that shows the [181:53] priority. Okay. So it's like pretty [181:55] simple. We get the item priority. Use [181:58] this object to get the class name. [182:03] And that's the end result. [182:09] Okay. So for some reason classes are not [182:11] working. Let's just reload the app. Is [182:14] it going to fix it? Yeah, as you can [182:16] tell now, it's been fixed. [182:18] Now, right after this view, so after the [182:21] flex one, shrink this one. Go below it [182:24] and paste this part, which will display [182:27] the item category. [182:30] As you can tell, it is right here. We [182:32] can see it if it is snacks, pantry, [182:34] bakery, so on and so forth. And then [182:38] right below to this view, we'll have [182:40] another view. Let's say class name [182:43] margin top of three flex of row. So they [182:46] are side by side item centered gap of [182:50] two. [182:54] And as for the content we're going to [182:56] have a pressable which is going to [182:58] update the quantity [183:00] and this will get the minus icon. Let me [183:03] import the font awesome. [183:10] Okay. So, as you can tell, we got the [183:12] minus. If you press that, what'll [183:14] happen? It's going to call the update [183:16] quantity method by passing the item ID [183:20] as well as the quantity minus one. Now, [183:23] if we take a look at the end result, [183:25] you're going to see that we will have [183:26] the actual quantity and then the plus [183:29] sign. Let's try to build it. [183:32] Right after this pressable, we will have [183:34] the item quantity as the text and then [183:37] finally another pressable [183:40] which is going to be plus icon. And if [183:43] you press it's going to increment by [183:45] one. Now for some reason border color is [183:50] like black. Maybe this should be border. [183:55] Yeah, I think I'll go with the border [183:58] instead of input. [184:00] Okay. So let's try to press this plus [184:03] icon. Is it going to work? Yes. After [184:06] like 1 second, it's been updated. Let's [184:08] press again. It updates the database as [184:11] well. You can press minus again again. [184:15] And now if you press once again, it's [184:17] not going to be zero because at minimum [184:20] we get one, right? If this is equal to [184:23] like minus sorry 1 minus one which means [184:27] zero. It's going to get the maximum [184:29] value which is one. [184:33] Okay. Same for this one. But this is [184:36] just plus so it can go until infinity. [184:40] Okay. What else do we miss? I think [184:44] that's the delete button. Let's put it [184:46] right here. [184:48] So I think after this view we will go [184:51] ahead and even after this view so just [184:55] click above these two views we're going [184:57] to have one pressable which will get the [185:00] trash icon and if you press that we are [185:02] going to call the remove item by passing [185:04] the ID. [185:06] Let me just say reload this app [185:11] so that the background is working. We [185:13] got the background destructive. Let's [185:16] try to delete one of them. And just [185:17] before we delete, I'll go into my [185:20] database. [185:22] So, I'd like to show you that it is [185:24] actually updating the database as well. [185:31] Okay. So, I think I just made a mistake. [185:34] Let's say we would like to delete the [185:36] dark chocolate, right? At the moment, [185:38] quantity is one. Before I delete, I'm [185:41] going to increment this. It's been two. [185:44] Let's refresh. [185:46] Dark chocolate is now two. That means [185:49] plus is working. Let's say minus. [185:52] It should be go back to one. It's two. [185:55] Let's refresh. It's one. Now let's try [185:57] to delete. [186:01] So UI has been updated as you can tell. [186:04] Now it should be gone as well. So [186:06] everything is working as expected. Now I [186:09] know that we copied and pasted some [186:12] stuff which was just styling and not [186:16] really any logic. Okay, I hope you don't [186:19] really mind it. We just like we are [186:21] trying to understand how everything [186:23] works rather than typing everything like [186:26] step by step doing item centered justify [186:30] centered so on and so forth. We don't [186:32] really want to waste too much time. [186:34] Let's double check this in the light [186:36] theme as well if the colors are correct. [186:40] Okay, so I think that looks pretty cool. [186:42] Now I said we are using scroll view [186:44] element and [186:47] like I just wanted to show you this. [186:49] Let's say true. If that's equal to true, [186:52] notice how we have the scroll indicator, [186:54] right? [186:56] Okay. And we have gap of 14. Let's just [187:01] say zero. What happens? like every item [187:04] is just squished, right? We would like [187:06] to give some gap. You can make it [187:09] excessive, but doesn't make any sense. [187:11] So, we'll just say 14. You can add the [187:14] padding. Let's just delete it just to [187:16] see what that does. Basically, from all [187:18] directions, we give the padding. Right. [187:22] And I'd like to make this to be false. [187:24] If you wanted to, you can keep it as [187:26] true. Now in this screen, the very last [187:29] thing that we would like to have is [187:31] going to be the completed items because [187:33] at the moment we can only see the active [187:35] items. So I'll I'll just create a [187:39] component called completed items. [187:42] Call this and let's try to create it [187:46] under the list. Sorry, under the [187:48] components under the list, let's say.tsx [187:52] RNF. [187:54] Save it. Let's try to import that. [187:59] Okay, now this will be easier than what [188:02] you think. Basically, it'll have almost [188:04] no logic at all, but just some UI [188:07] elements. We're going to call our hook [188:11] or the store, whatever you would like to [188:13] call it. We're going to get both of [188:15] these methods and we're going to get the [188:17] items so that we can check the completed [188:21] items. So, we're going to filter this [188:23] out. we will only get the purchased [188:25] items and we can say if there is nothing [188:29] right if the length is equal to zero [188:31] we'll just return nothing but else we [188:34] can return this view let me give you the [188:36] classes [188:38] and then for the text we're going to say [188:40] completed [188:44] which is this part now we will display [188:47] every single item so I'm going to say [188:49] completed items do map for every single [188:53] item. We can return this element. I'm [188:56] going to say return a view. [188:59] Let's give it a key which will be item [189:03] do ID and then class name. I'm too lazy [189:06] to type this out. Let me provide this to [189:09] you. [189:11] Okay. So, as you can tell, we got the [189:13] completed items, but it doesn't have any [189:15] content. So, let's try to build it. [189:18] We'll have view class name flex of row [189:21] item center it gap of two within this [189:25] we're going to have a pressable [189:28] and like let's just copy and paste once [189:31] we see the end result I'll explain let's [189:34] get the font awesome [189:37] let's save [189:39] okay so why it's not visible [189:44] let me maybe just say background red of [189:47] 500 it. Okay. So, here we can tell [189:50] that's the check icon. When we press [189:54] this, it's going to call the toggle [189:56] purchased method by passing the ID, [189:59] right? ID of the item. And I don't know [190:02] why BGS success did not work. Maybe we [190:04] don't have that class. So, we have but [190:08] for now they say primary. Okay. I think [190:10] that looks cleaner. Let's see if it is [190:13] working in the dark mode as well. [190:18] Okay. So, I'm going to leave it as [190:20] background primary. And here, let's just [190:22] try to press one of them. It should [190:25] update the UI. Okay. After like once it [190:28] updates the database, it'll also update [190:30] the UI. Okay. Let's put the rest of the [190:33] content. So, right after the pressible, [190:36] we'll have the text where we can display [190:38] the item name. [190:41] Just like this. It says tomato sauce. [190:44] I'm going to click to it. [190:46] Once it is unchecked, we can see it. [190:49] It's right here. I'll press it again. [190:51] Now it is right here. Bananas, it's [190:54] right here. [190:56] Pasta, pasta, however you call it. It's [190:59] right here. Okay. So, what else we are [191:02] missing? Maybe one more pressible where [191:04] we can put this into trash, [191:11] which is right here. So, I'll press this [191:13] one. Tomato sauce should be deleted from [191:15] the database. Now since we are not doing [191:18] anything after the await, we can [191:21] basically delete it. Delete the async as [191:23] well. Delete the curly braces. Just make [191:26] it a single line. [191:29] Okay, I'll do the same thing right here. [191:36] It should be like this. Can delete async [191:40] and it should be working out as well. So [191:42] I'll press pasta, [191:45] bananas, [191:48] and Greek yogurt. Now, as you can tell, [191:50] progress is equal to zero. Let's try to [191:52] add all of them. Like it just updates, [191:56] and we can delete any of them as we [191:58] wish. Now, with this, we are actually [192:01] pretty much done with the entire list [192:03] screen. But there is one thing that I'd [192:06] like to talk about. So in the past when [192:09] we did the comparisons I said that [192:11] instead of using items.m mapap in react [192:14] native we use a component called flat [192:17] list. Now of course you can still use [192:19] items.m map which is fine if you have a [192:22] small list but here in this example just [192:25] imagine that you're going to have 100 [192:27] different items. You don't really want [192:29] to use items map. Instead flat list [192:33] would be a lot more performant. And let [192:35] me explain why. [192:38] I'll just go into the diagrams. [192:41] Let's find the screen. Okay. So here [192:43] when you do items.m map just imagine you [192:46] have 100 items. Okay. It's going to [192:49] render all of them even though you can [192:51] only see five items, right? So the rest [192:55] will be still [192:57] rendered like 100 items. Just imagine [193:00] even though you cannot see it, it is [193:02] rendered. But if you use flat list, it's [193:05] going to only render the five of them, [193:07] right? And as you scroll to the bottom, [193:10] it's going to render more and more, [193:12] which makes it a lot more performant, so [193:14] it doesn't use extra memory. Okay, now [193:17] let's see how we can make this exact [193:19] same thing by using flat list. I'm going [193:22] to copy this and paste it as a comment [193:26] below. So I'm going to say first version [193:30] with items do map [193:34] so that you can have it in the source [193:36] code. [193:39] Okay. So I will paste this as a comment. [193:42] And now we'll be building this with flat [193:44] list. [193:46] So here basically I'm going to delete [193:48] the map and instead we will use the flat [193:51] list item. Let's get it from React [193:53] Native. And [193:56] yeah, I think right here I'm going to [193:58] say class name of maybe like flex of one [194:02] or do we really need it? Like for now [194:04] I'm going to delete the class name. [194:06] First off, we'll just say data. The data [194:08] that we would like to map through which [194:10] are the pending items, right? So we'll [194:13] say pending items. For every single [194:15] item, we can just add the key extractor. [194:19] This is just like adding the key in [194:21] React. Let me display pretty quickly. So [194:24] when you say key item do ID it's the [194:27] similar thing or the same thing you [194:29] would just say get every single item and [194:33] pass a unique thing like ID and then for [194:37] every single item we're going to call [194:39] render item method [194:41] here. This will be an arrow function [194:44] let's say and you can grab the item. [194:47] There is also two different fields like [194:49] the index as well as these separators. [194:52] So here we will get every single item [194:54] and for each we will return the pending [194:58] like this component pending item cart [195:04] and we're going to pass the item. [195:06] Okay. So let's try to save and see the [195:09] output. Looks like it is working but the [195:12] gap is not there right. So we can add [195:15] the gap just like here. I'm going to [195:17] copy it. [195:19] Paste it right here. So, we got the [195:22] padding as well as the gap. Now, notice [195:25] how this has extra padding because we [195:28] have it right here as well. I'm going to [195:30] delete that. [195:32] Now, this part is not working. So, [195:35] instead of having all these items, we [195:37] will actually delete everything and put [195:39] it under the flat list. So, it's going [195:41] to make sense. I promise. Let's delete [195:43] everything and have only flat list item [195:47] because flat list is much more complex. [195:50] only then these props you can add the [195:53] header component footer component and [195:56] empty state so on and so forth so I'm [195:59] going to save this for now that's what [196:02] we got but how do we add this header [196:04] component so you can literally just say [196:07] list header component and you can do the [196:10] same thing for the footer so you can say [196:13] list footer component and for the footer [196:16] we had completed [196:19] items section. [196:27] Okay. So, looks like we cannot import [196:29] it. I don't know why. I'll get it [196:31] manually. [196:35] Okay. Like this is kind of buggy right [196:39] now. I'm going to say reload window. [196:41] Sometimes VS Code just gets really [196:43] stupid. [196:45] Okay. for the list header [196:49] like so annoying. Why can't you see [196:52] this? We have completed [196:55] items, not the section. My bad. [197:06] Okay, we got the completed items. Let's [197:09] add the header now. So for the header, [197:12] I'm going to return a view element. [197:17] And this will get the style. [197:20] Let's just say gap of 14. [197:28] And then we can add all these components [197:30] that we just had like the tab screen [197:33] background. We're going to get the list [197:36] hero card. AI is kind of annoying. Let [197:39] me kill that. [197:47] Okay, so we're going to get the list [197:49] hero card element. Then we can get that [197:52] text we just had. And that should be it. [197:57] Let's get the text element. Now once I [197:59] save everything will make sense. So [198:01] that's almost the exact same UI that we [198:04] had couple of seconds ago. Right now one [198:06] thing that we are missing is the class [198:08] name. So we can just say class name flex [198:11] of one. So it is taking the entire space [198:13] and then we can update the background [198:15] color. [198:17] Now that's been fixed. And the other [198:20] thing that we are missing is that this [198:22] element is sticky to the status bar. [198:26] Right? So to fix this, we can add this [198:29] option called content insert adjustment [198:32] behavior. And I'll just say automatic. [198:35] Now, as you can tell, I'll reload it as [198:37] well. [198:39] By default it is not like it's not [198:41] overlapping with this element. So it is [198:44] like working nicely. It is kind of like [198:47] safe area view. So with this we have the [198:50] exact same output just like the first [198:52] version. So instead of using a scroll [198:55] view and putting everything from like [198:57] top to bottom what we have done is [199:00] putting a flat list instead of using map [199:03] then we have the footer element which is [199:06] completed items. So after this list we [199:08] have our footer element and above this [199:11] list we have the header element which is [199:14] this part. So I hope you're able to see [199:17] this like we have the header component [199:20] which is the background [199:23] which is also the list hero card the [199:27] text then we have our flat list which is [199:30] our list of items. Then we have the [199:33] footer component. Now we can add more [199:35] things like what happens if this is an [199:38] empty array, right? Like you don't see [199:40] anything for the list. So you can just [199:43] say list empty component. You can return [199:46] maybe like a text. Let's just say like [199:50] no items in database. That's what you [199:54] would see right here. And of course you [199:56] could make this a lot more complicated [199:58] like a very nice not found UI. But you [200:01] got the point. I'm going to delete this [200:03] part [200:05] and let's just say get the pending [200:07] items. Okay. So overall with this flat [200:10] list element now our application is a [200:13] lot more performant than using it in [200:15] this way with items.m map. Okay. So I [200:18] hope that makes sense. That's how we use [200:20] the flat list element. You can double [200:22] check this from the React Native [200:24] documentation if you're interested. It's [200:27] a flat list React Native. And I think [200:30] they built even a better version of it. [200:32] Like on top of flat list, you have [200:34] legend list. I'm not going to get into [200:37] the details, but you can take a look at [200:39] it as well. Just know that something [200:41] like this existed. And there's also, I [200:43] believe, flash list. Yeah, if you're [200:46] interested, just take a look at all of [200:49] these options. [200:51] So, with this, I will go ahead and stage [200:54] all of our changes. In this section, we [200:56] completed the list tab. In the next one, [200:59] we're going to build the planner. And [201:01] then finally, we're going to build the [201:03] inside screen. [201:05] Okay. So, I'll just stage everything, [201:08] get a commit message. [201:11] Oops. And then we're going to commit [201:12] this. Finally, we will sync this up. [201:18] Okay. So, with this, hopefully I'll see [201:20] you in the next section. [201:22] So, this is where we left. In this [201:24] section, we would like to build the [201:26] planner screen, which is going to look [201:28] like this. So, we're going to have a [201:30] card. We're going to display some stats. [201:33] Then, we'll have an hero image and then [201:35] a form where we can create an item. So, [201:39] let's try to build it from top to the [201:41] bottom. For this, we will visit the [201:43] planner file which is under the tabs. [201:47] Before we build the UI element, let's [201:50] try to get our store because we will be [201:52] using the items. So let's give a bit [201:55] spacing. We are going to import this. [201:58] And from the items array, we are going [202:00] to calculate three different values. So [202:03] the the count of pending items, the high [202:07] priorities as well as the total units. [202:10] Like here we have 12 + 2 + 1. In total, [202:15] that's going to be the total units. [202:18] Okay. So, from the items, I'll just say, [202:21] go ahead and filter the items that are [202:24] not purchased and just give us the [202:26] length. Okay. Super basic JavaScript. No [202:29] need to type. Just copy and paste and [202:32] explain. Okay. Same thing right here. [202:34] We're going to get the high priority [202:36] count. We'll say find every single item [202:39] which is not purchased and priority is [202:42] equal to high and just get the length. [202:44] Finally, we're going to get all the [202:46] items, you know, for the total quantity. [202:49] So, we're going to get every single item [202:51] that are not purchased. Then, we can use [202:54] the reduce method on top of it. Starting [202:57] from zero is going to calculate how many [203:00] total like how many items we have in [203:02] total. Okay, so that's it for the [203:05] variables. Now let's get into the return [203:07] statement. Instead of just having a [203:09] view, this should be a scroll view [203:12] element so that we can scroll through [203:14] this element [203:16] or this page. So I'm going to add some [203:18] classes like I'll give flex of one. It [203:20] is taking the entire space. We're going [203:22] to say bg should be background and maybe [203:25] petting y of four. Now let's try to save [203:28] what we're going to get. Okay, so this [203:30] is working. But now we have this problem [203:33] where the content is overlapping with [203:35] the status bar. We can fix this. One of [203:38] the previous solutions that we have seen [203:40] was save area view. But now we are going [203:43] to be using a different solution with [203:45] the scroll view element. So you can say [203:47] content adjustment behavior and you can [203:50] set it to be automatic. [203:52] Once you save, notice how it's fixed. So [203:55] just keep this in mind. Maybe you can [203:57] take it as a note so that you don't [203:59] forget that. Then we can say shows [204:02] vertical scroll indicator. If you wanted [204:04] to, you can leave it as true, but I'm [204:06] going to leave it as false. And finally, [204:09] I'm going to leave some paddings and [204:11] gaps by using content container style. [204:15] Notice how we got the padding from all [204:17] directions. Instead of having a text, [204:20] I'm going to get the tab screen [204:22] background. So this is something that we [204:24] built in the past where we will get [204:27] these decorative elements. Now I'm going [204:30] to have a view. This will be our card. [204:33] As you can tell, we have a card, right? [204:37] So I will go ahead import the view from [204:40] React Native. And I'll just give some [204:42] class names [204:44] like gap of four, rounded 3x large, [204:47] border, border color, the background [204:50] color, and padding from all directions. [204:52] Now it doesn't have any content. So [204:54] let's have another view within this. Let [204:58] me format it. [205:00] So this will get a class name. Let's say [205:03] flex- row items start. [205:07] And then I'll say justify between. Now [205:09] here we will have like maybe two [205:12] different items. Something on the left [205:15] and something on the right. [205:18] Within this, I'll just get the left hand [205:21] side first. Let me paste this in. And [205:24] we're going to get the text element from [205:26] React Native. [205:29] So, as you can tell, this is what we [205:32] have. But now, right next to it, we need [205:34] to put the icon as well. For this, I'll [205:36] be using Font Awesome. Let me import it [205:39] from Expo Vector icons. Once you save, [205:43] that's the output. Now, this doesn't [205:46] have any logic. Please feel free to [205:48] pause the video and read it. We just [205:50] have some CSS classes and magically it [205:53] works, right? It's not really magic, but [205:55] just some CSS classes. Okay, so what [205:58] else are we going to do? Right after [206:00] this font awesome and after these two [206:03] views, just go here still within this [206:06] one, we're going to have another view [206:08] element. So this will be the second part [206:12] where we have our stats. [206:15] This is going to get the class name. [206:16] Let's say flag dash row gap of two. And [206:21] then this will have one more view. I'll [206:23] give you the classes. [206:26] So this will get things like flex of [206:28] one, rounded to 2x large, border, [206:31] background color, and padding from all [206:33] directions. First off, we're going to [206:35] have the pending text [206:39] just like that. But now we need to put [206:41] the actual stats, right? which is [206:44] something that we calculated right here. [206:46] So, we'll get the pending count and put [206:48] it right here. Now, this is only one of [206:52] the cards, right? We would like to [206:53] duplicate it. [206:56] Is it this one? Yeah, I think it should [206:58] be this one. I'm going to paste it once [207:00] again. That's what we got. Let's paste [207:03] this once again. And then we'll just [207:05] update the values. So, here we'll say [207:07] high priority. [207:11] Then we can use that variable. [207:14] Here we will use I think the units. How [207:17] did we call it? Total quantity. [207:26] Okay. So these are the stats that we [207:28] have in this screen. Let's try to go [207:31] right below to this text and after these [207:34] two views and I think even after this [207:37] one. So just above the scroll view, [207:39] we're going to have an element called [207:41] planner hero image [207:45] and I will create this under the [207:48] components. Now just like what we have [207:50] done under the list screen, I will [207:53] create a folder for the planner just to [207:56] make my codebase a little bit more [207:57] organized. And within this I will create [208:00] this file [208:02] and I'm going to say rnf. [208:05] Now, here we will be using an image. You [208:08] can grab this from the source code. Just [208:11] head over to the assets. [208:13] Under the images, you're going to see an [208:15] image called I think hero.png. So, I'm [208:19] going to install it and paste it right [208:21] here. [208:23] Now, within this component, we would [208:25] like to use that image. First, I'll get [208:27] some imports like we are going to get [208:29] linear gradient from expo. And let's try [208:32] to first install it. So you can search [208:34] for expo linear gradient [208:38] and from here you can copy the command [208:41] and paste it into your terminal. So I'm [208:43] going to kill this, [208:46] clear it and paste this in. So it's been [208:49] installed and let me explain why are we [208:51] using this component in the first place. [208:54] So if you just add the image by itself, [208:56] it works nice but it is too bright. I [208:59] don't know if it is visible from this [209:01] screenshot, but there is a linear [209:03] gradient like kind of like a black fade [209:06] in from the top and from the bottom. And [209:09] this is what we'd like to implement. You [209:11] can take a look at the documentation in [209:13] detail how they use it, but I'll try to [209:16] explain as quickly as possible right [209:18] here. So, first off, I want you to visit [209:20] the source code, find this file, and [209:23] grab the content. It's nothing [209:25] complicated. We just have one image. And [209:28] let's try to import this. By the way, [209:32] we need to run our application. [209:36] Let's run this. And then I'll explain [209:38] what we just done. [209:44] Okay. So, I think we got some warnings [209:46] that we're going to fix like why this [209:49] did not did not work. Let me kill the [209:52] terminal. I'm going to say clear this [209:54] up. [209:58] Okay. So, I'll just say clear and maybe [210:00] I'll say mpx explore run iOS. Maybe we [210:04] need to rebuild our application. Did we [210:06] had a warning? [210:10] Yeah, I think we need to like rebuild [210:12] it. Let's wait for this to be completed. [210:14] And while this is building, I can [210:16] explain what we have just done. So, [210:19] first off, we created created this [210:21] parent div which is this one. So we give [210:24] some classes to get rid of the overflow, [210:28] make it rounded, so on and so forth. And [210:30] then we have our image where we get it [210:32] from the images folder. But that's the [210:35] important part. So we give gradient from [210:38] the top and then from the bottom. So we [210:41] can add things like the colors. In this [210:43] case, we have a black color that is fade [210:47] out and we go to transparent. So from [210:50] black to transparent. And then you can [210:53] add the start position, the end [210:55] position, and then the style. And by the [210:58] way, the build is done. As you can tell, [211:00] now it is working correctly. So I'll try [211:02] to delete both of these gradients. [211:06] Notice how it immediately updates and [211:09] like UI difference is visible. Image is [211:12] too bright in this case. So we add the [211:14] linear gradient. Now this is kind of [211:16] like fade out and it's looking a lot [211:18] more cleaner. Now just to show you how [211:21] this work, let's say the first color [211:23] will be red, the other one will be blue. [211:26] So notice how it starts from red and it [211:29] goes up until like the blue color. But [211:32] when you use black and transparent from [211:35] here, it goes like from black to [211:37] transparent. Okay, so it's pretty clear. [211:39] Let's just make this to be maybe 0.9. So [211:42] it is more visible as you can tell. [211:46] Like let's just delete the alpha value. [211:48] It's completely black and it goes until [211:51] like the transparent. [211:54] So, I hope you got the point. You can [211:56] add more props, but I'm just going to [211:58] leave it as it is. The focus of this [212:00] tutorial is not this component. But just [212:02] know that something like this existed [212:04] and you can be very creative and build [212:07] beautiful components by adding [212:09] gradients. For the entire reference, [212:11] just take a look at the expo [212:13] documentation. [212:15] Okay, so that's it for this component. [212:17] Now we will have one more text which is [212:21] going to be this part. [212:24] So let's go here right after the image. [212:26] I will provide this to you. It will be [212:29] five lines of code. We have one text [212:32] kind of like a title and then a [212:34] description. Now right below to it we [212:37] will have very last component called [212:40] planner [212:41] form card. [212:45] So we are going to create this under the [212:47] components under the planner. [212:51] Let's say RNF generate the content and [212:55] import it right here. So this is going [212:58] to include the actual logic where we [213:00] have some inputs, we have categories and [213:03] then we can select a priority. At the [213:06] very end there will be a button where we [213:08] can press that is going to create this [213:10] data in the database. Okay. So let's try [213:13] to go step by step. First off, we're [213:15] going to visit the planner form card [213:19] component. And here we need to get some [213:21] states, right? Because we are going to [213:24] store all these values like the item [213:26] name, the quantity, category, priority, [213:29] so on and so forth. So let's go ahead [213:31] and import use state and create all of [213:35] them one by one. [213:37] The initial value is going to be an [213:39] empty string. Then we'll get the [213:41] quantity. It's going to be one. Now I [213:44] would like to create some types. Let's [213:47] go here. You know, just to make [213:48] TypeScript happy. First off, I'm going [213:50] to say [213:53] actually this will be an array, not a [213:54] type. Let's say categories. And this [213:57] will be equal to an array. It could be [213:59] one of these values. So it could be [214:01] produce. [214:03] It could be diary. Let me provide this [214:06] to you. [214:09] So we have five different categories, [214:11] right? Which are one of these or all of [214:14] them. So that's the array. Now let's try [214:18] to make this type safe. I'm going to say [214:20] this should be the type that we already [214:22] created which is called grocery [214:25] category. And this is going to be an [214:28] array, right? That's the type that we [214:30] created in the past. [214:33] So that's our categories array. Then we [214:36] will have the priorities. [214:38] Same thing. Let's try to get the type. [214:41] So it could be one of these values and [214:43] we're going to be using them, I promise. [214:45] And then we're going to have the icons [214:48] map. So for produce, this will be the [214:50] icon. For diary, this will be the icon. [214:53] So on and so forth. I'd like to create [214:55] this as an object where the key is the [214:58] category and value is the name of the [215:00] icon. [215:02] Okay. So these are the things. Now let's [215:05] go here. We will create the category. [215:08] This will be a state by default it'll be [215:11] produce and we will add the type. So [215:13] here if you try to make it something [215:15] like hello it's going to fail. It says [215:17] it can be only one of these values. So [215:20] that's why we are creating the types in [215:22] the first place. Then we'll say priority [215:25] by default is going to be medium. Then [215:27] we can use our store to get this method [215:30] where we can add an item and check if [215:33] there are any errors or not. [215:36] Now I will create a val um a value [215:39] boolean. So I'll say can create [215:43] if user type something in only then they [215:46] can create it otherwise the button will [215:49] be disabled. So I'm going to say [215:51] name.trim [215:53] and we'll say length if this is greater [215:56] than zero that means user can create [215:59] this item. And then I will have a [216:01] method. Let's say con handle [216:05] quantity change. [216:11] This will get a value. Let's say it'll [216:14] be type of string. And then here [216:17] basically we're going to say set [216:19] quantity. [216:21] And we'll say value. We don't just paste [216:25] this as it is. Okay. Very annoying. Let [216:28] me type this out correctly. Now the [216:30] problem with this is that what happens [216:33] if user wants to say you know something [216:35] like hello right we should only allow [216:38] them to type digits. So it could be 1 2 [216:42] 1,000 but not any text. So we can use a [216:47] let's say regular expression. We will [216:50] basically take every single value that [216:53] is not digit and we're going to replace [216:55] it. Okay. So I'll leave a comment. This [216:58] is a regular expression. If you're not [217:00] familiar with it, it'll basically, [217:04] you know, it'll just delete all [217:06] non-numeric values. [217:09] That's the method that we'll use a [217:10] little bit later in the video. Now, we [217:12] will just have one more method and then [217:14] we'll get into the return statement. So, [217:16] this is what we call the create item. [217:18] So, that's the async function where we [217:21] call the add item. So, this is our [217:24] method that we're getting from the [217:25] store. We're going to pass the name, [217:27] category, priority, and quantity. And we [217:31] just convert it to be a number before we [217:33] send it. And then we are going to reset [217:36] our form. [217:39] So everything will be in the initial [217:40] state. Okay. So I hope that makes sense. [217:43] Now let's get started with the UI itself [217:46] and we'll just make everything work step [217:48] by step. So this parent view is going to [217:51] get a class name. We will give rounded [217:54] of 3x large border border color [217:57] background as well as the padding. So [217:59] that's the end result. Let's delete this [218:01] text. Instead, we're going to say item [218:04] name. [218:06] So it is this part that we just built. [218:08] And right below that, we're going to [218:10] have an icon and an input, a text input. [218:16] So I'm going to wrap them with a view [218:19] element. I'll give some classes. [218:22] Let me provide this to you. [218:24] That's what we have. Within this, I will [218:27] have the font awesome. And for the icon, [218:31] I'll be using bag shopping. Okay, let's [218:34] import the font awesome. [218:39] And right below to the icon, we can have [218:42] the text input. So, this is a component. [218:44] Let me first save. [218:47] This is a component that we will import [218:49] from React Native. [218:53] Now this will get a couple of different [218:55] props. We're going to pass the value [218:57] which is our state called name and we [219:00] can add the on change text. We're going [219:03] to pass our setter method which is set [219:06] name and then we can add a placeholder. [219:09] And here I'll just say example [219:11] blueberries. [219:13] That's what we have. Then right after [219:16] the placeholder I'm going to add the [219:18] class name. Let me say margin left of [219:21] three, flex of one, text base and text [219:25] foreground. Now we can add I think [219:30] let me just go right here. So right [219:32] after the class name I'm going to add [219:34] the placeholder text color. Notice how [219:37] it's been fixed. And for the border [219:40] color I'll be using border dashboard. [219:43] Now let's try to test this out if state [219:46] updates is working or not. I'm going to [219:48] say console.log log maybe like the name [219:50] itself and as soon as you type like [219:53] initially it does undefined when you [219:55] type notice how it updates immediately. [219:59] So that means this handler is actually [220:02] working. [220:04] Okay, so that's the very first input. [220:06] Now we will have almost the exact same [220:08] thing but this time for quantity. [220:12] Okay, so I'll just leave a comment. I'm [220:14] going to say that's the item name. Then [220:17] we'll have the quantity. [220:20] It's almost the same thing. Let me [220:22] provide this to you. [220:28] Okay. So, we have the text that says [220:31] quantity, which is this one. And right [220:33] below it, we have another input. I'm [220:36] going to make this to be border dash [220:38] border as well. We have a different font [220:42] or icon, I should say. Then we have the [220:45] text input. We pass the value as [220:47] quantity on change which is this method. [220:50] Now notice how I cannot type [220:53] something like ABC right as soon as I [220:56] type it just replace it. But I can type [221:00] any numbers and the keyboard type is [221:03] equal to number pad and the rest is just [221:05] some classes and we also have a [221:08] placeholder of one. Now we can save this [221:11] and I think I'm going to put this [221:13] comment right above the text. [221:16] Okay, now we're going to have our [221:18] categories. And notice how if a category [221:21] is selected, its background and text [221:24] color is different. Also, the icon [221:26] color, right? So, we're going to map [221:28] through every single category. And we're [221:30] going to check if it is active. We will [221:32] update the background color, text color, [221:35] as well as the icon color. [221:38] So, let's go here. After the quantity [221:41] I'm going to say categories [221:43] and I will get my text which says [221:47] category and then we are going to map [221:49] through the categories itself. So let me [221:52] maximize the screen so you can see it [221:54] clearly. [221:57] If you don't want to type this out you [221:59] can get it from the source code. Just [222:01] import a principle and I will walk you [222:03] through it. So we have this parent view [222:06] with these classes. As you can tell, we [222:09] are using flex row so that they are side [222:12] by side and we use flex wrap so they [222:15] wrap to the second line if there is not [222:18] enough space and then we give the gap of [222:21] two. Okay, so notice how we get every [222:24] single option and we check if it is [222:26] active. If it is active, we update the [222:29] background color, we update the font [222:31] color or the icon color I should say and [222:34] also the text color. And if you press [222:37] it's going to call this method by [222:39] passing that option. So the rest is some [222:42] CSS styling. [222:44] And let's test this out. [222:48] So we got all of our categories. You can [222:50] press and it's going to update the [222:52] category. Now we will do the exact same [222:54] thing for the priority. I'm going to [222:58] shrink this. Let's say priority. And [223:01] again you can grab it from the source [223:03] code. It's the exact same thing. [223:06] We map through every single option. [223:08] Check if it is active. Then we can get [223:10] the icon as well. And once you press, we [223:13] update the state. And depending on the [223:16] active state, we update some styling [223:18] mostly the colors. [223:22] Now let's try to put them side by side. [223:24] As you can tell, we got the low, medium, [223:27] high, and it is working as you press. [223:30] Now at the very end finally we are going [223:32] to have a pressible where we can call [223:35] the method that is called create item. [223:40] So right after the priority I'm going to [223:43] paste this in which is a pressible it is [223:46] taking the entire width. So we say if [223:50] user can create background should be [223:52] primary. Now notice how as soon as I [223:55] delete if I don't have any content we [223:57] are using background muted for the [223:59] button because this is equal to false as [224:02] soon as I type in it updates. Okay. And [224:05] we say this would be disabled if user [224:07] cannot create on press call this method [224:10] and the rest is an icon as well as a [224:14] text. [224:16] Okay. Now let's try to actually test [224:18] this out. I'm going to say oops not [224:20] here. Let me bring this back. I'm going [224:22] to say test item. [224:26] For quantity, I'll say something like [224:28] five. And I'll leave everything as [224:30] default. [224:32] Let's add it. [224:35] Okay, looks like it's been created, [224:37] right? Because form has been reseted. [224:40] Let's go here. Take a look at the [224:42] database. [224:44] We should have the test item. So, it is [224:46] working as expected. Now, if we have any [224:49] errors, we can display a text. So I'm [224:52] going to go here and I'll say if there [224:54] is an error for now let's make it true [224:57] and I'm going to say just error. So this [225:00] is what you would see. Let's make the [225:02] text [225:04] maybe update the text color [225:07] to be something like white. [225:10] Okay. [225:12] And let's bring this back. [225:16] You know, this is a very simple error [225:18] placeholder, but if you wanted to, you [225:19] can make it even better. You can [225:22] customize it. I'm just going to leave it [225:24] just to have some placeholder. And here [225:26] we say if there is not an error, display [225:28] nothing. At the moment, there is no [225:31] errors. So, we don't see anything. Now, [225:33] one optimization or I would say an [225:36] optional feature. You could say show an [225:39] alert if it is created successfully. So, [225:42] you would say alert. Add a title like [225:45] success and you can say item created [225:50] successfully or anything. Let's try to [225:52] test this out. I'm going to put a te you [225:55] know test value random low snacks [226:00] created. You can add a loading spinner [226:02] as well but I'm just going to keep it [226:04] simple. And as you can tell once it's [226:06] been created it says success. And we can [226:08] say okay. Okay. So that's it. I'm going [226:11] to delete this. Maybe just leave it as a [226:14] comment and I'll say optional. [226:17] Now I would say we are completely done [226:19] with this section. But there is a [226:21] problem. I don't know if you have [226:23] realized. So if you press one of these [226:25] inputs and if you open up the keyboard [226:28] with command shift K that's how we can [226:31] toggle it. Notice how it's going to [226:33] overlap with the text input. So you need [226:36] to manually scroll and then type this [226:38] in. Right? And just imagine if there was [226:40] not enough space, it would stay like [226:42] this and you couldn't scroll. And to be [226:44] able to fix this, we are going to [226:46] install a package called React Native [226:49] keyboard controller. So you can find [226:51] this from the Expo documentation. Just [226:53] copy this script or the command. Open up [226:57] your terminal. [227:00] Kill this. Let's stop it. And I'm going [227:03] to run this. And since we added a new [227:07] module, we need to rerun our [227:09] application. So I'll say mpx explore [227:11] runos. We need to rebuild our app. And [227:14] let's wait for this to be completed. [227:16] Okay. So once it is done successfully, [227:18] head over to root layout file and import [227:21] this keyboard provider. Then wrap your [227:24] entire application with this element. So [227:26] that's the first step. Then you're going [227:28] to visit the planner.tsx. So in the past [227:31] we just had scroll view element, right? [227:34] But replace it with keyboard aware aware [227:37] scroll view. Then you know have the [227:39] everything as same previously but on top [227:42] of it at the bottom offset which is 80 [227:45] in this case. And then keyboard should [227:48] persist tabs should be equal to handled. [227:51] Okay. So once again wrap your [227:54] application with this element. Then go [227:56] under the planner wrap it with keyboard [227:59] aware scroll view. Then add these two [228:02] extra fields. So with this now if you [228:05] try to press notice how it automatically [228:07] scrolls [228:09] and that's the solution. So with this I [228:12] think we are completely done with the [228:14] planner screen. So we can commit our [228:17] changes and finally in the next section [228:19] we are going to build the inside screen. [228:22] So I'll go here [228:25] stage everything and notice how this [228:27] looks like as if we have an error but [228:29] not really. This is just some stupid bug [228:32] in VS Code. If you press command shiftp, [228:35] reload the window, it should be gone. [228:39] As you can tell, now we don't really get [228:41] that error warning. But anyways, we [228:44] stage everything. Now we're going to say [228:46] get a commit message [228:50] and then we're going to sync this up. [228:53] Okay, so with this hopefully I'll see [228:54] you in the next section. [228:57] All right, so this is where we left in [228:59] this section. and we would like to build [229:00] the inside screen which is going to look [229:03] like this. So here is the end result. [229:05] We're going to have couple of different [229:07] components like the user profile, some [229:09] stats, maybe like categories, so on and [229:12] so forth. So let's get started with the [229:15] insights file. I'll go under the tabs. [229:19] That's what we have at the moment. I'm [229:21] going to give all the spacing and then [229:23] I'll make this to be a scroll view [229:25] element. Let's import it from React [229:27] Native and turn this off. Delete the [229:30] text. Let's give some classes. I'm going [229:33] to say flex of one bg background. And [229:37] then I'll get the petting y4. [229:41] So that's going to be for all the [229:42] classes. Now I'd like to get rid of the [229:44] vertical scroll indicator as usual. So [229:47] I'm just going to say false. Then I'll [229:49] give some styling on the container style [229:52] like the padding and gap. This is [229:54] something that we do. So this is pretty [229:56] usual. And finally, we are going to say [229:59] content insert adjustment behavior is [230:02] going to be automatic. This is something [230:04] that we have explained in the past. Now [230:06] let's go ahead and get the tabs screen [230:09] background component. I'm going to save [230:12] and like it's working out of the box. [230:15] Now right after this element, we're [230:17] going to build the user profile [230:19] component. Let's copy the name. We'll go [230:22] under the components. I will create a [230:25] folder called insights. [230:27] And within this, we're going to create [230:29] this file. Let's shrink it. I'll say [230:32] RNFE [230:33] and import it. Now, we can get started [230:36] with this component. It's going to be [230:38] pretty simple to get started with. So, [230:40] first off, let's get our imports. As you [230:43] can tell, we are getting some stuff from [230:45] Clerk Expo, Expo image, and React [230:48] Native. Now we're going to get the sign [230:50] out method as well as the user object [230:53] from clerk. Then we can get the email [230:55] address because we are going to be [230:57] displaying it and this is how we can get [230:59] that. And we would like to get the [231:01] display name of the user. So first off [231:04] we'll say if user has a full name uh [231:07] just get that value. But in case this is [231:09] equal to undefined we're going to get [231:11] the email. Let's say if it looks like [231:14] something like this like gmail.com [231:18] we will split it by at and we're going [231:20] to get the first part. So that would be [231:22] the display name. This is what we are [231:24] doing. And then we can get into the [231:26] return statement. So I'm going to delete [231:28] the text. We're going to have view with [231:30] some classes. Let's save. Maybe if I [231:33] save I'll lose all these imports. So I'm [231:35] not going to save. Let me get another [231:37] view. And within this we're going to [231:39] have the actual content. So I'm going to [231:41] paste this in and walk you through it. [231:44] So we have the image element. As you can [231:47] tell, we are passing the user image URL. [231:50] We give the width and height. We're just [231:53] taking the entire space of the parent [231:55] element. Then we say this user is signed [231:58] in as. Then we display the display name, [232:01] email, and then we have the sign out [232:04] method. So once you press it's going to [232:06] sign you out. And for the content, we [232:08] have this icon. So pretty easy to [232:11] understand guys. I don't want to spend [232:13] like 10 minutes typing this out. So I [232:15] just copied and pasted. Please feel free [232:18] to pause the video and take a look at [232:19] the source code. [232:22] Okay. So once again we are getting some [232:24] hooks [232:26] um getting the data out of the user and [232:28] then making the UI work. Let's try to [232:30] test out if not is going to work or not. [232:34] Like we already know that's going to [232:35] work but you know let's just prove that. [232:39] Okay. Now try to login once again. Then [232:41] we will go ahead and build the second [232:44] component. [232:46] So we would like to import it first [232:48] under the insights.tsx. [232:51] I'll just say this should be the [232:53] insights stat section. [232:58] So I'm going to copy this name and [233:00] create this. [233:07] And then I will go ahead and import [233:09] that. Now we will have couple of [233:10] different components as well like the [233:13] category section. Let's copy the name. [233:17] Create this file as well. [233:20] And we're going to be building them one [233:22] by one. So I'm going to import all of [233:24] them. Then we'll have the priority [233:27] section. And finally the clear completed [233:30] button. [233:36] I'll say RNF. Let's try to import that [233:38] one as well. [233:47] And by the way, if you want to close a [233:48] file with a shortcut, you would you [233:51] would press control W or command W, [233:54] right? Okay, let's import this one as [233:57] well. And let's get started with this [233:59] component which is called the stats. Now [234:02] this is super simple. It is very similar [234:04] what we have done in this screen. We [234:07] basically get some values out of the [234:09] items. So what I'll be doing, I'll just [234:11] delete this entire thing. Grab it from [234:13] the source code. It is 60 lines of code [234:16] and I will walk you through it step by [234:17] step. So we have some imports. Then we [234:20] are getting the items so that we can [234:22] calculate the total amount of items, [234:25] right? So we're going to get the total [234:27] amount completed [234:29] and pending, right? Sorry, like total, [234:32] completed, and pending. And then we're [234:34] going to basically create these cards [234:37] and put the data in it. Like nothing [234:39] complicated at all. So we got the total [234:42] items, completed items, and pending [234:44] items. We also have a completion rate so [234:47] that we can display this progress bar. [234:50] Okay. [234:52] So we can take a look at the code. Let [234:55] me save and see the end result first. [234:58] Now, even though it says 33%, this looks [235:01] like zero. I'd like to reload this. I [235:03] hope it should be fixed. [235:07] Okay, now with this it is working. So [235:10] once again, we got like three different [235:12] views. That's the first one, right? [235:15] That's the second card and then that's [235:18] the third one. And at the very end, we [235:20] have the completion rate. Basically, [235:22] depending on this math, we add the value [235:25] and we add the percent. so that it gets [235:28] that width, right? Let's make it [235:30] something like 100%. [235:32] As you can tell, it would be filled. [235:35] I'll just bring this back. Okay, so [235:37] that's it for this entire component. I [235:39] hope you don't mind it, but we are at [235:41] the very end of this course. I think [235:42] it's been around 4 hours, so we can just [235:45] speed up the process a little bit. [235:48] And here we will go under the category [235:51] section, which is going to be this part. [235:54] And once again, we will have a similar [235:56] logic, right? We will have like [235:58] different colors. We will have different [236:00] labels, but the general idea is the [236:03] same. Now, let's jump into VS Code and [236:05] get started with it. Again, I'm going to [236:07] delete everything and just grab it from [236:09] the source code. Then I will walk you [236:11] through it step by step. First, let's [236:13] save and see the end result. Then I'll [236:16] try to walk you through it. Okay. So, [236:18] that's the element that we just built. [236:20] So we have the category colors which is [236:23] an object. This is just TypeScript [236:25] types. You don't have to add it. But if [236:27] you don't add that, TypeScript will not [236:29] be happy with you. So we say this is [236:31] going to be a record which is basically [236:33] an object where the key is a string [236:35] value and the value is also a string [236:38] type. Right? So for the produce we have [236:41] this color for snacks. This one so on [236:43] and so forth. Then we got the items get [236:46] the total amount. Then we get the [236:49] categories. And again we have the types. [236:51] You don't have to add this part but if [236:53] you don't add it again TypeScript will [236:55] not be happy with you. And then we have [236:58] the category entries. Now this is just [237:01] some math we are using so that we can [237:03] calculate everything. You don't have to [237:06] understand this completely. But if [237:07] you're interested just pause the video [237:09] and take a look at the code and you can [237:12] ask AI to explain this in detail like [237:15] how everything works in detail. [237:17] And then the rest is the UI. So we have [237:20] items by category text. Then we have the [237:24] length of the category entries. Like in [237:26] this case we have five categories. Then [237:29] what else? We are mapping through every [237:31] single category and we just built the UI [237:34] like nothing complicated. We already [237:36] have the data right here, right? And we [237:39] are just um like we're just putting it [237:42] into the UI. So I'm not going to get [237:44] into the details. Let me maximize the [237:46] screen. if you're interested in. [237:49] And at the very end, we just have one [237:51] check just in case if there are no [237:54] entries, we will say add items to reveal [237:56] your category mix or your stats. Okay, [238:00] so that's it for this component as well. [238:03] Now, we're going to add the priority [238:05] section. So, this will say how many of [238:07] them you have. In this case, I think it [238:10] is three of high priority. Okay? And if [238:13] you don't have anything, it'll just say [238:15] you don't have any. you don't have any [238:17] high priority items. So something like [238:19] that. Let's try to get into this [238:21] component as well. I'm just going to [238:24] grab the code from the source code. It [238:27] is 30 lines of code. Let's save. See the [238:30] end result and I will walk you through [238:31] it. Okay. So in our case, we have one [238:35] high priority. And if you don't have any [238:37] like let's say if that's equal to zero, [238:41] it'll say everything critical is [238:43] covered. But else you would see this [238:45] text which is right here. [238:48] Okay. So very very simple nothing [238:50] complicated. We get the items count the [238:54] amount of high priority items and then [238:56] just put some UI so that we can have [238:59] this end result. Okay. So I'm going to [239:01] save. Let's finally go into clear [239:04] completed button component which is [239:07] going to be a simple button. And once [239:09] you clicked it it's going to call a [239:11] method that we created in the past. So [239:13] this will be like 10 lines of code. I'm [239:16] going to grab it from the source code. [239:18] We are getting our store so that we can [239:20] get this method. And once you press it's [239:23] going to delete all the cleared [239:24] elements. Like in our case, we have [239:27] three. I'm going to say clear [239:28] everything. Once it is done, they should [239:31] be gone, right? And if you take a look [239:33] at the database, they should also be [239:34] deleted. [239:38] As you can tell, three of them has just [239:40] gone. [239:42] So with this we are completely done with [239:44] this project but I just want to test [239:46] this out on Android as well just to make [239:49] sure everything is working successfully. [239:51] So I will open up the Android Studio and [239:53] I'll say more actions and maybe I'll say [239:56] virtual device manager so that I can run [240:00] this u simulator. [240:04] So this is something that I have already [240:06] installed in my machine and from the [240:09] terminal now we were pressing I to run [240:12] it on iOS right but now we can press A [240:16] to run it on Android as well. I'll just [240:19] give couple of seconds for this to be [240:22] installed or start. Okay, now I'll press [240:25] A. I think we need to build it for [240:29] Android as well. So I'm going to say mpx [240:31] expo run Android. [240:39] So this is going to create the Android [240:41] folder as you can tell. And I'll just [240:44] wait for this to be completed. Once this [240:46] is done, we are going to get the [240:47] development build and we should be able [240:50] to run the application successfully. All [240:52] right. So it's done successfully. As you [240:54] can tell, we are running this [240:55] application in Android. Now we can try [240:58] to login as well. [241:00] Now in the past when I was trying to [241:02] build it with Android, it was always [241:04] failing and the reason was I was using [241:07] the latest version of Java, I downgraded [241:10] to 17 and then it started working. If in [241:13] your case it fails, just keep that in [241:16] mind. Maybe you should downgrade your [241:18] Java version to 17. Okay? [241:21] Or ask AI. I don't know what kind of [241:24] issues you will get because if I don't [241:26] see the error, I cannot really provide a [241:28] solution. If you get any kind of error [241:31] in terminal, just copy it and paste it [241:33] to AI and say, "Hey, I was trying to [241:36] build my app with Expo. That's what [241:38] happened. Help me out." So, that's what [241:41] I've done in the past and it just fixed [241:42] that. Now, I'm going to try to continue [241:45] with this account. [241:47] Unmatched route. Like, what do you mean? [241:50] Let's try to say go back and reload. [241:53] Okay, it is working now, but for some [241:55] reason it didn't work initially. [241:58] Um, we can double check and try to fix [242:00] that. Let's just see other things like [242:03] our tabs are working, right? [242:06] We have the insights. We can clear [242:08] everything. Let's actually test this [242:10] out. [242:11] Let's go here. Like I'm going to make [242:14] this to be completed and I'll say clear [242:16] the completed ones. That's gone. We can [242:20] uh increment the quantity. We can [242:22] decrement it. [242:24] We can mark it as completed. [242:28] We can also toggle the state. [242:31] Right? I'm going to press this once [242:33] again. We can delete them. We can create [242:35] items. So here I'll just say test. [242:43] So it's been added. Let's go here. Test [242:46] is right here. And we can try to log out [242:49] as well. [242:51] So this is something that you get from [242:53] expo like a dev tool. If you wanted to, [242:56] you can toggle this. And now it is not [242:58] visible. I'll press log out. Here we go. [243:01] We are logged out. Now I'm going to [243:03] reload my app. And once you press R, [243:06] notice how it reloads in both of the [243:09] simulators. Now once again, I'll try to [243:12] login with Google. I'll just see if we [243:15] are going to get that error where it [243:16] takes us to not found route. If that's [243:20] the case, we can fix it. Okay, so for [243:23] some reason it takes us to SSO call [243:25] back. So I just paused the video and try [243:28] to find a solution. Now it's actually [243:30] pretty easy and simple to fix this. As [243:33] you can tell, it navigated us to SSO- [243:37] callback page, but we don't really have [243:39] it. So Expo says there is an unmatched [243:42] route. So we will go ahead and create [243:44] this under the app. I will just say SSO- [243:48] callback.tsx. [243:51] Now remember at the beginning of this [243:53] course I said whatever you put under the [243:55] app is going to be a screen, right? So [243:58] this is our callback screen. And here we [244:01] will have no logic other than [244:02] redirection. So I'd like to grab this [244:05] just like under the oath layout. So I [244:09] think I'll just grab this entire thing [244:11] and let me get r I can zoom in. I'll say [244:15] SSO call back screen. [244:21] This is not going to return any UI [244:22] elements. Let's get the use o hook. We [244:27] will get the redirect from export [244:30] router. And at the very end here we can [244:32] say you know if user is not signed in we [244:35] can take the user and redirect them to [244:38] sign in screen. [244:40] I'll just say slash it was under the [244:43] oath [244:45] and we had the sign in screen. [244:49] Okay so super simple nothing complicated [244:51] we are getting these values. We check if [244:54] clerk is loaded or not. If it is not [244:56] loaded we don't return anything. Then we [244:59] uh check if user is signed in. We take [245:02] them to the home screen. If not, we take [245:04] them to the sign-in screen. Now with [245:06] this, I'm going to rerun my application [245:09] and we'll just test out one last time. [245:14] So I'll try to log out. [245:18] Now if we log in, it shouldn't throw [245:21] that error, right? because it's going to [245:23] take us to SSO call back screen and the [245:26] navigation should happen. Now we didn't [245:29] got the error and after like one or two [245:32] seconds we are redirected to the home [245:34] screen because we are assigned it. Okay. [245:37] So that means everything is working [245:38] correctly and as expected. Now notice [245:42] how here this is almost [245:44] um how do we call it? It is like sticky [245:47] to the status bar on Android not on iOS. [245:51] So for this we can go under the tabs [245:54] find here and maybe you can just say [245:56] like margin top of 10. Would this work? [245:59] I don't think so. We need to find the [246:01] header. Let's just say [246:04] I don't know like petting top maybe [246:09] or margin top. Let's just say 20. [246:12] It did not work. Let me reload. [246:17] Okay. So as you can tell we have some [246:19] spacing. So that means this is how we [246:22] can fix that. Adding some paddings from [246:24] the top. If you're not really happy with [246:27] the other screens, you can also add this [246:29] kind of a fix. [246:31] But at this point, I'm happy. So I'm [246:33] going to leave it as it is. All right. [246:35] So with all that being said, I think we [246:37] are completely done with this project. [246:39] We started from an empty folder, but now [246:42] we have an application that works on [246:44] both Android and iOS. We have [246:47] authentication. We have database [246:49] connection and that database is hosted [246:52] on the cloud using neon which provides [246:55] us a Postgress database and we have [246:58] light mode and dark mode support. I [247:01] think I didn't show you on Android but [247:03] let's go ahead test this out. I think we [247:06] should visit the settings and then I'm [247:09] going to toggle the theme. Let's see [247:13] where that is. Maybe under the display a [247:16] dark theme. Let's make it to be light. [247:18] And this should be accessible as soon as [247:20] you switch. As you can tell, colors are [247:23] working nicely. Let's try to log out. [247:26] And authentication screen is also [247:28] looking pretty clean. So yeah, overall I [247:31] hope you enjoyed it. Congratulations to [247:33] be able to follow along up until now. It [247:35] was more than 4 hours, but following [247:37] along take around 10 hours or maybe a [247:40] couple of days. Okay, so hopefully I'll [247:42] see you in the next project. All right. [247:44] So, even though we are completely done [247:46] with this project, I'd like to implement [247:48] one extra feature, which is something [247:50] that I've explained at the beginning of [247:52] this course. So, it's going to be this [247:55] feedback button where users can press [247:57] this button and fill in their [247:59] information and then they can explain [248:02] what's the bug they encountered, right? [248:04] What did they expect or what are the [248:07] features they would like to have in the [248:08] future, right? And once they submit [248:11] this, we're going to get this request so [248:13] that we can jump into our codebase and [248:15] fix those issues. So it's really [248:18] important to grab feedback from your [248:20] users and we will see how to do it in [248:23] this section. Now for this we're going [248:25] to be using Sentry which is completely [248:27] free to get started with and on top of [248:30] it I have included a link which will [248:32] give you $80 free credits. So go ahead [248:35] and sign up. I already have an account [248:38] under centry.io. [248:40] Here I'll just say sign in. Now this is [248:42] much more than a feedback button [248:45] platform, right? This is just their one [248:48] of their tiny features. This is the [248:50] actual platform where you would handle [248:52] the errors, you know, error monitoring, [248:55] logging. They now have AI code reviews [248:58] and much more. But since this is a [249:01] beginnerfriendly course, we'll just [249:03] implement the feedback button. So I will [249:05] go ahead and log in. Then we will create [249:08] a new application. So as you can tell I [249:11] already have grossify test. But now I'll [249:14] go here create a new project with React [249:17] Native. Let's give the project slug as [249:21] grossify. You can call it anything. I [249:24] will leave everything as it is. And then [249:26] I'll create the project. They're going [249:29] to provide us a script or a command that [249:32] we can just copy and paste it into our [249:35] terminal. [249:37] So, I'm going to kill this. I will just [249:39] paste this in and I think it's going to [249:41] ask couple of different questions. [249:44] So, it's going to install Sentry React [249:46] Native. All right. So, it just installed [249:48] this package and then automatically it [249:50] took me to browser where I can [249:52] authenticate and then now we are back [249:54] into VS Code. Here it's going to ask [249:56] couple of different questions. where do [249:59] we want to implement session replay? [250:01] Now, normally I would include this, but [250:03] in this project, we don't really need [250:05] it. We only need that feedback button. [250:07] So, I'm going to say no. I don't want [250:10] to. Well, actually, I would like to get [250:12] the feedback widget. So, I'm going to [250:14] say yes so that we can collect feedback [250:16] from our users. I will say yes. Uh for [250:20] logs, we don't really need it. But if [250:22] you say yes, I'll just show you what'll [250:24] happen. Now it basically says grab this [250:27] and put it into your root layout. So I'm [250:30] going to go ahead open up the root [250:32] layout [250:34] and we will paste it just above the root [250:36] layout. We need to import sentry. I [250:39] think we already got it. I'm just put it [250:41] like I'll put it at the very top. [250:45] Okay. So this is the string we are using [250:48] so that we can connect to our centry [250:50] project. And then it says enable logs. [250:55] Since I said yes, it's equal to true, [250:57] right? If you wanted to, you can delete [250:58] this since we don't really need it. And [251:01] like some more options for now, we can [251:04] delete them. And then for the [251:05] integrations, we will only leave the [251:08] feedback integration. So I'm going to [251:10] save this and let's take a look at the [251:12] terminal. Yes, we apply this. I'll just [251:16] say yes, continue. [251:18] Um, no for MCP. We don't really need it. [251:22] And I'll just say yes, everything is [251:23] done successfully. Let's run our [251:25] application. Maybe we need to rebuild [251:28] it. I'll say mpx explore run iOS. If [251:31] you're on Android, do it for Android. [251:34] And while this is building it, we can go [251:37] ahead kill the application and implement [251:40] it under the inside screen. [251:43] So here, let me show you the end result. [251:46] Under the inside screen we have a button [251:49] which is floating right. So we will put [251:52] this by using position absolute. So I [251:56] will go under the insides.tsx [251:58] file and I will wrap this with fragment [252:04] because we're going to have two [252:05] different children. That's the scroll [252:07] view. Right below to it, I'm going to [252:09] call the sentry feedback button. And we [252:12] are going to create this component. [252:16] I think we can put it under the insights [252:19] like components insights. Put this in [252:23] and say.tsx [252:26] R NF. [252:29] And then let's try to import it right [252:31] here. [252:36] Now here I'd like to import sentry as [252:38] well. I'm going to copy this. Paste this [252:41] right here. I will get font awesome. And [252:44] then here I will also import the [252:46] pressible component. Now for this view [252:49] I'll say class name. [252:52] I think we're going to be using style [252:54] and you will see why. So I'll just say [252:56] style [252:57] and let's put an object [253:01] and I'll just grab the values. So I'm [253:03] going to get position of absolute right [253:06] of 16 and we'll say zindex of 50. Then [253:10] we would like to also put the bottom [253:13] position right now if you say bottom of [253:15] zero probably it would be right here. [253:17] But instead we are going to be using a [253:19] safe hook. So I'm going to say for the [253:23] bottom instead of just saying something [253:25] like 80 like 80 pixels we're going to [253:28] say on top of it add the insets bottom [253:36] and we're going to get this inserts [253:39] by calling a hook. I'm going to say use [253:42] save area inserts and you will see what [253:45] this does in a second. here. Instead of [253:47] having a text, we're going to have a [253:49] pressable. And once you press that, like [253:52] let me import the pressable. [254:01] Okay. So once you press this, we're [254:03] going to call this method from sentry [254:05] which which says show feedback widget. [254:08] We have some classes, an icon, and then [254:11] a text that says feedback. Okay, super [254:14] simple, nothing complicated. just a [254:16] button that calls this method. [254:20] Now, let's wait for this to be started. [254:23] And here we go. We have the button. If [254:25] you click, looks like something failed. [254:28] We can fix that. Let me just say dismiss [254:30] and reload this app. [254:38] Okay, it fails. I think we are missing [254:40] something. Okay, so to fix this, we are [254:43] just missing something where we will [254:45] take this entire function and we're [254:47] going to wrap it with sentry. So this is [254:49] one of these steps that I forgot. We'll [254:52] just say sentry. Wrap call this and wrap [254:56] everything with it. Now with this it [254:58] should be working out. [255:01] If you press here we go we got this [255:04] model where we can uh you know dismiss [255:06] that or we can submit the information. [255:09] Now here I'd like to show you the insets [255:12] bottom. If you delete this part where [255:14] you say 80 pixels, it'll take from [255:17] bottom 80, right? But this value will be [255:20] different on every single device. Let's [255:22] say on iPhone 16, you need to maybe have [255:25] it like 90 pixels. On Pro Max, it's 80 [255:28] pixels. Let's say iPhone, you know, 7 or [255:32] 6S, I don't know, maybe you need to use [255:35] like 100 pixels, right? So you can't [255:37] really calculate it. um dynamically. To [255:41] be able to fix this, you're going to say [255:42] inserts bottom. It'll always make sure [255:45] that it is not overlapping with the safe [255:48] area view from the bottom. You can also [255:50] use like top, left, right, like all [255:54] these [255:55] variables are available. In this case, [255:57] we're going to be going with bottom. [255:59] Let's say just delete the 80. What'll [256:02] happen? It is right here. But on top of [256:04] it, we can add some values like 20 would [256:07] be fine. I think I'll go with 80. But if [256:10] you wanted to feel free to update this [256:12] value, maybe like 70. Yeah, I think 80 [256:15] should be fine. Um, even like 90 so that [256:19] it doesn't really overlap with this [256:21] button. Okay. So, let's try to save and [256:25] maybe just add a feedback. I'm going to [256:27] put my name. [256:31] Let's put the email. And for the [256:33] description, I'll say something like, [256:35] "Please fix the [256:39] logo feature. It does not work." [256:45] Okay. So, I'm going to say sent this bug [256:48] report. Thank you for your report. That [256:50] means it's done successfully. Now, we [256:52] can go into our Sentry dashboard and try [256:54] to find that um you know, find the [256:58] reports. So, head over to issue section. [257:01] You're going to see the user feedback. [257:03] And from here, select your application, [257:05] right? In this case, that's what I have. [257:08] And just a minute ago, we got this [257:10] feedback from this user. And you can see [257:13] more details by clicking to it. Things [257:15] like the device, you know, the [257:18] environment, which is iOS. So that you [257:20] would know that they have this error for [257:23] only iOS, right? Um, so yeah, that's how [257:26] you would use it. You can assign this to [257:28] one of your teammates so that they can [257:31] fix it. You can mark this as spam, mark [257:34] unread, delete, so on and so forth. Feel [257:36] free to, you know, explore this from the [257:39] dashboard. But this is how we are going [257:41] to leave it at this point. So once [257:44] again, super simple. We just have one [257:46] DSN, right? This is our string where we [257:49] can connect to our project. Our [257:51] integration is only feedback. If you [257:53] wanted to add more integrations, you [257:55] would just add it right here, but we're [257:57] going to leave it as it is. Then we [258:00] wrapped our entire application with this [258:02] method. I don't know why this failed. [258:05] Let's rerun this. Okay, so we wrapped [258:07] our entire application with sentry. [258:10] And then here we have a method where we [258:13] call whenever we press that button. And [258:15] by the way, it was failing because I [258:18] accidentally deleted this part. Now [258:20] let's save. And now we can rerun this. [258:22] It should be working out. [258:30] Okay, so that was the entire project. I [258:32] hope you enjoyed it. And just before we [258:34] end it, you might realize that Sentry [258:36] has created.local [258:39] file. Now, this is kind of confusing. [258:41] You might be like you might be asking [258:43] why do we have both of them? Well, you [258:45] can take this content, cut it, and put [258:48] it right here. Then you can delete this [258:51] file. So, env.local, we don't really [258:53] need it because we already had thev [258:56] file. And the other thing that I'd like [258:58] to do, instead of having this as a [259:01] hard-coded value, I'm going to cut this [259:03] from here. And I'm going to get this [259:05] from process. Menv. So, I'm going to say [259:08] not oath token, but let me get the env [259:13] file. And I will say expo public [259:17] sentry DSN. and then just paste this [259:20] value. [259:26] Okay, so with this hopefully it should [259:28] be working out as well. I'm going to [259:30] reload my app. [259:36] So as you can tell it is working without [259:38] any issues. Okay. So, with this [259:40] hopefully I'll see you in the next