🔥 Great Expo template - Expo Router v3 & Nativewind v4

hey guys and welcome back to my channel in this episode I would like to quickly show you a really nice template by Expo if you would like to start a new project I highly recommend this template it's using exper outer V3 and Native wind V4 for styling purposes let me quickly show you how to install it I'm here in the terminal and let's install this template so I will start by Bon X create Expo app- e with router Tailwind press enter give it a name I will say my awesome app and now this is going to install everything I'm using ban but you can use yarn you can use npx it doesn't actually matter and now let's go to my ASM app open the code let me open the terminal here and type bun start okay now uh open the iOS simulator no notice that in case you're using a a really upto-date Expo version and you you have an old Expo go client installed on your simulator Expo is going to detect that and is going to automatically update it for you which is really really nice it's the developer experience at some point here this is the project right so it's really nice this is how it is we have a header we have some content uh but uh notice the terminal is complaining uh you should use uh the user interface style um if you'd like to control the uh color scheme so if I open the app ad Json and go down here uh I can add the user interface style and add it automatic and on top of that because I am in export router V3 world I know that I have access to some experimental things and that's the typed routes so if I go to experiments I can enable the uh typed routes so hit save uh stop the server and run it again with clear just to ensure that everything get up to date now press I open the simulator nothing should happen here but there are no errors and now we have some uh type trouts so if I go to Source app directory uh inside the index which is the main rounde uh for for this particular uh navigation system system you see that we have some class names with flex Flex one basically Tailwind for react native and you see nothing is happening when I'm toggling the uh the theme here so now it's dark and now it's light nothing it's happening except of course for this button that has some styling for for the dark and light team and let's change that so let's make everything work for the dark team as well the the only thing that I need to do to change the background for example here I'll say BG white in case it's the light team but if it's in dark mode I'll like to have it black hit save and now voila it's everything is working it can it's starts to make sense but you see the welcome and the header doesn't um pay attention to this color scheme change so let's uh make this a reality and go to welcome uh welcome to project and I'll say text black but if it's dark theme I'll like to have it text white it's save this is working but in dark mode I like to make it fancier so I'll say yellow very mind the auto complete uh which is uh really nice intellisense so you see another cool thing about uh this native wind from my perspective this is is uh really really nice and it used to be really hard to make it a reality and some cases almost impossible is the animation or the transition between colors so now I'm on the dark team but if I'm going to change it to a light team note the transition you see there is not like a direct change between dark and Light Team or vice versa but there is a nice transition right so the colors are going to be interpolated from light to dark team and vice versa which is a small thing but this is what users expect from a mobile application in general everything should be fluid all right so uh let's also change for the the other things here um uh this one this one for this one and this one I like to say text black but if it's dark text white hit save and now everything should appear normally for the dark team um and I would like to add another another uh cool uh view here so I'll sa view I'll have a class name of 32 with a withd full padding on x-axis of four inside it I'll like to have a text and I'll say welcome to this video cool nice so this is here uh let's give it a background light mode I like to have it a background purple maybe purple 500 yeah this is looking good uh justify to the center items to the center okay everything it's aligned here and for the text text white why not make it mono so font mono boom this is amazing uh font bold okay and text to XL so make it larger right now this is not uh doing anything when changing the dark to light team so let's uh change this to dark if it's dark I like to make it b yellow 500 okay okay we're going there you see the small transition here amazing amazing it's it's amazing of course uh since we are in router environment you can always always have another route really easy right so I'll create here I'll copy everything actually uh from uh the index uh and create a new file and say it second. TSX paste everything here I don't want to have any footer header nothing right uh I would like to have only the content and now from the first page which is the index uh when you are pressing on this Explorer button I would like to navigate the second page and because I have enable the typed routes everything is going to be typed for us so back slash second right if I had to uh create another page saying third go back to the to the route here this is going to be automatically typed for us which is amazing amazing so I would like to go to the second page so now if I press explore it's going to go to the second page there there is no like animation right like the native stack so in order to do that you can go to the layout instead of the slot you can say here it's a stack and import stack from expor Outer now if I go you see everything it's working smoothly and the last thing that I would like to show you is this entire thing it's actually working on the web as well so if I hit question mark here in the terminal to open the web I need to press W so let's press W and open the browser okay so I have the browser here and as you can see this is working and if I go to the switch and check the dark team everything just works guys and of course I can go to explore uh I can go back everything just works so I believe it's a really powerful really really powerful system create a template uh have the export outer V3 which is really powerful you have native wind and Tailwind for The Styling purposes you have reanimated for animations you have gure handlers you have everything so see you in the next one bye-bye guys

Channel: Catalin Miron

Views: 17,345

Keywords: catalin miron, AnimateReactNative.com, expo router v3, expo cross platform, expo starter, nativewind, nativewind expo, nativewind typescript, nativewind react native expo, animate react native, react navigation in react native, react native web, expo router, nativewind react native, react native, react native expo router, expo sdk 50, react native expo tutorial, react native expo template, mobile app development, React tutorial for beginners

Id: RsFoOlYj-gc

Length: 8min 57sec (537 seconds)

Published: Fri Jan 19 2024