React Native Expo with Typescript and Tailwind CSS (NativeWind V4) - 2024

hey everyone akar AKA Gordon chesp here uh so this is our first uh uh tutorial uh I'm going to uh set up a boiler plate which you guys can use in any project uh that you do with react native and this is with Expo typescript and Tailwind CSS so uh very good starting point uh in any project that you want to work on so over here I am on the react native website uh if you go under uh workflow there is this section using typescript uh that you'll land here if you click on um since we are starting from scratch it's just going to be one uh simple command here you're just going to copy it uh obviously for this to run you need to have no JS installed on your machine uh no matter you're on a Mac OS or Windows the process is going to be exactly the same so uh you can uh follow um what I'm doing here either on your Mac or your uh Windows machine so here I have a terminal open uh I've already navigated to the folder that I want to to create my project and so I'm going to paste the command here and then just click enter uh we're going to choose a template obviously we want uh type a script so I'm going to use blank typ script and hit enter what is your app name so uh you can give any name you want uh good practice here is to use Pascal cases so you'll have for example uh react native um Journey as you can see every word has a uh is capitalized so that's kind of like Pascal case uh and then you can also do the same don't use uh uh specially spaces in the name of the app so it might actually throw some errors there and then you can just uh hit enter and wait for the uh application for the um files and folders to be created on your folder all right so for me it took like uh 20 seconds uh and you'll see that the project is ready if you get any errors you probably want to make sure that uh your folder name that you selected uh was okay and also maybe try another folder or uh obviously May make sure that you have no JS installed on your machine um but if there's any other problem just comment below in the comment box uh under this video and uh I should be able to help you guys uh so as you can see here there are some uh commands that you will be using to run this project so we'll get back to that later uh but right now uh we are going to navigate to the uh full there and then I'm going to open it in Visual Studio code which is the code editor that uh I have uh you might be using some other uh code editors so feel free to open the uh folder in there and then I'm going to open a new terminal as well uh we have the uh boiler plate with typescript here so you'll see we have our app. TS XX file uh which has the uh entry point which is the entry point for this uh application and the other uh files that come with this uh uh application our package.json file with our packages you can see we have Expo 50 SDK so this is important we'll come back to this later and we have also react react 18 and react native 73 we have our TS config file and also uh our app. Json file which will be used for building the app uh kind of like making it ready for publishing to Apple App Store and Google Play store and then we have also this b. config file that uh will also come back to later so uh we have the typescript boiler P ready now we need to add the Tailwind CSS and for that we're going to use this native wind package uh uh so native v. Dev is where the um the documentation for this library is uh right now they have this V2 which is kind of the uh current stable version but they have this V4 coming up soon uh so I'm actually going going to click here and use the documentation for the V4 cuz that already works so uh in the future when you come here you probably will see this as the uh current stable version of this so uh I'm going to go to this getting started with react native section and we're going to follow these steps uh since we are using Expo the first step is to uh install these packages so I'm going to copy the whole line over here and in the terminal I'm going to paste and hit enter this should install native V react native reanimated and tailb CSS for me and that is done so I should be able to see those in my dependences in package.json file step two uh well we don't need to do part install because we're using Expo and uh we don't need to do that uh for the uh tailin CSS uh the config file we need to copy npx table and CSS in it and then we'll just paste it here enter and that's going to create this uh config JS file and we're going to go and grab this whole uh code over here and then replace what we have with uh that code the one thing that we need to fix is this section for the content right now we only have this app. TSX file which is in the root directory so I'm going to make sure that I will fix this later on uh when you have different uh like components folder Etc you will be adding those also as elements in this array of content so nothing complicated there uh we need to create a global CSS file so I'm going to uh create a new file in this root directory you can put it anywhere you want you can have a Styles folder but since uh we are planning to use a Tailwind CSS so we probably don't need to have like any other stylesheet files specifically like a CSS file so we will uh just put it in the root directory and then I'm going to copy these three lines over here and add the Tailwind CSS um kind of components to uh that global. CSS file copy that and then uh the next step is uh to uh update our Babel config file uh like I mentioned before with in the package.json we saw that our Expo version is 50 so we going to use Expo SDK 50 plus we want to copy this whole thing here and then go to the Babel file and then replace this with what we have and then save this we're almost there a few more steps uh we need to also modify our metro. config.js but uh we don't actually have that file yet so we're going to have to create that Metro Doc config.js and then over here we're going to just copy this whole thing and add it in this uh file here if you had put your Global CSS file in another folder make sure that you have the correct relative uh Direction over here so that you're pointing to the right file but since we have it under the root directory we're good and then uh this step we need to import this in our uh entry uh point which is app. TSX file so I'm going to import that over here uh again this is relative director relative path so you have to make sure that's pointing to the right place uh for us this is fine and then this step we need to since it's X only and we are using Expo we need to also fix this this is for web we're not going to focus on web but just so that we followed all the steps going to open app. Json file and under this web object over here I'm going to add that little uh on line code as well and so with that we have only one more step left since we are using typescript I'm going to click on this and then it's telling us that we need to uh create this uh uh typescript file over here so I'm going to create a new file paste the name over here so it has to exactly uh have this name and then we're going to copy this triple slash directive uh refreshing the type make sure you include all the slashes that's important and then we're going to save this and with that we've gone through all the process and now we are ready to run the application so I'm going to clear a terminal in the package.json you saw that we have the script section here and uh mpm start is basically what we need to do to start our application so I'm going to do that now with the Expo one of the good things that we get is no matter on what machine you are you can actually download the Expo Go app and then uh scan this QR code and then you'll be able to uh preview the app on your phone if you have uh Mac OS you can also open iOS simulator and uh otherwise you can use an Android um simulator as as well if needed by pressing a or I you can open those but we're going to stick with the uh Expo Go app so I'm going to um scan this on my iPhone and then we'll take it from there so since I'm on iPhone I'm going to open the um camera app and then that's going to let me uh scan this and then uh I'm going to be able to to open this in Expo go and then I'll wait for the um build to finish so uh if you're running it on your iOS or maybe even on an Android with the Expo Go app you might run into a problem that the Tailwind the CSS is taking a long time to build uh one of the main reasons that this is happening is again because uh in your directory that you have this app you might have a um folder that has kind of like a weird naming or like if has it has space in it so for example right now you can see that the folder structure that I have over here where I put my react native journey goes through this YouTube channel which has space in it and that's causing this problem so what I have to do is I'm going to close this uh visual studio and then Visual Studio code and then I'm going to go and fix this space remove this space and then I'll come back and do mpm start again all right now I have uh got rid of the space in that folder and I'm going to uh scan the QR code again uh I just did mpm start and then as you can see this time rebuilding is happening really fast and uh uh also happening on my uh phone and just as you see I have the app running on my phone so here I have uh this text that says open app. TSX file which is exactly what I see on the mobile screen so what we're going to do we're going to test the Tailwind CSS classes so uh I'm going to get rid of this style over here for example and also we don't need this anymore and then get rid of this style as well um make sure you have the Tailwind CSS intellisense uh extension installed on your uh vs code so that's what we're going to use uh to be able to add the classes easily uh to these uh different elements so for example for the view class I'm going to do a class name and then just do a flex one so if I save it now you'll see that everything is kind of messed up in the app uh so uh we're going to have to fix that I'm going to do item Center here and then these are all uh Tailwind CSS classes and with the intelligence uh extension that we uh installed we can see all these autoc complete options so I have that now everything is again uh in the middle uh kind of where it used to be and then so we can say that our tail in CSS is working fine we can also add some classes to our text over here for example make it like super large 3 XL and also we can like make it Center text Center so these are just like Tailwind classes and then we can also do some padding of uh for um which is 1 RM and then you can see that that everything's happening in the app as expected so uh that's it basically just keep in mind uh with this uh um process that we went through make sure your folder namings are fine and so if you see any problem it's probably because you might have like spaces in the folder names and or uh just special characters that are not supposed to be there so my recommend recation is don't go too deep into your folder structure just like add this uh application maybe just if you're on Windows maybe like C projects folder or if you're on your Mac just like on your desktop or somewhere that you don't have to go deep into different folders so with that being said uh this is it everything is running fine uh if you see any errors just let me know add a comment ask question in the comment uh box below uh otherwise if you like the video please make sure to hit the like button and also don't forget to subscribe to the channel and this is just starting uh point for this channel I'm going to make a lot of uh useful videos for all of you guys so until next time see you later

Channel: React Native Journey

Views: 2,729

Keywords:

Id: 9SdmwQPblBI

Length: 17min 53sec (1073 seconds)

Published: Mon Apr 01 2024