00:00:02 Now that we've set up our app, we have to figure out how to style it.

00:00:06 And for styling, I'll use Native Wind.

00:00:09 Probably the best way to style your React Native apps nowadays.

00:00:12 It's a utility-first workflow you'll love from Tailwind CSS directly within your React Native applications with the same intuitive classes.

00:00:22 So it'll allow you to style your iOS and Android apps with light and dark mode support, CSS animations, variables, and more.

00:00:33 As I said, the best way to style your React Native apps nowadays.

00:00:37 So head over to Native Wind, get started, and under installation, you can see that Native Wind works with both Expo and Framework Class React Native projects,

00:00:47 but Expo provides a more streamlined experience.

00:00:51 So nowadays, there's really no reason not to use Expo anymore.

00:00:55 So if you choose Expo, you'll be able to see the configuration with Expo.

00:00:59 So let's go ahead and follow a couple of these steps.

00:01:02 First, let's install nativewind and its peer dependencies such as tailwind-css, react-native-reanimated, and react-native-safe-area-context.

00:01:13 You can do that by copying this command and then heading over to your terminal.

00:01:17 I'll actually open up a new terminal window so we can leave our current app running.

00:01:23 And I'll call it terminal.

00:01:26 This one I'll call app.

00:01:29 Within Terminal, I'll paste the command and just press Enter.

00:01:32 This will install all the necessary dependencies and dev dependencies.

00:01:37 And once that is done, we have to set up Tailwind CSS.

00:01:41 So run mpx tailwindcss init to create a new Tailwind config.js.

00:01:47 I'll do it right here and a new config should have been created within seconds.

00:01:53 Here it is.

00:01:54 Then we have to modify it to include all the paths to all the files that contain native win classes.

00:02:01 So just copy it and override this one.

00:02:07 Perfect.

00:02:09 After that, create a CSS file and add the Tailwind CSS directives.

00:02:14 It should be right within the app where you can create a new file called globals.css.

00:02:20 And WebStorm is asking me whether I want to automatically add it to Git.

00:02:24 Yeah, I'll say sure, go ahead and do it.

00:02:27 And here we can paste the Tailwind CSS utilities that will allow us to actually use it within the code.

00:02:34 After that, we have to add the Babel presets.

00:02:37 So just copy this file and put it over to Babel config.js, which we have to create in the root of the application.

00:02:45 So that's going to be a new file called babel.config.js and just paste over what you copied from native one.

00:02:55 After that, we need to create one more file or modify the existing one called Metro config.js.

00:03:02 by copying this and then creating it.

00:03:04 That's going to be Metro.config.js and paste over what you just copied.

00:03:12 Finally, we need to import our CSS file within the app.js.

00:03:17 Or even better, you can do it within your app layout.

00:03:21 That way, it'll automatically be included within all of the other screens.

00:03:26 So I'll just say import globals.css.

00:03:30 And finally, we have to modify our app JSON to switch the bundler to use the Metro Bundler.

00:03:36 You can do that if you head over to your app.json, and then search over for the bundler.

00:03:44 Currently, it's already set to Metro, so we're good.

00:03:48 And finally, for the optional TypeScript setup, we can add this reference to nativewind-env.d.ts.

00:03:56 So just copy it and create a new file right in the root of your application, which you need to call nativewind-env.d.ts.

00:04:08 And you can paste this reference right here, which will add the native wind types.

00:04:13 Perfect.

00:04:14 And then you're ready to try it out by copying this modify app.tsx and pasting it directly within your index.tsx.

00:04:23 So just override everything that's here.

00:04:26 and rename it back to index export default function in there.

00:04:31 And finally, we can try it out by copying this JSX or TSX in this case.

00:04:36 I'll copy just the view and then pasting it over within your index.tsx instead of the existing view.

00:04:43 If you do that, and if everything is working properly, you should be able to see that this text should be in a blue color with a white background.

00:04:51 But I don't think this is a blue text, right?

00:04:55 And it's definitely not extra large.

00:04:57 So we just ran into something that will happen quite often.

00:05:01 Even though Expo made developing React Native applications so much better, it's still not 100% as convenient as developing web apps.

00:05:10 Hot reloading is so much better on web, whereas on native, sometimes you still have to manually reload your application.

00:05:18 Oh, but in this case, it looks like we have an issue where we're trying to import the globals.css that is right here within the layout.

00:05:26 Let's see, what is it complaining about specifically?

00:05:29 The globals variable should exist right here within the app, but it looks like it's not recognizing it.

00:05:35 So yeah, let me just stop it from running by pressing Ctrl C and then rerun the application by running mpx expost start.

00:05:43 When you do that, you can just either re-scan it or just press the letter R on your keyboard, which will trigger the redeployment,

00:05:51 which in case you made changes, will build the new JavaScript bundle once again.

00:05:56 Now you can see that we don't have any issues, but still it looks like our native win styles are not getting applied.

00:06:04 One check that we can make is within the Tailwind config, where we're currently pointing specifically to the app.dsx and to the components folder.

00:06:14 But I'm not applying those files within the app component, it is within the index, and I'm not applying it within the components folder either.

00:06:23 So instead, we can add a more complete path.

00:06:26 That'll tell native wind to apply the styles across every file within the app folder that ends with TSX or JSX.

00:06:35 So to do that, I'll copy the part with the components and I'll override this one right here.

00:06:42 I'll say dot slash app.

00:06:46 forward slash double asterisk, forward slash asterisk dot, and then these file extensions.

00:06:53 This will make sure that these styles are getting applied within the index.dsx of the app folder.

00:07:00 So now you can try reloading the application to see whether that does something, but if even that is not working, stop it from running and then run mpx

00:07:11 expostart dash dash This will ensure that the Metro configuration we set up is in the build process.

00:07:17 So now you can see what I meant when I said that native development is still not as convenient as web development, but we're getting there with the help

00:07:26 of Expo.

00:07:27 So now run R to reload the application one more time.

00:07:32 And, oh, it looks like it's still not there.

00:07:35 So let me do one final check.

00:07:37 Within this Metro config, where we have this global.css file, we have to make sure that it's actually pointing to the right file.

00:07:45 And that is within the app folder.

00:07:47 So right here under input.

00:07:49 You have to change it to dot slash app forward slash global dot CSS, or if you call the globals like I did, just make sure that it points to the same file

00:08:00 because this CSS file contains the tail end utilities.

00:08:03 So now if you start it once again with MPX Expo start clear, you can see that it's rebuilding it.

00:08:11 And with R you can reload and this time it actually works.

00:08:15 Welcome to native wind.

00:08:17 So yeah, there are some inconveniences, but I also made some mistakes while setting it up along the way.

00:08:23 It is very important for you to be able to follow the docs properly.

00:08:26 As you saw, just copy and pasting everything was not ideal.

00:08:30 Sometimes you have to actually do some thinking and notice that we weren't trying to use it within the app.tsx.

00:08:36 We wanted to use it somewhere else.

00:08:39 In a similar way, you have to notice that here it's pointing to global.css, but maybe you call the globals.

00:08:46 Maybe you put it with another folder.

00:08:47 You just have to keep that in mind and switch as you go.

00:08:51 So with that in mind, Native Wind is now working, and you can now change all the colors and use all of the Tailwind utilities very,

00:08:59 very easily.

00:09:00 With WebStorm, I'm also getting automatic Tailwind CSS IntelliSense so I can see which specific class name applies which specific properties.

00:09:09 So for example, fontBold is applying a font weight of 700, and TextXL is applying a larger font size, as well as a bit of a larger line height to accommodate it.

00:09:21 Now, the beauty of Tailwind CSS and Native Wind is the ability to customize it or extend the theme.

00:09:30 For this app, we need to define a specific set of colors that we want to use.

00:09:34 And those colors, we can get directly from the design.

00:09:37 So if you haven't yet downloaded the design, it'll be right within the video kit linked in the description.

00:09:43 Right here, once you click it, you'll get a full free design for this amazing food delivery app, starting with everything from odd screens to success screens,

00:09:54 as well as the homepage, search, and more.

00:09:57 And from here, we want to extract some of the colors.

00:10:01 For example, let's say that we want to extract these four colors.

00:10:05 We have the red, the yellow, the green, and the orange.

00:10:11 So you can select a specific element and then copy the color right here.

00:10:16 Then if you head back under theme, extend, you can now specify a variant of a color you're trying to use.

00:10:23 For example, red.

00:10:25 And then under red, you can say that it can be maybe red 100, and then you can paste this string that you just copied.

00:10:32 So that in the future, when you want to try to use it, you can just say text red 100, and this will apply the color we just copied,

00:10:40 as long as you actually put it within the colors.

00:10:43 So don't forget to put the colors object right here, and then place this red right within it.

00:10:49 That's how you properly override it.

00:10:51 And if you want complete course on Tailbone CSS, if it exists or if there's a waitlist for it, I'll link it somewhere within the video kit down below.

00:10:59 Let's also try to do green.

00:11:00 I'll copy this, which is our version of the green color and add it under colors, green.

00:11:08 Let me do 100 and just paste it right here.

00:11:11 So now if you try to change it, instead of getting some boring green, you'll get our green variant.

00:11:18 Maybe it's better if we set it as the background color.

00:11:21 So I'll say BG green 100. And there you have it.

00:11:28 Of course, this doesn't look the best, so instead, we want to create an entire color palette, starting with everything from this primary color,

00:11:36 which will be this orange one, to the accent colors, maybe like this one right here.

00:11:43 You want to get access to all of these colors so it's easier to use them later on.

00:11:47 Sometimes you might have to double-click a couple of times to get to the actual color.

00:11:51 Just so you don't have to do a lot of clicking, in the video kit down below, I'll prepare the complete Tailman Config.js so you can just copy it and paste

00:12:00 it right here.

00:12:02 It'll include some fonts as well as some colors that we're going to use.

00:12:06 So while we're here, let's also set up these fonts because they're not just available automatically for you.

00:12:11 It's a special font that I decided to use for this fast food application.

00:12:16 So we have to get access to it.

00:12:18 Thankfully, I already prepped it for you.

00:12:20 You can guess where it is right here under assets.

00:12:23 So just download it.

00:12:25 head over into your current application, delete the existing assets folder, and then drag and drop this new assets folder right in.

00:12:34 It'll contain all of the quicksand fonts, the icons that we want to use, such as the bag, check, clock, dollar, and so much more,

00:12:43 as well as some additional images.

00:12:45 such as the avatars, avocados, bacons, and additional toppings that we can add to our application, alongside some success icons.

00:12:53 Alongside the assets, to be able to use these images very quickly, we also need to create a new Constants folder.

00:12:59 So right here in the root of our application, create a new folder and call it Constants.

00:13:06 And within Constants, create a new file and call it index.ts.

00:13:11 In the video kit down below, you can find the final index.ts and just copy and paste it right here.

00:13:18 Once you do that, you'll notice that this file is nothing more than a large list of imports for all of the icons and images that we have,

00:13:26 as well as an array of the categories and the offers that are actually using those images, as well as the sides, such as fries,

00:13:35 onion rings, and so much more, where we actually attach a name and a price to a specific image.

00:13:40 That's it.

00:13:41 This just allows us to use it more easily later on within our application.

00:13:45 But it looks like our IDE is not okay with us importing those assets.

00:13:50 Even though if I right click on it, it actually opens up, but it's complaining that it doesn't know what that is.

00:13:57 So to fix it, you have to create one new file right within the root of your application and call it images.d.ts.

00:14:06 And within it, you can copy and paste the final images.d.ts from the video kit down below.

00:14:13 It basically says, hey, there are images, JPEGs, GIFs, and SVGs, and you'll be able to import them if they're being exported somewhere else.

00:14:24 So once you do that and head back over to index.ts, you'll see that no longer it complains and you can actually get to them.

00:14:30 Okay.

00:14:31 But I believe we were not on the constants.

00:14:33 We were actually talking about the fonts that are within the assets, right?

00:14:37 So how can we put those fonts to use?

00:14:40 Well, head over into the app.

00:14:44 And then layout.tsx.

00:14:46 Whenever there's something that you want to reuse across multiple screens within your application, well, that means that you most likely want to put it

00:14:53 within the layout.tsx.

00:14:55 Oh, and I can't keep looking at this off green color that we have within our index.

00:15:00 So I'll just change this over to text blue 500, and I'll change the background back to white.

00:15:08 There we go.

00:15:09 That's a bit better.

00:15:10 And I'll say, welcome to my React native application.

00:15:16 That's much better.

00:15:18 So now let's head back over into the layout and let me actually import something called use fonts at the top.

00:15:27 within square brackets, it's an expo hook that loads custom fonts asynchronously.

00:15:33 So it's coming from expo font.

00:15:36 Then I'll also get access to the use effect hook coming from react and directly within a root layout.

00:15:44 I will say const, open up a square destructuring syntax and call the use fonts hook.

00:15:50 To it, you want to pass an object.

00:15:54 that'll list all the fonts alongside their names, such as quicksandbold.

00:16:01 And then you have to require the path pointing to that font, such as dot dot slash assets, forward slash fonts, forward slash quicksandbold.ttf.

00:16:14 And I will duplicate this four more times.

00:16:17 For the second one, instead of calling it bold, I'll call it medium.

00:16:22 Then after medium, we can have a regular.

00:16:26 After regular, we'll have a semi-bold.

00:16:30 And the last variant should be light.

00:16:33 There we go.

00:16:33 So now we are importing all of those fonts, and it looks like it can't find them.

00:16:38 Instead, quicksand, I believe, within the assets fonts is spelled with a lowercase s.

00:16:44 So I have to fix this a couple of times.

00:16:47 for a lowercase s.

00:16:49 Once you do that, you might need to reload, so open the terminal and press the letter r.

00:16:54 Oh, and I just have to fix one small typo.

00:16:56 It is quicksand.

00:16:58 And reload.

00:16:59 Now we get access to the variable called fontsLoaded, as well as the errors if they don't load.

00:17:07 And then we can use a new useEffect hook, which is a hook that gets triggered whenever you run your application or whenever the dependencies change.

00:17:17 So here we can say to rerun this function whenever the fonts loaded changes or when the errors change.

00:17:26 And then we can say, if there is an error, simply throw that error.

00:17:30 Let us know what went wrong.

00:17:32 But if the font's loaded, well, then we can render a new splash screen.

00:17:39 This splash screen is coming directly from the expo router.

00:17:44 And this will let you manually hide the splash screen once the resources are loaded in.

00:17:49 So I'll say splash screen dot hide async.

00:17:55 You know how on mobile devices, when you open up an app, there's that little splash screen that shows up while it's loading?

00:18:01 Well, once we load the fonts, we can hide it.

00:18:04 Finally, you see this ugly index header present at the top?

00:18:08 Well, we can very easily remove it through the Screen Options prop.

00:18:14 where I'll say header shown will simply be set to false.

00:18:20 If you do it like this, now we just have a very blank screen with one single piece of text, and we are ready to test this font out by heading over to this app.index.dsx.

00:18:32 Before I test out the font, I'll make the text a bit bigger, like text-5xl.

00:18:37 There we go.

00:18:38 Welcome to my React Native app.

00:18:43 I'll also center it by giving it a text-center.

00:18:48 And now I'll change the font by saying font-quicksand-bold and press save.

00:18:56 See how now it applied a completely different font, which is much more playful.

00:19:01 And if we change it to this text-primary, it just might make you want to order some food.

00:19:07 It works very well with a food ordering application.

00:19:11 So with that in mind, we have now not only set up the styling for our application, but also initialized our own custom styles within the Tailwind config.js,

00:19:22 as well as imported some of the fonts, icons, and images, and made it easier to use those fonts, icons, and images within our application by exporting

00:19:32 them all from a single, simple constants file.

00:19:35 Pretty cool, right?

00:19:37 With this done, in the next lesson, we can immediately dive right into setting up our home screen.