00:00:02 Let's get started with developing our homepage, which will look something like this.

00:00:07 We'll mention our location, show the user's cart, and then show some of the categories of products that they can order.

00:00:14 And then we'll have a bottom navigation.

00:00:17 To start implementing the home screen, or any screen for that matter in React Native, you want to wrap it not with a regular view,

00:00:25 but rather with a safe area view.

00:00:29 This is a component which you can import from React Native Safe Area context, not directly from React Native.

00:00:37 Even though React Native also has a component called Safe Area View, this one is much more powerful and works better on both Android and iOS devices.

00:00:47 Safe Area View ensures that the UI within it doesn't get cut off by notches or curved edges on any devices.

00:00:56 So you can be sure that whatever you put in it will actually be shown to the user.

00:01:02 Then after that, to efficiently render large lists by recycling different views, we use something known as a flat list.

00:01:11 It is the recommended way of rendering lists in React Native.

00:01:15 So I'll create a new flat list and import it from React Native.

00:01:20 And you can see how WebStorm automatically autofills different props that are required for FlatList to work.

00:01:29 So it's the data, and then it's the render item.

00:01:33 To the data, you need to provide an array or an array-like list of items to render.

00:01:39 For now, I'll just pass an empty array, and then to the render item, you need to provide a callback function where you can take the item from that data

00:01:48 and then render it.

00:01:49 So this typically includes a callback function within which you destructure the item that you passed within the data, and then you automatically return something.

00:02:00 Like, let's say, an empty div for now.

00:02:03 Later on, we'll make this flat list return actual data.

00:02:06 You can think of the flat list as very similar to a .map function in React.

00:02:12 For example, data, .map, and then you show different items.

00:02:18 This is the equivalent of doing that in React Native.

00:02:22 But using the flat list is preferable when list is going to be dynamic or long because React Native behind the scenes applies some additional performance optimizations.

00:02:33 Okay.

00:02:33 So within this data, instead of providing an empty array, we can provide a list of offers that we have, which we can import from add forward slash constants.

00:02:43 This will simply be different categories such as the burgers, pizzas, or burritos.

00:02:50 And then we can map over those items.

00:02:54 I'll do it by getting both the item and the index of the item we're mapping over.

00:02:59 And then for each one of these, we can open up a function.

00:03:04 within which we can return a view.

00:03:08 Now, a view in React Native is very similar to a div in web applications.

00:03:14 It's basically the same.

00:03:16 It's a mobile app version of a div.

00:03:18 Within this view, we can try to render some data.

00:03:20 But before we do that, we want to make sure that whatever is within each one of these list items is interactive, is clickable,

00:03:28 or in this case, should I say, pressable, because we're not clicking on it with our mouse, we're actually pressing on it with our finger.

00:03:36 Thankfully, there is a component called Pressable coming from React Native, which allows you to put different components within it,

00:03:45 and whatever is within it, you'll be able to click on it.

00:03:48 Let's also give it a class name, equal to, and now we can start adding all of the different class names.

00:03:55 For example, we can give it a background of, let's say, Amber 600, just so we can visualize it more easily.

00:04:01 And then within it, I'll render a piece of text.

00:04:04 You can think of this as a p tag in regular web applications.

00:04:09 Within it, we'll try to render the item.title.

00:04:12 This will be the burger bash, summer combo, or a pizza party.

00:04:17 So if you save it now and reload by opening the terminal and pressing the letter R, you'll see that now we have four different list items right here at

00:04:26 the top.

00:04:28 But to style it a bit better, we can continue adding some additional class names to this.

00:04:33 Such as maybe we can give it a margin Y of 3 to divide the elements one from another.

00:04:40 Maybe an H of 48 to give them so much more height.

00:04:44 Or rounded-excel to round up the corners a bit.

00:04:48 there's going to be many of these class names that we want to add.

00:04:52 And not necessarily always do we want to clutter our view and do it directly here.

00:04:57 Sure, Tailwind and Nativewind are amazing because they allow us to add all of those class names immediately, but sometimes we want to extract them within

00:05:06 a globals.css file so we can more easily use them and reuse them throughout our code.

00:05:11 So for that reason, in the video kit down below, you can find the complete globals.css file.

00:05:17 which you can copy and just paste right here.

00:05:21 You'll see that this contains some of the utility classes that are going to make the styling of our applications easier.

00:05:27 For example, whenever you want to render an H1 bold heading, you can automatically use this class and it'll apply a Text3 Excel,

00:05:35 as well as the font that we're using.

00:05:37 Similarly here, for one of these cards, we can apply a full width, H of 48, margin Y3, rounded Excel, and so on.

00:05:47 And this is going to be one of the last things that I'm going to provide you with.

00:05:50 Everything else that's coming up, we'll code together by hand.

00:05:54 I know that I gave you a lot of assets and a lot of things to work with at the start, but from here on, you'll be doing everything on your own with my help,

00:06:02 of course.

00:06:04 So now if you head back over here, instead of providing all of these things manually, we can now just give it an offer card class name.

00:06:12 And if you reload your application, you'll be able to see that we have four of these different things.

00:06:17 But hey, where are the colors?

00:06:19 Well, in this case, if we want to provide a different color for each one, we have to do it using the regular style property.

00:06:27 So I'll just say style and choose a background color.

00:06:32 and make it equal to the item.color.

00:06:36 Where is this item color coming from?

00:06:38 Well, it's coming here from the offers.

00:06:40 I already picked them from the design and put a couple of these colors here so that each one gets its own color.

00:06:46 Now, instead of simply rendering a piece of text within this pressable property, instead, I'll open a new dynamic block.

00:06:54 and I'll render a callback function with an immediate return.

00:06:57 And then in here, we can render what will be pressable, and we also have access to this pressed function so that we can do some additional functionalities

00:07:05 once the user actually presses it.

00:07:07 Let's make sure to properly close it.

00:07:09 And within it, I'll render a good old React fragment, and then I'll render a view.

00:07:15 Make sure to import this fragment from React just to be able to render it.

00:07:19 There we go.

00:07:21 And now we have four different colors.

00:07:23 Within this first view, we want to give it a class name equal to hFool and w1 over 2, which is half the width of the card.

00:07:34 And now that allows us to render our image.

00:07:36 So I'll render the image in the same way I would do it within the browser, but this image component will be coming from React Native.

00:07:45 And then you can give it some props like the source, which will be equal to item.image.

00:07:52 It'll have a class name of size-full as well as resize mode equal to contain.

00:08:00 And we can close it right here.

00:08:02 So now we can see four different images appear right here.

00:08:06 Now we can render the text.

00:08:08 So I'll say view.

00:08:09 that'll have a class name equal to offer-card, underscore underscore info.

00:08:18 So we're using a bit of the CSS BEM methodology here to indicate that this is the info part of the offer card.

00:08:25 And then within it, I'll render a piece of text that will render the item.title.

00:08:32 So if you save it and reload, It looks like we still can't seem to see the text.

00:08:38 That has to do a bit with our layout.

00:08:41 See, we're using an alternating layout right here for some visual interest.

00:08:46 We start with a large text on the left, and then image on the right.

00:08:49 But then, on every odd card, we change it.

00:08:53 So, on the second card, we have burgers on the right, but the image on the left.

00:08:57 Then, we have the text on the left, and then the image on the left.

00:09:01 So we have to figure out a way to change the layout based on the number of the card.

00:09:06 We can do that right here at the top of the render item function by checking whether the card is even.

00:09:13 We can do that using the modular operator by checking whether the index is equally divisible by two with no remainder.

00:09:20 Then we can use this is even variable to render some different class names for this pressable component.

00:09:27 To render dynamic class names, we can install an additional package called clsx.

00:09:33 So open up your second terminal and run npm install clsx.

00:09:39 Then we can just use it right here.

00:09:42 by not only rendering this offer card, but rather passing it into this CN function, which we have to import from CLSX.

00:09:55 There we go.

00:09:56 And now we can always render the OfferCard class name, but then dynamically, if it is even, I will give it a flex row reverse.

00:10:08 And if it is not even, then I will give it a flex row.

00:10:13 This will create an alternating layout.

00:10:16 So now we can see that at the start, we have the summer combo on the left, burger bash on the right, pizza party on the left,

00:10:22 and burrito delight on the right.

00:10:24 And just so it's a bit easier to see, I'll put this class name and the style on the new line so you know that they belong to the pressable component.

00:10:32 Perfect.

00:10:33 So now we are ready to style the text.

00:10:36 I'll give this text a class name, equal to h1 bold, text-white, and leading-tight, which I believe we coded before, but I removed it while I was fixing

00:10:48 the text.

00:10:49 There we go.

00:10:50 That made it a bit bigger.

00:10:51 And now just below this text, we can render an icon.

00:10:55 So this will be an image that'll have a source equal to images coming from index.ts of constants, dot arrow right.

00:11:05 And if this didn't auto-import it for you, right here from constants, just check whether you have this export const images right here that exports all

00:11:15 of our icons and images.

00:11:17 If you have it here, you're good.

00:11:19 Let's also give it a class name equal to a size of 10, as well as a resize mode of contain, and a tint color of hash, fff,

00:11:33 fff, which is the white color.

00:11:37 There we go.

00:11:38 And now we have to make all of these breathe a bit better.

00:11:41 So right here at the bottom of where we have this safe area view, so that is the full bottom of the screen, just before we close this flat list,

00:11:51 let's actually give it another property of content, container, class name.

00:11:56 And here, we can give it a padding bottom of 28 to create some spacing, as well as a padding X of 5 to create some spacing on the sides.

00:12:05 Let's also scroll all the way to the top, to where we have the safe area view, and let's give it a class name equal to flex1,

00:12:15 as well as bgwhite.

00:12:17 If we do this, everything should still look good, but we still have to provide some space for this piece of text right here.

00:12:24 So let's scroll down to this first image where we have a size full and a resize mode of contain.

00:12:30 So let's scroll a bit down.

00:12:31 And right here where we have this view with a offer card info class name, we can also wrap it with a CN for class names.

00:12:40 We'll always render this offer card info, but if it is even, I will give it a padding left.

00:12:49 of 10, else I'll give it a padding right of 10 to create some additional space.

00:12:55 There we go.

00:12:55 So now it's looking much closer to the design.

00:12:59 And also on Android devices, there's an additional property that you can pass to the pressable component, which is Android Ripple.

00:13:06 And I'll give it a bit of a color.

00:13:08 of hash, FFF, FFF22.

00:13:13 So this is for the opacity.

00:13:14 So it'll actually make it look like you're pressing on it.

00:13:16 Now we have to focus on rendering the top part, which is the header.

00:13:20 So I will render it just above this flat list by rendering another view with a class name equal to flex between.

00:13:29 So we can show the content on the left and the right.

00:13:32 Flex row, WFool for full width.

00:13:35 margin Y of 5 to divide it from the top and bottom and padding X of 5 to give it some padding on left and right.

00:13:42 Within it, I will then render another view that'll have a class name equal to flex start.

00:13:51 Within it, I'll render a text that'll say deliver to, and then we can give it a class name of small dash bold and text dash primary.

00:14:04 There we go.

00:14:04 So now it says deliver to right at the top, and then we can render an image below that text.

00:14:10 This image will have a source of images.arrow down, and it'll have a class name equal to size of three, as well as a resize mode equal to contain.

00:14:27 There we go.

00:14:28 So now we have this little carrot at the top.

00:14:30 And we actually want to put this carrot alongside the text of where we're actually located.

00:14:35 So I'll put it within a touchable opacity.

00:14:39 This is the first time that we're using something known as a touchable opacity.

00:14:44 But basically what it is...

00:14:47 is just a button, okay?

00:14:48 It has a fancy name for a button, which you import from React Native.

00:14:53 Because if you think about it, in mobile apps, you're not pressing a button, you're actually touching something.

00:14:59 So it's called a touchable opacity.

00:15:02 And within it, I will render this image, as well as a text.

00:15:07 And this text will render the city where you're from or just the country.

00:15:11 In this case, I'll say Croatia, where I'm based.

00:15:14 And now let's style it a bit by giving this text a class name equal to paragraph dash bold.

00:15:23 text-dark100, and we can now style it all together by giving this touchable opacity a class name of flex-center, flex-row,

00:15:34 so they fall one after another, and a gap X of 1, as well as a margin top of 0.5. And now it nicely says that you're actually delivering to the place where

00:15:47 your users are from.

00:15:48 And later on, of course, we can make this dynamic.

00:15:50 On the other side though, for now, below this view, I will render a text that'll say cart.

00:15:58 Here, we can display all of the items that you've ordered so far, or that you've added to your cart.

00:16:04 Now, if you try to test your app, you'll notice that you can't scroll the whole screen.

00:16:10 Rather, you're only able to scroll the flat list content.

00:16:14 See how the header remains there, but flat list is scrollable.

00:16:19 Why is that?

00:16:20 Well, in web development, the browser actually adds scroll bars if the content exceeds the viewport.

00:16:26 But in React Native, you're working in a native mobile environment, where the layout engine doesn't necessarily assume that you want to scroll.

00:16:35 So you must explicitly wrap your content in a scrollable container, like a scroll view, or a flat list, in this case, if you want to add horizontal or

00:16:46 vertical scrolling behavior, like we have here.

00:16:48 So in case you want to make the whole thing scrollable, you can just wrap it in a scroll view, which you can import from React Native.

00:16:58 and make sure to properly close it right at the bottom, right inside of the safe area view.

00:17:05 If you do that, you can notice that now the whole thing is scrollable.

00:17:10 But with this in mind, we have one tiny problem.

00:17:13 And that is that if you open up your application terminal, you'll see that it says that virtualized lists should never be nested inside plain scroll views

00:17:22 with the same orientation because it can break windowing and other functionality.

00:17:27 Use another virtualized list-backed container instead.

00:17:31 This problem is happening because a flat list, which is a virtualized list, is designed to render only the visible items for performance,

00:17:39 not the ones that cannot fit on the screen.

00:17:41 Wrapping it in a scroll view though, which tries to render everything at once, disables that optimization, causing poor performance,

00:17:50 layout glitches, and broken scroll behavior.

00:17:54 It is a pattern that you don't want to do in React Native.

00:17:57 So please never ever wrap a flat list or any other virtualized list inside of a scroll view ever again, because that's a React Native rookie mistake number one.

00:18:08 So if you want to avoid these mistakes in the future, you'll definitely want to check out our Pro React Native course.

00:18:15 Now, it depends when you're watching this video, whether it's out yet or not.

00:18:18 But even if it's not, somewhere here in the video key down below, I'll link a waitlist for the course so that when it's actually out,

00:18:26 you can be the first one to know and never again make this and many, many other common React mistakes ever again.

00:18:33 Because in the course, we'll dive deep of how React Native works under the hood.

00:18:38 So what should you do instead?

00:18:40 Well, check this out.

00:18:41 I'll remove the scroll view and its ending tag.

00:18:47 And we can render this entire header as part of the flat list with the help of one special prop.

00:18:54 What you'll notice as you dive deeper into React Native development is that React Native has a lot of these special props.

00:19:01 So just copy this entire part and remove it.

00:19:04 And then within the flat list itself, add a new list header component.

00:19:10 where you can declare a callback function with an immediate return and just paste what you just copied.

00:19:17 Now, it'll get re-added as part of the entire flat list, as you can see, but no longer do we have that issue with a virtualized list.

00:19:27 These are just previous errors.

00:19:28 The more you know, right?

00:19:30 So we're just building different pieces of this flat list and adding them as Lego blocks.

00:19:35 In this case, we don't even have to pass this padding X to the view, because FlatList adds it by default, so everything is nicely structured even without it.

00:19:45 Perfect.

00:19:45 So now, if you test scrolling, you can see that everything should feel better as a one-hole thing.

00:19:50 Next, I'll create a separate component specifically for rendering the cart icon at the top.

00:19:56 which will help maintain the consistency across the app.

00:19:59 The idea is that when a user adds an item to their cart, the cart item should immediately update to show the new item count,

00:20:07 and this change should be visible on all screens at once.

00:20:11 By isolating this cart component, we can connect it to a global state.

00:20:15 This way, any updates to the cart will automatically reflect in the icon whenever it is used.

00:20:21 Additionally, having it as a standalone component just makes it more easy to reuse throughout the app.

00:20:26 So let's create a new component within the components folder.

00:20:29 Oh, look at it.

00:20:31 This will actually be our first component.

00:20:33 So we have to create a new components folder and create a new file within it called cartButton.tsx.

00:20:44 and you should be able to quickly get it going by typing rnfe.

00:20:49 If this isn't working, you might head over to the plugins and then search for react snippets.

00:20:59 Very quickly, you should be able to find something that works.

00:21:02 In this case, I'll go with these modern React snippets, install them.

00:21:08 And once you reload, you should be able to type rnfe, which will create a new React Native functional expert component very quickly.

00:21:17 Then you can go ahead and import it over within our list header component.

00:21:23 Instead of this text that says cart, now you can render a self-closing component called cart.

00:21:30 button, and head over into it so we can implement it as a reusable component.

00:21:35 For now, I will hard code the number of total items, for example, 10. And then we can automatically return a touchable opacity since it's a button with

00:21:48 a class name equal to cartBtn.

00:21:51 And instead of an on click, we can give it an on press, which we'll add the functionality for soon.

00:21:58 Then I will render an image with a source equal to images coming from constants.bag with a class name of size five and a resize mode set to contain.

00:22:14 There we go.

00:22:14 You can see a little cart at the top.

00:22:16 And then only if the number of total items is greater than zero, then we want to automatically render a view.

00:22:25 which will have a class name equal to cart badge.

00:22:30 And within it, we can render a piece of text that will have a class name equal to small dash bold and text dash white within which we can render the number

00:22:43 of total items.

00:22:45 There we go.

00:22:46 So now we have a cart and it has a page that says 10. And you can see, since we put it within a touchable opacity, once you click it,

00:22:54 it actually shows that it is a clickable component.

00:22:58 Pretty cool, right?

00:22:59 This will be a crucial component later on, as it'll use a global state for the number of elements that we have within our cart.

00:23:07 So with that in mind, we're now done with the UI of the homepage.

00:23:11 So I want to focus on implementing the other pages, and thankfully, there are many.

00:23:17 For that, of course, we'll have to implement the bottom navigation, which is one of the crucial parts in any React Native app.