Transcript for:
Summary of React Native Beginner Course

[Music] hello and welcome to 4 hours of react native tutorials and instruction this video is made up of eight tutorials for learning react native that build upon each other much like the chapters of a book throughout the lessons in this video I'll mention links being available in the description below I've compiled all of these links into one GitHub resource that you'll find a link for in the description hi I'm Dave gray and I'm the creator of the tutorials you can subscribe to my YouTube channel for more tutorials like this one you can also follow me on Blue Sky and if you're feeling generous you can even buy me a cup of coffee or join my patreon hey everyone this react native for beginners educational video series is made possible by zero to Mastery also known as ztm I've been recommending ztm on my channel for a couple of years now because ztm has an amazing selection of in-depth up-to-date courses react nextjs node.js ztm has it python AI prompt engineering ztm has it security code interview prep ztm has it when viewers ask me where they can go to learn more after completing a course on my channel I recommend ztm and I always put links in my video description to ztm courses just like I've linked to zm's react native course in the description for this video after you complete this react native course zm's complete react native developer is your next logical step ZT tm's course will reinforce the basics you learn from me and guide you through creating large scale react native apps that you can put in your portfolio and show confidently in a job interview look for the link in the video description and check out ztm today and we begin on the react native homepage you'll find that at reactnative dodev and you can see it says learn once write anywhere that's because when you create an application with react native it can run on Android devices iOS devices and all types of web enabled devices laptops desktops possibly tablets or any other internet device as well as you see the different logos here for browsers different platforms and of course Android and iOS let's scroll down just a little further and you can see it says create native apps for Android iOS and more using react and that's what we're going to learn how to do now let's talk requirements because at the beginning of every course you have requirements both what knowledge should you already have and what tools do you need to get started let's begin with the tools so first we'll go to code dovisual studio.com and if you don't have Visual Studio code or VSS code for short you want to download that for the platform you're on here it automatically identifies that I'm on windows so it wants me to download for Windows if you're on Mac or Linux those are also support it now after you get VSS code you will likely also want to get git so that is available at git g-s cm.com and here is a download for Windows in the bottom right of course this will also identify what operating system you are on and suggest that download for you now after you have get there's one more thing you want to download and that is nodejs and you'll find that at nodejs.org now you can see you can download nodejs LTS is the long-term support version and that's what I recommend okay I have VSS code running I have closed the welcome screen that you might see after you install VSS code and I just have an empty folder open my folder is named react native series that you'll see over here you don't have to create that if you don't want to but that is what I have called my folder and then you have some menus here at the top now I'm zoomed in some to help the video and help you see what's going on so you don't see all of the menus at the top but if you click the three dots you see the other menus that are available we're going to open a terminal so you can choose the terminal menu and then choose new terminal here and once you do that you'll have a terminal window I already had one open so I just closed one but with this terminal window you'll notice a couple of things one you can see where my folder is here on Windows I'm in documents tutorials and then the react native series folder that I created but also at the top you'll see what type of terminal I'm running so if I click this where it says bash I believe I could here maybe the arrow to the right there we go I could change the type of terminal that I have here is Powershell that comes with Windows but bash comes with Git and that's what I want to use now I just opened another new one but I am using the bash terminal and since you installed Git You should also have that option available for your vs code so you'll be using the same terminal as I do throughout this series now let's also check what versions we installed and we can do that say with nodejs that we installed by typing node DV and you can see it gives me the version that I just installed now if you're watching this video months after I've created it you may have a newer version and that's okay as well now let's do the same with Git I'll just type git for g-v and we'll see what vers version of git I have installed so those are the versions that I currently have and if you have newer versions than that installed that's okay too and since we've installed node we also have npm so we can check the version of that as we will also use it in this series and there is my version of npm now before we're finish talking about tools I want to mention a couple of optional vs code extensions you can add now I'm not going to focus on those but since you're learning react native you can go ahead and add them if you want to so let's search for react native and then of course it'll take just a little bit of time and we should get what extensions are available here is the react native tools if you want to install that that would be a good one to use another one that we're going to have is called Expo tools and Expo is a framework that we're going to introduce here in just a moment so you could add the Expo tools as well you might want both of these extensions again I'm not going to f focus on them but as you're learning react native and continue on your journey they will probably be helpful for you and now continuing with requirements let's just talk about what knowledge you should already have I'm not going to say knowing react is a prerequisite although it will help you if you're learning react native if you already know react it will be easier to understand some things but the things that I do require are what are called the pillars of the web HTML CSS and JavaScript now I have free courses for all three of those topics on my YouTube channel so you can find those and watch those videos as the prerequisites for this class just as when you take a college course or some other course sometimes there is a class you should have taken before these three items will help you as you now learn react native and we're back on the react native homepage let's click the get started button and here we have get started with react native but one thing they say here that I want to really highlight is we believe that the best way to experience react native is through a framework a toolbox with all the necessary apis to let you build production ready apps and so with that said we're going to use a react native framework called Expo as they mention here and Expo is a framework that will give us a lot of extra tools to help build our react native apps that will work on all platforms and now we're on the Expo homepage and this is at expo. deev from here we want to go to the docs link so let's go to the docs and from there we want to click create a project now you can see on the create a project page they give us some code that we can copy and we'll paste it into our terminal in vs code to help create our Expo application with react native back in vs code I'm going to open a terminal window by pressing control and the back tick and now that I've copied that code from the Expo website I'm going to paste it here by right clicking and of course I'm on windows so if you're on Mac or Linux that could be just a little different now that I've pasted that command in here it says npx create Expo app at latest so it's going to install the latest version for Expo let's go ahead and press enter it will start to ask us some questions and it says what do we want to name the app well I'm going to suggest that you name this welcome as it's just an example here in the welcome get started video you could name it get started or go with my app if you want to I'll just say welcome what I'm going to call it is lesson one because I'm creating a series of tutorials here so lesson 01 and press enter and now it starts creating everything that we need for this project now one thing I'm commonly asked about a tutorial series and especially a few months after it's been created or a year or even two years later is is this tutorial still valid because Tech does change and I'll say yes this tutorial is still valid if you install the same dependencies that I have in my package Json file and you'll soon see a package Json file in this lesson1 folder when this finishes installing now what I'm going to suggest if you're watching this video a year after I've created it or two years after I've created it is you're probably going to want to get my code from GitHub and there you're going to copy that package Json and then you'll type npm install to get the exact same versions that I use in this tutorial and that will H let you have the same experience that I've had so for now you can see we have a message everything is installed and it says we want to CD that is change directory and go into lesson 01 so let's do that down here CD lesson 01 if you named yours welcome it would be CD welcome and that is going to take us in into that lesson1 folder that I have so now you can see I'm in documents tutorials react native series and as far as the terminal is concerned I am in the lesson 01 folder now up here we'll have to open it to see what's inside I was talking about a package Json file and now you see this so we typed install latest if I scroll back up here we might still be able to see that wherever no there's a lot of messages but we had that pasted command at our terminal and it said npx create Expo app at latest well behind latest are a lot of different packages this create Expo app installed so I'm going to close this and we can see everything that was installed under dependencies in my package Json file so now that I scroll down you can see all of these dependencies it added for our application here's react here's a lot of things to do with Expo we also have some react navigation for Native up here react native things down here so a lot of things were installed now these are the versions that I currently have as I create this tutorial if you're watching the video a year or two years from now there's probably newer versions of these things available which you will get if you install at latest like we just did here in this video but if you want to have these exact same versions that I do for the tutorial and have the exact same experience that I show what you'll want to do after you go ahead and copy my package Json from GitHub you could just highlight all the code and paste it in here if you want to but you want to have this package Json file and after that I will just open up the terminal window again and I can type npm install and it will install all the versions that are in my package Json file and that's what it's doing now but it quickly just looked over everything and said I was already up to date and so it left it alone if you haven't installed anything yet it would take just as long as that first installation back on the Expo website we were on the create a project page now let's go to the setup your environment page and it asks you a few questions it says where would you like to develop and you can choose Android device you can choose iOS device you could also choose Android emulator or iOS simulator and we'll look at each one of these so the Android device itself once we choose that it says use Expo go that is the Expo application that we'll use to test out an application with but it doesn't mean we're only going to build for Android and then it gives us a QR code that you can scan that will take you to the Expo app the Google Play store or the Apple Store would have that to download for example so if I scroll back up here and I choose iOS device then it still says Expo go and it says set up an iOS device with Expo go before I believe it said set up an Android device yep set up an Android device so either one of those now if we said we had an Android emulator that means you probably want to install Android studio now that may still be what you want to do you may want to check it out in several different environments and running Android Studio where you would traditionally write an Android application lets you use the Android Studio emulator so that can be set up on Mac OS and windows if we chose iOS simulator and we came down well then you need xcode where you would traditionally create an iOS application but that is only available on Mac OS so you would need a Mac to do that it says open up the Mac App Store it doesn't give us a Windows option at all but what we can do is choose either one of these depending on what type of mobile device you have I have an Android so I'm going to choose this we come down here and scan this QR code and install the Expo Go app okay you should see a screen something like I'm showing here that shows Expo in the Google Play Store right now for Android go ahead and install that and then we'll come back to the tutorial and I also want to quickly mention while I won't go over those that I will go ahead and provide links to Android studio and xcode in the video description if you want to install either one of those okay with the X app now installed let's click on start developing over here on the left as we're still on the expo. deev website and you can see it gives us another command to run in the terminal for our application we're going to actually start the app with npx Expo start you can copy that and let's go back to VSS code back in VSS code now I'm going to paste that command in npx Expo start and press enter and notice once again I'm in that lesson 01 folder or you want to be in the folder that whatever the name is that you gave your folder you want to be in that folder when you run that command and so now it has started the project let me scroll back up because it gave us a lot of information here it gives us a QR code and you'll scan this QR code with that Expo app that you just installed on your mobile device It also says here's the IP address that we have set up for the application that is now running and we'll also check it out as if we were browsing a website at local host on Port 8081 so it's available in both of those locations if I scroll down there's some other commands available here as well so right now get out your mobile device open the Expo app and scan this QR code I'll show you some screens to show you what it's like here's what it looks like when I first open the Expo app and I'm going to tap scan QR code here's what the screen looks like when I'm getting ready to scan a QR code but the camera hasn't activated yet it takes just a second you'll be able to tell when it does and then just aim your device at this QR code and here's the welcome screen for the application as I see it on my phone and that's what you should also see after Expo opened up the application but what if you're not seeing it what if there's a problem and maybe you're seeing a screen like this this screen for example indicates that I cannot load the application so let's look at some troubleshooting back on the Expo website if we scroll down there is a having problems section so go ahead and click that and when you open this up it gives you a few tips make sure you're on the same Wi-Fi network with your device and your computer they need to be on the same Wi-Fi if it still doesn't work it could be due to Something in the router configuration and that could be a bigger issue so maybe if you're on a public network like in the school library or somewhere else you might need to use npx Expo start-- tunnel but that will slow things down and they recommend that if you have to use tunnel you may actually want to use the Android Studio or the xcode emulator something like that because this will be a little bit slower if you have to use the-- tunnel route I will say I have tried it with-- tunnel and it wasn't that slow for me so you might might as well go ahead and give that a shot too again only if you're having trouble getting the app to show in your mobile device when you're running this if not if you weren't having any trouble that original just npx Expo start should be all you need now back in vs code we have got the application running in Expo and you can see it on your device that's great let's scroll down here and look at these commands you can also press W to open it on the web because remember on the web it's at this Local Host 8081 instead of this address up here so for this I'm just going to come down here and press W and now it's going to open it as a website in the browser it will take it just a moment to load but when it does we should see the application as expected here in our browser and we do now of course this looks very different from being in the mobile phone view this is a wide screen on a browser but we still see the application we can still click in the status bar to go to the other page everything works as expected now I'm going to show you one other thing that we can do to make Chrome look more like a mobile device so I'm going to control shift and the letter i to open Dev tools here I'll clear all of that out but now I'm going to scroll this or pull this over here so we see more of the window here on the left now notice a couple of things you may not have this bar at the top yet so I'm going to click that and take it away because this this is the view you may have when you open up Dev tools which is what I did with control shift and the letter I I'll close them real quick to show you one other way you can also rightclick and choose inspect and then it takes you to a different tab in Dev tools but it still opens Dev tools either way what you want to do now that you have Dev tools open is click the little icon up here that looks like a laptop and a mobile device and it gives you this along the top top and now what we can do with that I'm going to pull this over further and I like to have that on my console along this top bar you can choose the drop down menu and you can choose different mobile devices some of them will show the frames and some won't so for example I'm going to choose an iPhone 6 7 or 8 now it actually shows the display frame around it if I choose a different one may not so let me choose like an iPhone x it doesn't show the phone around it so it doesn't quite look the same but you are seeing the mobile view also notice I'm viewing at a smaller view here this 75% instead of 100 because 100% takes it off the screen so back to 75 this also says mobile over here see what this does looks like everything is fine there might oh hide device frames so if you didn't have have the frame before when you went to iPhone 67 and 8 now I don't have a frame you want to click over here on the right and click show device frame and then it will show the phone around it so even for the web view you can kind of check to see what it looks like on a mobile device but it's not as good as running it on a mobile device and since we have the expoo app it's better for us to just look at the web view like this and use our own mobile device to check the application as well back in vs code I'm going to close the terminal window close the package Json file and let's go ahead and look at this application I should open up the app directory and then the tabs directory now let's go to the index page and here we should see our welcome let's go ahead and change welcome online 19 to hello world and save our changes now check your mobile device to see if the app reflects this change here's mine and you should also be able to see the change on the website well congratulations you have your first development environment for react native set up you have your first application running although this sample project was already built for us so in the next video we'll start building an application from scratch in lesson one we set up our react native development environment and explored an example project created with the Expo framework today we will continue to use react native and Expo to build an app from scratch I've got vs code open you'll want to open yours to just an empty folder then you can do control and the back tick to open up your terminal window from there we're going to type npx create dxo apppp and let's type a name for the app I'm just going to call it my app and press enter now it'll start creating the project for us and we'll come back when it finishes okay I'm back now and the project is ready we just installed an expo application with the default template now notice we didn't have to even use the template flag what would happen if we used a different flag would be two dashes and template and for example we could use blank to actually have an empty project but what we did was just not provide the template flag and therefore it uses the default template now look look at what that means in the documentation quickly you can see the benefits of using the default template it creates a new react native project with Expo it also includes recommended tools like the Expo command line interface that's what CLI stands for includes a tab Navigator so like we had on the bottom of our example project and it uses the Expo router so we get a basic navigation system already built in and then it says it automatically configured to run a project on multiple platform forms which is the main reason we're probably using react native we want to develop for Android iOS and maybe even the web also typescript is configured by default and I want to quickly touch on this you can use typescript with react native and Expo however we will not be doing that I wanted to not have a barrier for beginners to get started in this course so I'm not using typescript however if you know typescript go ahead and use it there's nothing preventing you from doing so okay back in vs code I do not want to type that once again but what I do want to do is go ahead and type npx Expo start well I need to be in the folder so I need to type CD first and then my app now that we're in the actual folder or directory if you will that has the application notice it says my app here at the end of documents tutorials react native series my app now I know I'm in that directory so now I can go ahead and type npx EXP start this will start up the application it should give us the QR code like we were used to seeing in the previous tutorial when we set everything up remember with that Expo go Application that you installed on your mobile device you can now scan this QR code and see the project running on your mobile device likewise there are some other commands as it shows here and pressing W opens it on the web so for now I'm just going to press W and that should open it up in the browser as you see it's building it and getting it ready I'll pull the browser window up and we should soon see the project in the browser here at Local Host Port 8081 and here is the example project once again that it built with that default template and if you scan the QR code and launched it on your mobile device you should now see it there as well here's what it looks like on mine okay now back in VSS code I'll close a terminal window let's go ahead and open up the directory the folder with our project here now that we have that open let's go inside the app directory and now we don't want the layout the HTML and not found don't delete them but we don't want to move any of those or work with those today what we do want to do is go inside of the tabs directory because we have that tab navigation built in already here is our index page note that it's a index. TSX which is a typescript file by default so we might want to change that since we're not going to use typescript I'm just going to click on the index first let's go ahead and select everything with crol a that's the select all and just press backspace to get rid of it that's how I usually clear out a file we are going to add some content here but first I want to show you an extension that I use that I didn't show you in the last video so let's go to the extensions icon over here and we'll start looking for an extension I can look for what I have installed already because I already use it I should scroll down here to E S7 plus react rux reactnative you want to get this one and it will help you get have shortcuts essentially to create re react components and it also works with react native so I can put a link to this in the resources as well but es7 plus react rux reactnative Snippets and that's the extension I'm recommending okay back here if you have that extension now you should be able to type rnf and see that is a shortcut for reactnative functional export component so I'll select that and we get our full component now I'm going to show the file tree again instead of the extensions now that we have that notice I have index selected here if you don't just double click it once then contrl D will select the next One contrl D again will'll select the third one and let's change this to app so I'm going to say app here I did I believe this was lowercase up here so let's switch that to the lowercase App instead of the uppercase but it wouldn't really matter either way either way we have app and default app down here and our text says app but let's change this text and let's put coffee shop at least for this example now that we've made some changes if we left the app running down here we need to press R to reload the app you won't notice this if you're looking at the web page but you should on your device if the application is still running on your mobile device here's what it looks like now on mine and as I mentioned in the first lesson I default everything to dark mode so you're definitely not seeing much on my phone right now let's go back and add some CSS Styles so we can actually see the words coffee shop okay back in VSS code I'm going to close that terminal window once again at the top of our file now we need to import Style sheet now after we have stylesheet imported let's go ahead and say const Styles and we'll set this equal to styleshe sheet. create now we'll have parentheses and then we'll start an object with the curly braces and first let's go ahead and put in some styles for our container this will be an object and here we'll have Flex equal 1 and now this is going to make the containing view fill theen screen as you see that view up here the view that we have right there so this is where we'll apply the container style after that we're also going to say Flex Direction and this will be column now if you haven't used CSS in JavaScript before you might be used to writing something like Flex Direction with a hyphen but that is not how CSS Works in JavaScript so anywhere you would normally have a hyphen instead you're going to have camel case as we see here with flex Direction now after that we want some text Styles also so for our text above we're going to set the color to white let's set the font size camel case once again there to 42 font weight and let's set this to bold and then text align let's go ahead and center the text Okay so we've typed out our Styles but we're not using the Styles yet we need to apply them up here to the these different elements that we have inside of our component so let's do that by putting the style attribute then inside of this style prop I should say prop instead of attribute I'm used to elements like HTML attributes but here the style prop and we'll pass in styles. container so now all of the container Styles will apply to that view likewise with the text have the style prop we'll set this equal to to styles. text okay now we've applied our CSS to our component let's save the file once again open up the terminal window and press R to reload the application once again look at your device now to see the updates and here's what mine looks like and as you can see we can now see the words coffee shop but it's way at the top here and of course we're going to adjust that as well back in VSS code I'm going to go ahead and press contrl C just to stop the server for the example here for a little bit and once again look at my directory here where it has react native series and then you can see I'm in the my app directory but notice after that it also has lesson-2 and that's because that's what I've named this branch of the repository now we're going to add some images to our project and you can download my images from the course resources Link in the video description it will take you to my GitHub repository so just note that these images are in the branch lesson-2 when you visit that GitHub repository so we will put the images in this assets directory inside of the app directory as you see here yes if I close this it should no assets is actually beside the app directory I wanted to make sure so that's where you will find these in my repository as well in the assets directory and then in the images directory and you can see there's already several images in here that were put in here by default when we created the project what you're going to find are three additional images as you now should see on the screen we've got a coffee- icon a coffee- splash and an iced coffee so I'm just going to drag these over into the assets directory now you'll see those extra three here and I'll make sure those are in GitHub for you as well with the new images added I'm going to close this back back up over here in the directory and we're going to continue to stay focused here in the tabs directory on that index file let's go ahead and restart the project if you stopped it like I did so that was npx Expo start it should once again pull up that QR code if you need that to relaunch your project in your phone I'm going to go ahead and close the terminal window now and get to work because we're going to put the image or two here inside of our project so at the top now I also want to import image background and we can see that in the list so now we've imported image background I'm also going to press alt Z just to wrap any code down to keep it from scrolling off the screen so you can't see it also like to give a little space between the import and the beginning of the uh component that I'm creating and also the export if I'm exporting it like you see here okay after that let's add that image background to our project and it's going to go between the view and the text so we'll start with the image background right here and I'll close that out should give me the closing tag automatically I'll highlight and cut with CR X and paste it in underneath so now I have the closing one but we've got some different props to pass to image background as well so let's go ahead and do that here we'll say the source well we don't have the source yet do we so let's go ahead and bring that Source in up above we have another import here here so we'll import and I'll call this iced coffee image and I'll just abbreviate image with IMG let's say that is coming from and now we'll have at SL assets SL images SL ic- coffee. PNG now notice the red squigglies here so this is telling us something's wrong and I also didn't spell Source correctly there that helps but this is part of Ty typescript and we're actually not going to use typescript although we had been using it so far because there wasn't anything specific to it so you didn't really notice the difference between it and react or JavaScript in general but notice our file over here I mentioned this before it's index. TSX let's rename this so I rightclick on it and choose rename of course if you're using typescript don't do this but we're going to name this index jsx press enter and now you can see the difference we no longer have the red squigglies by the import of our image so now I have my iced coffee image I'll copy that and put it right in here as the source for the image background now after we have the source I'm going to set the resize mode and set this equal to cover because we want it to cover the entire screen if possible and we'll set the style equal to styles. image but wait we haven't created the styles for the image yet so let's scroll down and let's add those and let's put them after the container that's where I want to put those so I'll image start my object here but we have a squiggly yet because we don't have a comma after the image object okay now for the image first of all we'll set the width to 100% also set the height to 100% just so we can cover all screens even a web screen for now even though in the future we may want to use a different image if we had a huge screen compared to a small phone screen then we'll put in Flex one again like we did before then we'll have resize mode and we'll set that to cover as well and then we'll put justify content and let's go ahead and set that Center okay all of those Styles look good and we have applied those to the image up here so once again let's reload the project by pressing R and take a look at it on our device here's what it looks like on my mobile device and that's pretty good but coffee shop is just a little hard to read because of the white letters and of course the milk in the coffee so let's close the terminal here and let's add an additional style to the text Styles so we can see that just a little bit better we'll say background color and now we'll say rgba and inside the parentheses the first three zeros mean black and the last one is the opacity so we'll set it to kind of a a seethrough of 50% essentially 0.5 go ahead and put a comma after that as well I'll save open the terminal once again and hit R to reload let's once again look at the result on your mobile device yes that's much easier to read it gave us that background color underneath the white that was still seethrough but it made that white text easier to read and here it is back in the browser and of course this is the widescreen view it doesn't look that great right now with this image we might want to look at some platform specific changes in the future in this series because setting the single image for the background may not be the best for all image or all device sizes however if we open up the dev tools like we had in the previous lesson with control shift and the letter I and now we choose to look at it with a mobile view as I showed how to set that up in the last video as well let's go ahead and shrink it down to 75% we can see it here in the iPhone 5 view we could switch it to maybe iPhone 6 it looks pretty good we're not seeing the uh tabs down here in dark mode like you would see on my phone though they are in light mode at this time if I click over this looks like it's in dark mode anybody worried about the warnings over here don't worry about that for now that's just stuff we're seeing from their example project nothing that we did that is on this page here when we pull it back we don't have anything on the page we created so far okay back in vs code once again I'm going to close that terminal window now what about the other images we added to assets if you remember inside this images directory we also had a coffee icon that we could use and we had a coffee Splash let's talk about the splash screen first so I'll close assets back up we need to come down to the app. Json file one other note here notice you may not have all of the little icons that I do in my VSS code file tree if you want to get those I'm just using an extension for those let me see if I can find it vscode Das icons is the extension you want there it pulled up so install this extension if you want to see all the little icons beside the different files like I have over there VSS code D icons okay let's scroll back down and find that app. Json file that has the Expo icon next to it if we look at this it's really a big object that's kind of what Json is and here we have the splash property so it's got some settings here and it looks inside of assets images and splash well the current Splash you have probably seen it's just kind of a white look cing page with a little Target in the middle and we can change list let's just change it to coffee- Splash I believe is what the other file was named and now I also want to change this setting I think we want it to cover and I'm going to change this white hex code here to Black so you want six zeros overall now you will not see the splash screen in the web mode you will only see this as it loads on your phone so here's what it looks like on mine when you press reload so let's go ahead and first open up the terminal and press R to reload now I'll screen capture that and show it to you here is what the splash screen looked like on my phone and then of course it goes away as soon as the app loads so closing the terminal once again what about the icon well it's very much a similar setting we see icon right here we have assets images and I believe we just named that coffee- icon so now we have a different icon we can use let's go ahead and save that don't worry about the typescript uh TSC config.js file if you have that in your project and you're using typescript of course you're using it otherwise you're really not but let's just go ahead and save that whatever it changed for now come back here to this app. Json where we have changed the image for the icon now so how do you see the icon right now of course we haven't in installed this on any device and that's normally where you see an icon when you would launch the application we'll go ahead and look at your mobile device and what you want to do is shake it with the app open that should open up the Expo menu like you see here on my device but you can see I'm not seeing the new icon yet I'm just seeing kind of the old blank one so let's go ahead and open the terminal window once again contrl C to stop everything instead of just reloading I just want to restart everything and we should definitely then see the new icon so npx Expo start we're going to start everything back up just rescan the QR code and then of course when you have the app open shake your mobile device and you should see the new icon here's what it looks like on my device notice it there in the top left by the name of the app where it says my app okay back in vs code let's close the terminal window we can close the app. Json file we're now inside of that index. jsx once again and just kind of a student assignment here go ahead and take this explore page because we've already got that Linked In the tabs at the bottom of our app and you should go ahead and put some information in here delete everything that's in here and use what you've already learned in this lesson to put some information about the coffee shop say the store name address maybe the store hours put all of that here on the second page and in the next video we'll explore the Expo router you'll learn how to rename this page and we'll name it contact or something like that but we'll also learn all about how the file-based routing Works in react native with Expo I've got vs code open and we'll start today's lesson with the completed code from lesson two so let's start up the application I'm going to open up a terminal window with control and the back tick and from there we'll type npx Expo start this should start up our application it'll take it just a little bit to get the bundler going but then we'll see it launch here and we should get that QR code that we can scan with that Expo Go app to see the app on our mobile device also you can press W to open on the web and that's what I'm going to do right now and it'll take it just a moment to get ready to open in the browser as well but I'll go ahead and click the browser here you can see it it's not too well adapted to the full screen but if we press contrl shift and the letter i to open up Dev tools and you have your Dev tools set as I do you'll see it in a iPhone 678 frame here now you can do that first when you open up Dev tools by clicking this little icon up here that toggles the device toolbar and then over here in the dimensions drop you can choose which phone they don't all have frames available here in Chrome I've chose iPhone 678 after after that I've got mine set to 75% of the regular size and this little drop menu right here will let you show or hide the device frame and I choose show the device frame so that's how I've got my Chrome settings now let's go back to VSS code back in vs code I want to close the terminal window and we'll be learning all about navigation with the Expo router and of course navigation tabs that we've already seen in the demo app and were applied to our application already but we'll learn about how they work so let's open up the app directory inside of this directory here you can see the tabs directory now we don't want to use that from the start so we'll be getting rid of our tabs here so grab your index. jsx that we created and I believe we renamed that from TSX because we're not using typescript but if you want to use typescript go right ahead because it's already enabled in this demo project now once we move this let's just move it directly to the app directory so it's outside of the tabs now that we moved that it opens up this TS config file immediately and it added this app.jsx or app index. jsx in here we don't really need to add each individual file that it will want to when we move those let's just change this by adding one extra line here we'll start with two asteris slash one Aster and then jsx just like you see for TS X above and then we can go ahead and remove that app SL index. jsx and it shouldn't continue to add another line for each file that we move so I can save that TSC config.js for now and we shouldn't see that again now let's come back up here let's also move the explore file out of the tabs and into the app directory directly there besides that just so we don't see the tabs applied to our application right now I just want to disable them by right clicking here and choosing rename you can see that's also F2 on windows at least and if I go over here to the left I'm going to just type in X to rename the file so it doesn't apply this tabs layout file for now as we look at our application okay with those changes in place let's click on the index. jsx and we're going to work inside of this I'll press alt Z to wrap any code down that would go off the screen but let's look back at the app quick in the browser at least to see what we've got and it looks like it had an error let's refresh the application and now let's see what we have yes this is much better now notice we have a header now we can learn today about how to hide that header and it was hidden before but at this point since we're not applying that tabs layout file this is what we have no tabs at the bottom and now a default header is showing at the top now much like the web one way to navigate inside of a react native and Expo app is to use a link so let's import Link at the top it's a lot like the anchor tag the a that we use in HTML except this is link and it comes from Expo router and if you're familiar with nextjs we also import links there so this shouldn't be too new if you've worked with nextjs just a little aside there though it doesn't matter that's not required to learn react native okay underneath the text we have for coffee shop let's put our link so we'll have a link and a href and now this understands already what we have available to us where we could navigate to let's navigate toexplore because the Explorer file is next to our index. jsx now after we navigate there we'll want to apply some Styles but we don't have the styles for the link yet so let's just put explore here and have the closing link tag and now let's create some link Styles so we need to scroll down and we see the other styles we had applied here in our page already let's take this text I'll just highlight all of this then I can do shift alt and the down arrow and copy that down I'll put a comma there to separate them inside the object and I'll make this link now we just want to change a couple of things for most part it's the same but here I do want to add a text decoration line set that to underline and then under this I want to put some padding let's set that to four now if we leave this as is they're going to be just right on top of each other or essentially one right above the other the title and then the link would be directly under it so let's put a little bit of margin here on this title and right now we've called this text maybe we want to change that name so I'm going to say margin bottom set that to 120 let's go ahead and change this so we know what we're referring to title here then we need to scroll back up where it's applied and we need to find that it says Coffee Shop styles. tile now here we need to go ahead and apply the style to the link so style equals styles. link everything's applied let's take a quick look at that in our browser and you can look of course in your Go app if you want to so now we have coffee shop and explore it's a big link I don't think we would normally want to keep it that big but it should take us to the explore page right let's click it and find out there it is no problem we're at the explore page notice the header automatically gives us a back arrow so we can go back to that homepage there it is so coffee shop and explore now this isn't something I would want to keep on the app it doesn't look that great I just wanted to show you how to create a link however a button might look good here and we can create a button with the link tag if we use the as child prop so let's go back and do that back in vs code let's go ahead and scroll up for a little bit of room and we're going to change this link into a button and I'm going to come down here with a little bit of extra for the lines after that what we want to do is apply that as child prop here now inside of this the child needs to support the onpress and the onclick functions so or events if you will so what we need there is something from react native that will do that unfortunately it has something that we can import here at the top called pressible so once we've imported pressible let's put that inside of the link and let's just wrap that around the word explore and now we can't just leave the text explore there it needs to be inside of text itself so let's go ahead and put in text as well and then put explore inside of that now we haven't applied Styles yet but we do have the basic outline here of a button let me get rid of or let me add a little space here between the coffee shop title and the button we're creating and the image background so this is what we're looking at and now we just need to apply some Style here to make it look like a button and we're going to change this style above as a matter of fact we only have one property now that we want to apply to the link and that will be to Center the whole thing so we can say margin horizontal there we can set that to Auto so that's kind of like MX Auto when we're writing CSS so that would be the margins on the left and the right set to Auto which will Center the button okay now we still have the as child prop it just wrapped down wrapped down here but now the pressible it's going to need a button style and even our text will probably want to style that too so let's go down and add those to our style object below I'm going to start by highlighting the link here once again pressing shift alt and the down arrow to just copy that down put a comma here and now I'm going to change this to button text because it will have several similarities so the color will still be the same the size will be different let's drop this way down to 16 from that 42 okay bold we want to keep that uh text align Center yes that's good I'm not going to leave it underlined I think the button will be obvious that you could click it the background no that will be styled with the button itself and a padding of four let's go ahead and keep that so now let's put the button Style just above the button text another comma here in our object and now let's add the button Styles let's go with a height of 60 a border radius of 20 background color similar but not quite the same we'll go rgba once again we still go with black so three zeros but then 0.75 for the opacity just a little darker not quite as through and a padding of six okay with those Styles saved we've got button and button text let's now apply them up here so style equals styles. button and now here for the text we'll have style equals styles. button text okay now with those changes in place let's go back to the browser or look in your Expo Go app and see what we've got ah we've got a button that says explore but it's not quite centered let's go back and add one more style to make that button uh look just a little better here we go let's bring that up come down to our style for the button itself and I think we want to have a justify content let's put that Center save and let's go back and take one one more look at our button ah looks much better now click that and it takes us straight to the explore page looks good we can click the arrow and go back so we've got our coffee shop and an explore button so we've looked at a couple of ways of navigating we've had a link or we've had a link turned into a button with the as child prop now we should notice here in the Expo router it's based on the files so we have our index and we have our explore file and you can see we go to slash explore or slash you don't have to type index it would just be the root which is just the slash that's kind of the default convention in web apps and in react native as well so just the slash leads you to index but now let's go ahead and change this I talked about creating a contact page as your assignment in the last lesson let's go ahead and link to contact and let's put the text in here has contact us and then let's rightclick on the explore file choose rename let's name this contact and we could even change the extension once again from TSX to jsx if you're not using typescript because that would be the convention for a file that wasn't using typescript so there we've got the two files we can save that if you want we could still check the link to make sure everything's working as we expect it to and here we go click that yep still looks good now it says contact at the top which is the name of the file and we come back to our homepage now let's look at that root layout file back in vs code we're still ignoring the tabs we had renamed the layout file there we're not using it at all what we're currently using is the root layout and we see several things actually several lines of code already in this file but here the title root layout and what I want to highlight in this file if we scroll down a little bit is the use of Stack so besides being wrapped in the theme provider which handles our light and dark we have stack here so if we scroll up we can see where stack is imported from Expo router so this Stacks screens and it helps the navigation now we can see right now it just stacked to tabs which is a spe specially named directory we'll talk more about later and then it went to the special not found file which we'll also talk about later we'll leave not found there for now which is the page that comes up if a page or a screen cannot be found like a 404 on the web but here instead of this tabs I'm going to highlight this line and click or press control and the slash to just comment that line out we want to add a stack for for each file that we now have here in the app directory so we have contact and index let's add stack spell that correctly I need to come back so I can see what I'm typing there we go stack. screen and then we provide a name as you see and here we want to name index not a slash but index and we can provide options like we see here in what we had commented out above let me press alt Z so that wraps down as well and we can see the full options here says header shown fals so for example let's set some options on the index we'll say options equals to curly brackets and let's put the title as home and then of course we can close this out so we'll go slash close that out oh I need to make that an actual string I just typed home so let's put that inside of a string okay and now shift alt in the down arrow to copy that line down and we'll change index to contact now this title will be contact us so we should see that now in the header as well let's go back and see if those changes were applied so now we have home up here instead of index when we go to the contact us button and click that we now see contact us here at the top instead of just a lowercase contact and that's all in the header by default because of those options that we put in now what if we don't want to see this big white header here at the top and we just want a full page of this delicious iced coffee well we can do that too so let's go back to our stack here we can set another option which we had header shown so put this and say header shown we'll set that to false so now we should still see the header on the contact us page but the header should be hidden on our homepage so if we go back and look once again in the app now no header on this page just a full picture of this delicious iced coffee click contact us we still have the header on the contact us page and I believe this looks a little bit better on my phone than it does on the web so here's a shot of my phone and now back in vs code I talked about these special files over here you can see there are two there's a plus dot or plus html. TSX and if you click on that and I'll press alt Z once again to wrap this down but it says this file is web only and used to configure the root HTML for every web page during static rendering we don't need to worry about that we're not going to change anything in this file the plus not- found file though here this is an interesting file this is what shows up if we possibly request a screen that doesn't exist and here you see this screen doesn't exist and the title is oops and notice this we have the stack inside of this component and you can do this with any component so we could do it in the index or the contact as well and this will override any options that were set in the layout when we set the options here in the layout for index or contact we could set a different title with stack inside of the contact and it would overwrite what we had here for example or the same with any other setting like header shown so let's once again look at the not found and you can see they applied the title inside the not found file instead of applying it here inside of the layout so just another possibility there let's go back and quickly request a page that doesn't exist so I'll go from the homepage and up here in the URL bar I'll just type slash Dave which we know doesn't exist and that's what we get we get our title at the top oops and we get this screen doesn't exist and there's a link to go back to the home screen and that's what we expect okay back in vs code now we've got something else to talk about and that is groups so the tab directory here you see in parentheses now this is a special directory but we can create any directory in parentheses and that defines a group so I'll click on app here and create a new directory I'll make it parentheses coffee now anytime you create a directory like this it's going to need its own layout file inside so we'll create a layout file here name it underscore layout. jsx at the top of this file we're going to import something called slot and that comes from Expo router slot is a lot like the children if you're used to react because the children are passed in and especially in nextjs we pass those into a layout file as well and wrap those and then it allows us to apply anything else that we want to apply to all of the other screens or Pages if you will inside of that Branch just like we have our coffee group here so if we put a header in this layout then it would apply to every screen that goes inside coffee for example but for now I'm just going to Define this layout simply with export default function call it coffee layout and inside of here all we really need to do is return slot so this is at a minimum what you would need in a layout file and again slot is just like passing the children down that you may have been used to in react okay once you do that let's go ahead and drag these files that we were using in the main page let's drag them into the coffee group now so it's just a little different than what we had before now we would need to change some things in our application to support this so if we went back to the layout well we won't have these now instead we'll need to have a stack for our group just like you see here with tabs so I'm going to comment these out and I will uncomment the tabs briefly and now here I'll press shift alt and the down arrow and I'll type coffee in here and now I'll go ahead and comment that back out so now for example we have our stack. screen and we're applying this to the entire group so we're saying header shown to everything to every screen inside of the coffee group we do not want to have the header shown or anything else actually we'd put in options would apply to all of that now what also might be or what you might use a group four is just for organization if you were getting a large project now notice I don't have to type slash coffee the name coffee itself will be hidden from that URL path or the path we type to go to pages so our app will still find the index page that is here inside of coffee and then we'll have contact as well so back in the application let's open that up in the browser and let's go back to the home screen there we go we can even reload just to make sure everything loads in as expected looks good now can we still go to contact us yes we can no problem there so we go back to the contact us page but notice since in that coffee group we said do not show the header now we don't have the header up here allowing me to go back in the web now on your phone you should be able to swipe back and still go back to that homepage here I'm going to have to click the back button to go back to the homepage because we hid the header for the entire coffee group with our stack option and now back in VSS code I'm going to comment out the stack for the coffee group as well and I'm going to uncomment the tabs group and that again is a specially named directory now we're kind of back to where we started so I'm going to drag our index back into tabs going to drag contact back into tabs I'm going to rename the layout here so is once again applied to our application so I just want to get rid of that X that we put in front of it press enter so now we have our tabs group directory that has the underscore layout file that is required also contact and index so as mentioned tabs is a special directory and that directory tells the Expo router to use the tabs layout and the layout file inside of tabs which is what we're looking now that controls how the tab bar and each button on the tab bar looks and behaves so the files inside make up the content of the tabs now so index and contact for example make up the different contact or content of the tabs and we can see here we've got a tabs. screen and there is one for index another tabs. screen there's one for explore that we need to rename to contact so let's do that contact and we'll put the title here is contact because yeah I'll stick with contact there it will be easier for the icon button that we' have and we can change those icons we're going to look at that too but now let's just go back and look at our application and it should be more of what we were used to seeing looks like I need to reload the application as well there we go so now we have our home and our contact buttons once again at the bottom in these tabs now I keep getting that warning because of some things that are on this explore page I think by default in that project but don't worry about what you see over here so here is the tabs menu and we can go back and forth but let's look at how we can customize this a bit more to fit our application now here's how it looks on my phone which looks better I believe than it does on the web yeah definitely the web doesn't seem to adapt to the light and dark mode with the bar here at the bottom and it seems to always be white however on my phone it always seems to change with light and dark mode as I'd expect it to okay back in vs code let's look at how this tabs layout really works and you can see the function is tab layout and we're bringing in the color scheme from the used color scheme Hook and the first thing we see is where that is used here inside of the parent tabs that have been imported not tabs. screen but just using tabs to wrap around everything else and we pass some screen options so this can set different options for those icons and what we see inside of our tab bar also we set header shown to faults here notice the tab bar active tint color so this applies the color scheme to our bar and there's another setting I'm going to want to put here for inactive as well so let me go ahead and do that just by putting the space then I'll highlight line 14 do shift alt and the down arrow so I've got both I guess I didn't need that space if I did that right now they still have the same name but what I want here is tab bar inactive tint color now we're bringing in a colors object up here above and what we're checking here with the color scheme is if it says light or dark and this is bracket notation right here getting that from an object so if it says dark we're getting the Dark theme from colors if it says light we're getting the light theme then it's using the Nish kesin operator here and essentially that's saying if this is null or undefined it's going to default to light well once you go to light then that has its own object for the theme and we're looking at the tint property and just to show you that I can hold down control and click on colors here so you can see colors is an object but then that object has two different objects in it the two themes light and dark so we're looking at light tint and you can see the tint color light variable here that is set above so it's really this color likewise if it was dark it would be tent color dark which is set up here which is white so it does change according to the theme and we can change those colors if we want to as well something else we might want is to set the header align and there are several properties that you could look up in the docs but it's header title align I believe if you just start typ in header here you will see quite a few that you could use so say we'd want to put that to Center I don't know that I do want to keep it at Center but say we do let's take a look at that real quick so if we go back to our application click on contact us oh we're not showing the header yet let me go ahead and set the header to true and then we could probably see if it was centered that would make sense okay we go back here take another look yep contact is now centered if I go back to home home is now centered so that did make a difference on those headings now I don't necessarily want a heading or maybe I just want it on contact we'll come back and make those changes as well what I think I'll go with is no heading just because we'll have that bar at the bottom that will allow us to navigate so I'll have false here and then I won't even need this header title line but I wanted to show you it could be there so I'll just comment it out as an example example for you and now just to show how we can change those colors let's go back into our color theme and let's change this theme instead of tin color light being the color that is defined here let's change it to Orange we should be able to notice that and then the tab icon default right here let's go ahead and change that as well I want to change it to c68 E17 which is a caramel or caramel color if you will depending on how you pronounce that I hear it both ways okay now that we've made those changes if we go back and look at the application we can now see we have orange icons and of course when it's selected or focused it has a little different color than when it's not and it should of course look a little different on the phone as well here's mine back in vs code let's close that colors file now and let's scroll down to look at the rest of this so what we see here is each file that we now have has a tabs. screen we're passing in the name and then there's some options here also so if I wanted that title to be contact us here for example I would put contact us here we have a tab bar icon for each and you can see we're using a tab bar icon that is imported up here a component so now this tab bar icon receives a color that color is coming from the theme so that of course changed the color of our icons and it also has focused so you're going to see a different icon when it's focused and when it's not this would just be a Boolean true or false to see if it has focused so you're either getting the home icon or the home- outline icon now we changed our other one from explore to contact us so maybe we want to change this icon right now it is a code slash or a code slash outline so where can we find more icons well if I hold down control and click tab bar icon we go into that file now I'll press altz to wrap this down you can see there's a comment that was left for us here you can explore the buil-in icon families and icons on the web and it gives us the URL used to find those icons that we can then use here in react native and Expo so I have copied this icons. expo. FYI and let's go there in our browser so I'm going to go to a different tab paste that URL in and pull that side up ah this looks pretty good let's see what they might have here if I type the word contact in and yeah there's a contacts icon but we want like contact us so maybe we're thinking more people or maybe You' want a phone icon you can pick what one you like I think I'm going to go for something with people which we typically see or people- Circle let me see if I can spell circle right do they have that yes this is something we typically see so people that circle people- circle D outline so we could use both of those to switch between the two remember we're using just a regular icon and then usually the outline version of it when it doesn't have Focus now notice both of these are coming from ion icons I believe is how you pronounce that ionicons so that's not where all of them come from on this site you might have to do a different import if you were using one that didn't come from there and we might do that later but right now now we're already using this or the app is already using this for the icons it was bringing in back in VSS code in the Tabb bar icon component that we have here you can see it already imports ionicons from Expo vector- icons SL ionicons so we're already using that specific library with this tab bar icons so we're good to go there back in the layout that's inside of the tabs directory we can now replace the code slash I'll press alt Z to wrap that down but we're going to change this code slash and I'll press contrl D to select both of them into people- Circle and we also of course had people- Circle D outline so now we can check the app to see if it has applied the new icon when we go back to the test page and yes we have the new contact us name and the icon here that shows the people and when it's not selected of course it looks different than when it is selected okay we're back in vs code at the end of this lesson but remember your assignment from the last lesson to take that explore page and turn it into a contact page we did a little bit today by changing the name of the file and of course some of the links to the contact page but if you haven't completed that assignment this is a great time to continue working on that until the next lesson and don't be afraid to use the theme text component for example that they've created for you you can check out that file but the nice thing about it compared to the normal text is it's already going to apply that color scheme whether it's light or dark so go ahead and turn the contact page what used to be the explore page into a contact page for the coffee shop if you haven't and in the near future I'll show you what I have also done with that file to turn it into into a contact page but the next lesson is about lists in react native I've got vs code open and we're starting today's lesson with the completed code from the previous lesson which was lesson three okay let's open a terminal window and let's go ahead and start our application with npx Expo start and we're going to make several changes today but I like to just start the project and so we can see those changes refresh either in our browser or remember you can use the Expo Go app and scan the QR code that's provided when you start the app that we see right here so you can use that for your mobile device and of course we can open it up in a browser just by pressing W which will open the web browser and here's how the app currently looks in the web browser of course this is full screen it doesn't look as good as if we open it up with Dev tools open and show more of a mobile phone View and if you're not sure how I show this view make sure you watch the previous lessons because I've gone over that a couple of times here in Dev mode and we've got the dev tools open I can show the frame for whichever phone that I pick from this drop menu so I'm using a iPhone 678 size right now and you see the basic app we can go to the contactus page which we hadn't changed much but remember I gave you an assignment where you could change the details and I'd like to see how you did you're going to see my results for that later in this video but for now let's get get started in vs code okay back in vs code I'm going to close the terminal window we're going to learn about list views today but let's clean up this coffee shop app a little bit before we get to the list views and we've already learned about tabs but I don't really want to use tabs in this application we had that contact us button on the homepage and we're just going to navigate with a couple of buttons so let's move the index and the contact files out of this tabs directory and back just into the app directory it's s so we'll drag both of those into the app directory here in the file tree we can highlight the tabs directory now and just press delete to get rid of that and this coffee directory was just an example for how to use groups in the last video so we can delete that as well but now that's going to lead us to our layout the underscore layout file because remember this is a special page and it handles how we navigate with stacks and so we need to adjust this because we're not using t tabs anymore but more than just the tabs which we'll come back to or the stack I should say after we're not using tabs we will scroll to the top here because we're going to make some changes to the Imports as well I'll press alt Z to wrap any code that was extending off the screen we're not going to use this react navigation SL native here that is imported the Dark theme default theme and theme provider so we can get rid of all of that and you'll see what change I make with that in a moment we're also not going to use this react native reanimated so let's remove that as well but let's add a couple of things as well so one thing we need to import now as I press enter and come down to the next line is appearance and so this is going to come from react native a quick look at the react native docs and it says the appearance module exposes information about the users's appearance preferences preferences such as their preferred color scheme light or dark so we're actually going to use appearance to determine the light or dark color scheme if you've noticed in the previous lessons actually the web view was not applying the proper light or dark theme it was sticking with light we saw that in the tabs and some other changes as well now using appearance we'll be able to see those changes both not only on our device but also in the web view back in VSS code we can now remove this import of the use color scheme hook because we'll be using appearance instead for that but we do want to import and I'm on the wrong keys but we do want to import our colors file or our colors object that has our themes in it so it comes from our colors file as well but it is our colors object so we'll be using that and now when we Define the color scheme we see here on line 13 we'll get rid of that use color scheme hook and instead we'll say appearance Dot get color scheme which is the method we call on appearance and that will give us our color scheme that we can now use inside of this layout now we need to determine the theme that we would get from this colors file remember it has our light and dark theme so let's define the theme we'll say const theme set this equal to a turn area that checks this color scheme to say if it's equal to dark then we're going to return the Dark theme so it would be colors. dark and likewise if it's not dark we'll return colors. light and that's all we need then to define the theme but now we need to apply the theme so let's scroll down and it was applied through the theme provider which we're no longer going to use so we'll delete that out of our file but we are going to apply it through our stack so this parent stack that we have wrapped around the other Stacks which we will also change to represent now not using tabs but this parent stack can have its own options so we'll set the screen options and let's go ahead and set those now we'll have a first one here called header style and it receives its own object with background color and here we can set this equal to theme but we don't have a background color we have a background but let's go ahead and add a background color to our colors file so if we scroll back up I'm going to hold down the control contr key and click colors now here are our themes so let's add a header background I'll put it right after the regular background we'll say well let's call it h we could say background header or header background I'll say header background and now I'm going to use RGB here RGB and then parentheses 242 242 242 and now I'm going to copy this line with contrl C come down into the dark theme where we also need to have a header background color and we can just change this number 242 to the number one which is fairly dark okay now we can use header background in both themes with that change so let's close this file close whatever file accidentally opened there now we're back in our layout file so now that we have a header background we should be able to say theme Dot and see our header background file Choice there now this isn't the only style we want to apply but it is the only one that is applied with header style we can also change the header text color by using header tint color and here we'll set this equal to theme. text and then one more setting here header Shadow visible and we'll set this to false this controls the line essentially the bottom bottom border on the header and I don't want to show that line across the bottom and finally let's make the changes to our stack screens so instead of tab we know we're going to have index and the options for index will'll put header shown false so that's correct but after that we could also have a Oops I did not get a comma fumbling with the correct keys today there we go we'll have a title and let's go ahead and set that to home okay after that let's go shift alt and the down arrow because we're going to have similar options here but this is going to be the contact page which we already have and here we'll say header shown true and after that let's give this a title of contact us and now let's get one more oh besides besides the title I should mention this we could just this title contact refer to but we can also have let me put a comma have a header title now this will be what shows so we say contact us okay now shift alt and the down arrow one more time I'm going to change the one here in the middle because I'll view contact is actually the third page now we're going to create one for a page or a file we haven't added yet and this is going to be menu but let's change the header title that displays to a longer title coffee shop menu there we go and finally let's add options to our not found here as well so we can have options equals we'll have header shown and we'll set that to fals with those changes in place we probably have an error in our application because we haven't actually created the menu page yet which it looks like I didn't change that to menu as I intended to up here so let me switch this to menu as well and save that change but after that yeah we probably have an error so now what we need to do is create our menu page but before we create that I want to take a quick look at the docs and show you the different type of list views available and we're in the react native docs under using list views and you can see it says there is a flat list or a section list type of list view so what's the difference really between just using a regular data array and mapping over it like we would in react possibly rendering unordered list items or using one of these specialized views well the flatlist component displays a scrolling list of changing but similarly structured data so that would be our typical data array notice it already says it has scrolling built in and it works well for long lists of data where the numbers of items might change over time consider maybe a to-do list for example that we'd see in a tutorial but many other types of data that you would of course request from somewhere and bring into your application says unlike the more generic scroll view the flat list only renders elements that are currently showing on the screen so it has greater performance it's only going to render the things that you currently see on the screen instead of everything in the list so it does not render all of the elements at once like a scroll view would and it requires two props data and the item that is being rendered but it has a lot of other optional props that can be passed to it and we'll look at some of those as well now the only difference between the flat list and the section list is the section list actually handles several different arrays of data that you could create so this is an example of a flat list here as we see a list of names as I scroll down though this is a section list example and you can see this is like in your contacts of your phone so they've broken out all the names that start with D all the names that start with j and each section can have its own divider or header if you will to break those out so if you had one giant list of names you might have to break it up by filtering it to the different letters or something like that and then of course displaying those in the section list so that's kind of a specific use you're much more often going to use the flat list so that's what we're going to use today as we add a coffee menu to our coffee shop app and back in vs code at the same level that our index and contact pages are at let's create a new page and let's name this menu. jsx now inside this file we're going to have a lot of imports from react native and we'll just add those as we use them but we'll start off with stylesheet you know we always use that one other than that we're going to want to import that colors object again that has our theme because we'll use our themes on this page so that comes from at whoops we need quotes there at SLC constants and slash colors there we go now after that we need go go ahead and start the function before we import anything else export default function let's call this menu screen now inside of this the first thing we can do once again is say const color scheme let's set that equal to and right away we need another import up here and that would be the appearance that we just recently added to the layout as well so we can say appearance doget color scheme now that we have the color scheme let's once again Define the theme so the theme is equal to that turn are color scheme equals dark then then we're going to return colors. dark else we're going to return colors. light okay after that we're going to Define Styles and I'm going to do it a little bit differently than you've seen me do it in the previous tutorials I'm going to create a function not just an object so just below our menu screen function I'll press return here and let's goe and say function and then create Styles I'm going to pass in the theme and the color scheme when I call this function and then inside the function we'll return the stylesheet do create and this is where we'll add styles to our page now I'm not ready to add the Styles yet but I'll go ahead and call the function up here and then we'll be able to use the Styles as we have been so I'll say create Styles and I'm going to pass in the theme and the color scheme value to this function and we'll use those to determine what styles we're using at certain points and now here's something else you haven't seen in a previous tutorial I need to define a container for the app and that is because we get a different response in the web than we do on mobile devices when it comes to the container for a flat list for example or any one of our list views and you don't want to put a flat list inside of a scroll view on your mobile device because they both scroll and that can create two different scrolling environments and they get out of sync the web doesn't seem to M that so much so there's something called a safe area view let's take a quick look at that so you'll know what we're going to use on the mobile devices versus using the scroll view on the web back in the docs here looking at safe area view says the purpose of safe area view is to render content within the safe area boundaries of a device so it's only applicable to iOS devices with iOS version 11 or later it doesn't say it's only applicable to certain Android devices so I'm going to assume it works on all of those but it says it renders nested content and automatically applies padding to reflect the portion of the view that is not covered by the navigation bars tab bars toolbars or other views so even more importantly or most importantly it says safe areas paddings reflect the physical limitation of the screen rounded Corners camera notches all of that so by creating this safe area that's where we're not kind of intruding on anything else that needs to be on the screen so it's smart to use a safe area view so that's what we're going to use for this screen on a mobile device back in VSS code you can see I was about to Define container here let's add the Imports we need at the top I need to import platform because we're going to make a decision based on the platform that we're on and I also need safe area view okay now defining the container is going to use platform so we'll say platform. now we can check to see if this equals web we could also check to see if it said Android or iOS so that helps us put platform specific things into our application here I'm going to use a scroll view which I'll also need to import above if it's the web but if it's not I'm going to use the safe area view that we talked about okay alt Z to wrap that down now up here let's go ahead and import the scroll view as well so the scroll view will work on our web rendered version of the app and the safe area view will work on the others I have tried the safe area view on the web version and it blocked scrolling actually so that did not work for me with the flat list you may know of another solution or if you come across one that's great but this is what's working for me safe area view on a mobile device scroll view as a parent to the flat list on a web application okay with this in place we are ready to start the return for our menu screen function so let's say return and get my right hand on the right Keys return and now we need our container this is the parent container that the flat list will go in let's create a little space and we'll be able ble to add that flat list here but first let's go ahead and import it at the top as well flat list and now we can use that down here in our code so we'll start off with flatlist and now flatlist has a couple of required props remember we had data we'll set that equal to and for now let's put in an empty array we also are required to have the render item now render item is going to have a function inside of it so here's the curly brackets and we can put in a function it's going to pull the items out of that data array so here we would have the beginning of our Arrow function then we can destructure item here and after that we'll have our arrow for the function and whatever we're going to return from the function can be here inside of our parentheses now at this point I need to import view text and image we're going to have all of those so let's import view let's also import text and let's import image from react native but before we can use view text and image we actually need to have the data so instead of this empty array we need to have some data to work with to put things inside of the view text and know what image to call so that's going to create a couple of constants in our application we have this constants directory here that has the color themes in it already not components constants there we go here's the color themes file let's create another new file inside of constants and I'm going to name this menu items and this will just be a JS file since we're not using typescript remember if you want to use typescript you can no problem I'm going to paste this in and we can quickly take a look at this example data so I'm just got a menu items export it is a constant it is an array of data and it has 10 objects in it each object has an ID a title and a description for a menu item for the coffee shop now we also need images for these items so let's go to assets and click on the images directory now let's create a new directory inside of images and call it menu I'm going to drag some images that I already have into this images directory so you can find these images in the GitHub resources for lesson 4 I'll drag these over and we'll put them in the menu directory now there are 10 different images of different menu items such as the espresso here that we see so each one of these is about 300x300 I believe and you can see the dimensions here and we're going to use them a little smaller size than that even in the menu list that we render on our menu page okay let's close this and go back to our constants directory and let's create one more file here let's call this menu images. JS now inside this file I'll just paste the contents and we can go over what there is I'm importing each one of those 10 images here and then with an export default I am exporting an array that has each of the 10 images in here now remember arrays are indexed from zero going forward instead of one so espresso would be in position zero Americano would be in position one that's going to come into play when we pull these images out and use them in our menu screen so now that we have both menu items and images let's save these constant files and close out of them and go back to our menu jsx file where we can now put together our render item so now to use that data we're going to need to import it so let's start back up here under colors and we will import more constants so I'm going to import menu items and that's going to come from constants slash and we should have menu items now I can just copy that down with shift alt and the down arrow and instead of menu items now we're going to import menu images oh this will not have the curly brackets either it was a default so here we'll have menu images and this is going to come from menu images here so I'll just change this one get my casing correctly okay now we've got both of those imported and we can use them below as we render so when we come down to our data the first thing we want to do here is replace this empty array with menu uncore items that is our data array now as some of you know when you map over an item in react you need to provide each item with its own key and the flat list also expects a key as a matter of fact by default it expects a property in each object that you're mapping over to be key but you don't have to do that and you can get away from that if you go ahead and provide a key extractor so that's what we're going to do here key extractor because our key is going to be the ID so this takes a function where it receives each item as well and now with each item we're going to say item. id. to string and this will make each ID one of the item keys there or the item key for each item that goes through so that's how you do that if you don't have a property in your object named key let's go ahead and add the render item and then we can come back to more props and styles and other things that we'll add to our list so here we're going to start with a view and this view is going to be the parent and it's going to wrap around another view then we're going to have some text and besides that text we're going to have another line of text for the description so title and description finally after that we're going to have an image in here and this image is going to have a source that we can set now because we have brought in the menu images constant so the source is going to equal menu images and then remember what I said about the index position so it's going to be item. ID which is a number minus one because our ID start at one but the array index starts at zero so that espresso image is ID of one but it's at position zero in the array and that's why we need to subtract one every time we go through after that we will have some Styles we apply to the image as well but for now let's just close out that image so this is our render item we could go ahead and put some of the text in here though because we do have that data as well so this will be item. tile and then we should have item. description underneath it item. description and that's really all we're going to have we're going to have an image the title and description and then of course the parent view that wraps around everything now this still looks like an error because we haven't closed out our flat list yet so let's go ahead and do that save our file and now we should at least be able to see something on the screen without an error let's go ahead and open a terminal window we should go ahead and maybe just stop the server I'll type clear to clear some of that out of the terminal let's just restart everything with npx Expo start and that should clear out any errors we might have had as we were removing files and the different things we changed here in the application once the bundler starts up I'm going to press W to check out the application here on the web and see how it looks for all of us you can of course scan this QR code as well and check it out with your Expo Go app on your mobile device so I'll press W this should open it up in the browser for us I'm going to go into Dev tools so I get more of a mobile view and now I want to go to slash menu and see what we get I'm not expecting something to look great but I am expecting to see the data and this is what we have so there's our title espresso there's the description strong concentrated coffee and here is the espresso image and we should have this for all 10 items that will be on the menu likewise we see our coffee shop menu title up here at the top now on a mobile device you're going to see the arrow over here as well on the web you don't see that because you can just use the back button to go back let's just leave it open to this page for now since we haven't set up the navigation on the homepage to get here yet and we'll go ahead and start styling this back in BS code let's close that terminal window and start adding some Styles now one of the things about styling a flat list is there are many props that handle some Styles and let us add extra things to the list it even lets us style the parent containers so let's start with that uh or at least close to starting with that we'll have data we'll say e extractor and let's put it underneath that here let's say shows vertical scroll indicator set this equal to false so we don't end up seeing a scroll bar on any mobile device after that I'm going to say content container style now this is where we would actually style the container that is wrapped around it now it doesn't have to be named container but it's essentially Styles the parent of the flat list so we can create some styles for that back in our Styles function I'll start right here and I'll name this content container can start setting up some Styles let's go padding top and I'll make this 10 padding bottom let's make it 20 after that padding horizontal so on the left and the right set to 12 and the background color this is where we can use the theme. background our background color that is passed in to the function now it says theme. background color let me make sure that's right I want to scroll up here to the top and theme is being set with the colors so let's see what we're importing here and it just says theme background not background color that's what I thought so I just want to make that theme. background oops wrong Keys again theme. background and that should set the correct color for the content container let's go ahead and apply that up here now so we once again can just work with Styles like we're used to I can say content container and have those applied now I don't know how much we'll see yet from that but let's go ahead and take a look to see what it applied and yes now we have the correct darker background as I am here on dark mode on this mobile device that's rendering in a web view here back in VSS code I'm going to scroll up just a little bit and after our content container style we can also add a separator between items so I'm going to say item if I put my hands on the right keys I need to stop doing that item separate component and we can Define that up above so I'll Define a separate component up here at the top just underneath container I'll say const separator and oh let's call it separator component just so it's clear component let's have that equal to view and we can put styles on it here or we could put them I believe inside of the uh flat list as well but I'll do one here at least so style is going to equal and this is where I might say styles. separator if we name it that and we'll need to add those Styles but now that I have this component I'm going to put it right here inside of the flat list now we can add those Styles below before we take a look put the comma here and say separator start the object and let's set this to a height of just one so it's a small little line as a separator now background color I'm going to use a Turner here and use the color scheme that we passed in so I might be using a color for example that isn't part of one of our themes so here I'll say dark so if the color scheme is dark then I'm going to use papaya Whip and that wasn't in one of our themes I don't think but if otherwise if it's not dark then I'm going to use black as the back backgound color now let's set the width at 50% and this would be on mobile devices or any smaller device but then let's set the max width if this is somehow viewed in a wide screen to 300 then margin horizontal this will make it centered if we set it to Auto and then finally margin bottom let's set that to 10 okay let's save that and let's look at the changes once again on the page and it's hard to see the line is here it's just at the bottom of each image though we're not here it's easier to see on this dark one so you can see the line right here and it's going to be at the bottom of every image as I scroll through now this will look much better as we add the rest of the styling but the separator is there back in vs code let's go back up to our flat list now besides adding a separator the flat list also supports headers and Footers so you can say list head header component and set that equal to a header you can say list footer component set that equal to a footer you can also style them so like list footer component style and you can pass Styles in so just for example let's create a header and a footer I'll scroll up here just by our separator component and I'll say const header component let's set this equal to some text and with the text we could apply Styles here as well but I'll say top of list and now let me just copy that down with shift alt and the down arrow I'll change this to footer component and here we'll say end of list so two very simple components to add there and now I'll just copy the header component paste it into the spot that we have here and then do the same for the footer and it looks looks like we need to add some footer Styles so we could add some footer styles to our style below and apply those as well I'll just go ahead and Center that so we'll say footer comp and inside of this we'll say margin horizontal and we'll set that to Auto for that footer now let's bring it back up and apply that style so we should have styles Dot footer comp Okay so we've added a header and a footer let's see if we can see that text on the dark background I think it's going to be hard to see but maybe I can highlight some of it I might have to exit out of the dev tools to highlight but now there you can see top of list here we didn't change the color but it added that to the list and then we have the description you can see our separators especially now that I'm in widescreen have centered here and if we scroll all the way to the bottom we see end of list here it is centered at the bottom of the page so I'll go back to the mobile view here in my web browser remember you can go ahead and scan and see that refresh in your Expo Go app as well and I'll be showing you a picture of Mine by the time we finish styling this back in vs code I'm going to comment out that header component the list header component because I really didn't want to use that but the end of list that looks okay or we could say end of men menu that would make more sense for our use so I'll comment out this definition but I'll leave it there for you to see inside of the course repo okay now when we come down here there's one more thing we can add and there are other options I'm not going through all of them you can explore this as well to see what all you can add as props to the flat list but here we can also say list empty component this is important especially when we're requesting data from an API or something like that if there is no data we still need to render something and that's nice that this is offered as well so instead of defining one above going to show you can also do it right here inside of the curly braces and I'll just say no items so if that was the case let's say we didn't have menu items here I will cut that out for a second and I'll put in an empty array for the data if we save let's go back take a look at the page and once again it's hard to see that text but if I go over it now here you see it says no items that is what is rendered and we don't have enough content to push this down so the dark background stops here early as we see our end of menu is still showing right here in the middle but it's at the top okay let's go back and of course put the data back in make this look a little bit better so contrl Z to change that back to menu items so we have the data going forward I think you can see this is a big change compared to using maap app and mapping over an array of items and all of the different things here that are applied directly to the flat list instead of styling the parent container separately or any of these other things you might have to style separately you do it all within the flat list now let's go ahead and finish styling the rendered item here and remember the flat list is more performant as well because it's only rendering what is on the screen it's not rendering the entire list every time so our parent view here in the render is going to to be the row so we'll call it that and I'll say style equals styles. row now I'm going to just go ahead and apply the other styles while we're up here too and then we can go down and add all the Styles and we'll look at the changes as we go so now say style here equals and this would be styles. menu text row so this style this parent view will apply to both the title and to the description so now separately we could have a style here say style equals and we'll say styles. menu item text which would be different than of course the menu item title but before we add that let's let's think about maybe not having to type the same Styles every time you can apply more than one Styles proper property and I'll show you how here we can say style equals and inside the curly brackets we can put square brackets like we would with an array and now we could say styles. menu item title so we'd want to put any title Styles there but then we can use the same Styles we did for menu item text and now both of these would be applied so that's a good way to do that when you know for example you would be using the same font or same size or color something like that that you just don't want to continue typing the same Styles over you can just apply both and finally we're going to need our image Styles here in our rendered item too so here we'll have style equals and we'll say styles. menu image now let's go down and apply those but again as I apply the row then we'll take a look then as I apply the text drill we'll take a look so you know how each of these is applied okay scrolling down to style let's go ahead and add the row Styles underneath the footer component we'll have row and here is our object that Flex Direction equal to row we want the width be 100% then let's set a Max width so it doesn't get crazy wide at some point of 600 set the height to just 100 margin bottom 10 just like we did for the separator so that's consistent now we'll have a border around our menu items so the Border style will be solid and we can set the Border color this would be a color scheme check once again see if it is dark then we're going to go with Papaya whip otherwise we'll go with black okay after the Border color just a little bit left border width of one border radius of 20 and then we'll set the Overflow to Hidden so it all stays within the borders or it's just hidden I don't know why that changed on me but we just want hidden there we go and then margin horizontal and we'll set that to Auto so the items are Center okay with all of those applied to the overall row let's take a quick look oh and we have an error hidden is not defined I needed to put that in quotes let's go back real quick and see if we can fix that yep hidden needs to be in quotes easy to get an error sometimes save that go back and take a look all right so everything is centered it doesn't look great the Overflow hidden is working though and let's go back to our mobile view and you kind of getting the idea for what we're going to do but we definitely need to make some more changes back in vs code let's scroll up for some room and now we'll add the styles for the menu text row so if you remember this is the container for the text both the title and the description going to set the width to 65% you'd have to play around with that to get it exactly where you want it if you're designing your own app I know for example 65% will work here it won't crowd the image over it'll leave a nice little space as well after that I want padding top set that to 10 padding left to 10 padding right again this is just for the text to five now Flex grow to one so at least goes over to the image that will be to the right of the text so it's always going to at least grow to that width to fill it out out okay now we've got the menu text draw applied we can see the changes still shouldn't look too much different but we're getting the idea you can't see the text yet because we haven't changed the color you can't see it well at least but it is there and it now fits let's go back and continue our changes after menu text row we're going to have menu item title and inside menu item title we're going to say font size 18 and text decoration line is going to be underline okay I'm not going to go back and look after just that change because the text would still be dark but if we add menu item text all this style does is actually apply the color and here we can use the theme that we passed in. text now remember the title is also using this menu item text style so it's using both now we should be a to see both so when we go back and take a look there's the title of the item and now here's the description underneath so now we just need to fix those images everything else is looking pretty good and we can see pretty much everything we want to see I notice the end of menu is still in a dark text here that we have in the footer so we'll want to change that also back in VSS code we're ready to apply the menu image style it should be the last one we need down here so menu image and let's just give this a width 100 and the height of 100 should make it look much better so when we go back and look at the images now they all fit in because each row had a height of 100 as well and there're Square images and the Overflow is hidden so we see those nice rounded Corners here with the Border it's looking pretty good so just that end of menu note in the footer it's really all we need to style yet so so it can be seen so if we scroll up I'm curious if this is going to work I believe earlier I tried and it didn't but let's go ahead and try to put the color here and say theme. text and let's see what we get here if we do this if we go back and take a look uh yeah it still didn't change so that's not what we're going to do here we're going to pull this color theme. text out of the footer component style here remember that is passed in to the flat list right here it said list footer component style we have that the other style worked just fine but if you find that one like that doesn't work you can still apply it directly like we did here with the separator so here we can just say style equals and put in the style directly that we want to have there and if we save now we should be able to see that change and yes end of menu is now white as we expected it here and you can check that on your device it looks like we're finished adding our menu page to our coffee shop app and it looks pretty good let's go back to vs code and add a button from the homepage that links to our menu page now because I know I had suggested looking at the menu page in your mobile device before probably hard to do without a link or a button something that lets you navigate to this page since we no longer have the tabs back in VSS code now I'm going to click on index and from index we really just need to scroll down to where our contact us is let's highlight the link here and shift alt and the down arrow and now we've got two buttons that say contact us so let's change one of those to menu and after that let's change the contactus text on the button to our menu and let's see how this looks on our index page back in the browser I'm just going to hit the back button to go back to the homepage so now we have two buttons and they're on top of each other so we need to add just a little bit of styling and maybe we want to set the buttons to be the same width as well to have some uniformity back in vs code I will scroll down we'll find those button Styles here and here is our button so we've got height border radius justify content background color and padding let's add a margin and we'll say margin bottom set that to 50 so we get some nice space now beside height let's go ahead and add a width and this will make it uniform for both buttons so a width of 150 let's go back and see how it looks now looks much better so we have two buttons that are the same size we have a little space between and now we should be able to navigate to the menu page and yes we can to take a look at that so now let me go ahead and pull up my my app and show you the app screens as well that I see on my Android device and here's the homepage on my Android device looking good let's navigate to the menu and from there here is the first page and essentially scrolling you see the second page so I'm showing two screens so you can see what it looks like at the end of the list and at the beginning of the list but overall it looks exactly like we wanted and of course you can check out light and dark mode and it should apply both to your web view now and of course to your mobile device previously we're you we were using that used color scheme Hook from Expo and it worked on the mobile devices we just weren't seeing it on the web so preference there for you but I like using appearance from react native for that if we go back to the coffee shop now we talked about the contact us page as your assignment for the last couple of videos Let Me Now show you what I have for mine so here's what it looks like a very simple page also using an icon that I found on the site that we were looking at in the previous lesson for the different icons that you can bring into react native it just has the basic contact information note however when you click on the phone number it will open the phone app on your mobile device and be ready to dial the number or if you say or click on the click here to text it will open up your SMS app that you send messages in and it will be ready to text the number here as well so there are some things you might want to look at in the course resources for this lesson if you want to look at my code for this contact us page also okay we have completed a coffee shop app that has a menu and a contact us page a basic application but this is all a lot of small businesses really need when they want an app for their business in the next lesson we're going to take all the concepts we've learned so far and apply them to something new it's a student challenge I've got VSS code open to a mostly empty folder and that's what you want to have you can have an empty folder if you want you just see my git ignore file over here and I've got my settings to show my dogit directory this is usually hidden unless you show that in your settings so an empty folder if you will and we're starting a new project today I'm giving you a student challenge I'm going to help you get started and then you can pause the video and try to solve the challenge yourself and of course at any time you want you can unpause the video and I'll step you through my solution to the challenge so we're going to start by opening the terminal window I'm going to point out that I'm using get bash in my terminal it says bash here so some of the commands I use will be specific to get bash so if you don't have git or git bash installed you might want to do that now I should be able to link to that in the video description to help you out just so you can find git and it comes with Git bash okay let's go a ahead and type npx create dxo Dasa at latest now I want to say here this is going to install that same installation we've seen before that comes with an example project and I'm going to show you how to get rid of the example project it does put in typescript by default if you want to install all of the dependencies one by one on your own and not use typescript we'll put in a dash D template and then type blank now this will start a blank project but I'm not going to do that because I can show you of course how to not use typescript like we did in the previous project and you can still install this latest where it essentially does use typescript but it installs all those dependencies for you it's just so much easier that way in my mind so that's what I'd like to do I want to just go with npx create Expo app at latest and press enter now after it creates this app we need to name it I'll name it crud app and then let's see if we need to answer anything else I think that's it now after it finishes we're going to need to CD into that directory for the crud app okay the install is complete it says your project is ready let's type CD crud app and now we can see here in the list that we're in that directory so I've got documents SL tutorials this is on my computer computer of course then react native series crud apppp so this will just show you where you are at now that we have that let's open this up and you can see we've installed the same type of project that we did before and it has that example project now I'm going to show you how to get rid of that so once again down here in the terminal window we want to type npm run then reset Das project this will clean out that example project and it will put put it in a directory that we can delete so I'll just press enter you can see it says the app that it had with that project was moved to app- example then it created a new app directory and then it created a new index. TSX file for now and a newcore layout. TSX file now again we're going to change these extensions to jsx but if you already know typescript and want to use it feel free to continue to do so so I'll close this we'll open this up now we can see that app example directory and here's the tabs and the files that that example project had then it created this new app directory for us this has the layout file and the index file that we're created let's look at how to get rid of this app- example file once again or directory if you will we'll go back to the terminal and we'll delete that and we can do that by typing RM now again this is specific to get bash the get Bash termal here so type RM then Dash RF then app- example and press enter and it's gone so no more app example files to worry about there we can close this out let's go into the app directory now and we want to change the extension of these two files so well you know what before we do that let's go down to the TS config.js file first because if not it was going to open up and add something here so instead let's go here I'll click on line 13 where it has the TSX I'm going to press shift alt and the down arrow to just copy that down I'm going to put jsx right here on this line and save so now I can change those file extensions in the app directory to jsx and it won't need anything else so I'm going to rightclick choose rename which is also F2 if you want to do it that that way and now jsx again I'm on windows so those could be slightly different on Mac or Linux do the same thing on this file because I'm not using typescript if you are using typescript of course leave those as jsx this being a beginner series I didn't want to put that requirement on any beginners wanting to learn react native that didn't yet know typescript and your student challenge for today is building a crud app a to-do app now that's all in react native and if you're not familiar with the crud acronym it stands for create read update and delete and when you're learning any type of technology in programming a to-do app I think is always a great app to build it's a standard thing and it has all of those attributes of crud so we create a new to-do we read the to-dos we update the to-dos and we can delete the to-dos so if you're familiar with react this challenge is really for you if you're at that level if not you may want to just go right through the solution and not attempt this on your own but if you are familiar with react I think with everything we've already covered with react native you can complete this challenge this is mine I prefer dark mode you don't have to use dark mode if you don't want to of course if I open this up to full screen it looks a little different as well so when I have it in Dev tools we can see how it looks of course in a simulated iPhone here this is again the web view you can always scan QR code and check it out on the Expo Go app on your mobile device too okay back in VSS code I'm going to provide a couple of things to help you get started on this student Challenge and the first thing is the data so I'm going to give you 20 to-dos we'll put those inside of a new directory we'll name that data and then inside of here we'll create a new file call it todos and I need to just get my fingers on the right Keys Tod .js now inside of of this we will paste in the to-dos here and you can see it's an array of objects has an ID a title and a completed field but here it's just export cons data and then the array so we'll be able to import that into our index file and that's where we'll be using that so I'm starting you out with that and there's one more piece that I want to start you out with so back in the layout right here we're going to have one more import and that's going to be a safe area provider so safe area provider and you can see that comes from react native safe area context and that was already installed as a dependency because we installed that example project again with latest as we saw as a matter of fact I'll click on package Json and you can see the dependencies that are installed when we just choose latest as we did with the install so this is the part that I didn't want to have to install each one of these things as we needed them you can see some more down here including the react native safe area context so we've already got that stuff and that's very convenient so after that we're going to use that here in the root layout we just wrap everything in this provider so safe area provider close that out let me get the closing one and paste it here at the end and that's all we need to do to be able to use our safe area view that's going to come from here so that's the other part I wanted to share is in the past in the previous project we used a safe area View and I believe we imported it directly from react native because react native does provide one but I like the one that comes from this react native safe area context so that's the one we want to use in the index file over here so let's go ahead and import that as well import safe area View and you can see there's more than one that can be imported we want the one from react native safe area context now I'll leave it at that because you've already learned where to use the safe area view in this file so this is a great time now to pause the video and take on the challenge if you want to and when you're finished or if you don't want to take on the challenge and just want to go through my solution we'll do that next okay if you're ready now I'll begin providing my solution so I'm going to start by importing use state from react the US state hook and then after that import we're going to start setting up the traditional State and functions that we would use with the to-do list in a crud application so that's going to first start with the to-dos themselves so we'll say to-dos then we'll have set todos now we're going to set that equal to to use state but we don't have any data yet so we need to import that data let's bring that in here at the top so we're going to import data and that's going to come from now I can use the app symbol here and then say slash data SL todos now that we have our data we can use that inside of used State now I like to put the first to-do that I add at the top of the list if we just take the data in and don't sort it or actually reverse it then we're going to have the new to-do at the bottom of our list as we add them and you'll see that logic in the functions as I add this but just to let you know that's how I'm going to sort this data immediately so data sort then it will receive both A and B if you're familiar with the sort function we'll have b.id minus a.id and that just sorts the data as I want it so it's kind of reversed the order there after that we're going to have a text input so we can use State one more time and I'll just say const text and set text and this would be for our controlled input now I'm not going to have that as part of the functions right away well I guess I will when we add the to do so we might as well add this now but those are the two uses of used State let's go ahead with that add to-do function first so const add to do set this equal to an arrow function or an anonymous function if you like to call them that after that we'll say if we have text we'll trim the text so we don't want any extra spaces there and then inside of here we need to generate a new ID for the new to-do so we'll say const new ID and it's going to equal well it'll be a Turner statement here really so if the to-do's length is greater than zero then we're going to say take the first Tod do because remember we reverse the order of the list so this is the first element the first object in the to-dos but it should have the highest ID number so now we'll say ID + one but if that doesn't really exist if the do's length is zero then we'll give it one okay after that we can set the to-dos now inside of the setting the to-dos it will receive an array and then the array of course has objects in it so we'll start with an object here and we'll have ID that gets the new ID value the title is going to get the text from the text state completed will always be false on a new to-do and now that would be the new to-do added the new object after that we can just spread in the other to-dos the other objects that we had inside of that array and I just need to come down one more line after that and I'm going to set the text back to empty for the new to-do after the new to-do was entered so that's the create part of our crud app of course we'll have to apply that function where it needs to be but after that we're also going to read as we read the list so we've got create read and we'll do that with a flat list if you remember learning about those in the previous lesson so we'll have a render item for the flat list that will be the read now the update would be a toggle so we're going to toggle whether the to-do is completed or not so this function receives an ID and now inside of the function once again set todos but we'll take the to-dos state so to-dos and we'll map over it now we'll look at each to-do and now by looking at each to-do here let's go down to the next line we'll say to-do doid if it equals the ID that is passed in then we'll do something with it now we'll spread in the to-do and then we'll overwrite the completed value and make it just the opposite of whatever the previous value was but then we could have an else here as well this is a Turner statement and the else would just be the to-do itself so that's all there is to that and I should point out you could really read this like a oneliner so if I brought this back up here and I say oneliner just a oneline function that might look more like what you're used to seeing I'm going to press alt Z to just wrap it down so it's essentially just the one line and that's why you didn't see the extra curly brace or anything here after the to-do was mapped and we had the individual to do so it's still on one line okay so that's the update function now we just need the delete function so let's say const remove to do that this equal to a function that also receives the ID we've got the curly brace and we'll once again set to-dos as you can imagine here we need to filter out the to-do that we want to remove so to-do with an arrow then to-do doid not equals ID so it's going to go ahead and keep all the IDS that don't match this ID okay with those crud functions now complete let's scroll up and see what we've already got for imports we had text and view we're going to need a little bit more than that we'll also need text input and we'll need pressible and that's good enough to get us started I believe because we've already got text we've got our safe area view so that will help us at least get the top part where we're adding the new to-dos and then we'll work on the flat list so let's change this matter of fact we can just delete everything inside of those and change this to Safe area View we've already imported that now besides that we're going to have a view that wraps around the top let me go ahead and delete this text here so this view now is going to contain the text input and it's going to contain our button which if you remember the button is pressable instead of being a button element or named button so we'll use our text input here and of course there's a lot that goes with a text input I don't need a closing text input like that I'm going to use the slash here now after that I want pressable and inside pressible we're going to have some text here so this would be the text element that we imported okay so or I said text element text component if you will so now we've got our outline here inside of this View for the input and the button that would be pressed of course to add the new to-do now still inside the safe area view here is where we would put the flat list so let's go ahead and add everything we need for this top part first I'm going to need to create some different styles for each of these I'll start here on our safe area view though so I'll have style equals and I'll just set the names now and then we'll Define them underneath unfortunately that wanted to add a different word there okay styles. container so this would be the container for the full view flat list and all after that the view itself just for the top part so I'll have style equals this would be styles. input container and now we'll have the text input now the text input is going to have several different attributes on different lines I'll start with style here set this equal to styles. input let's go ahead and add those other attributes here so a placeholder and this is going to equal add a new to-do and we'll have a placeholder text color let's set that equal to I can get rid of those let's just set it equal to gray just a a slightly lighter color than what would be the the main text that we would be typing is essentially what I want the value of this input it is a controlled input as we' know from react that would just be text and that is the text state that we have up here it's also referenced here when we set the new Todo that's where we type it in so it's a controlled input and then we have on change text and this is where we name the set text function from that use State hook up here as well set text okay so basically a traditional controlled react input except we also have the Styles here and of course we had to import text input here and then we have have placeholder text color which is a different attribute than you might be used to okay now pressable is going to have a couple of things also so it has on press so when the button is pressed we're going to call add too after that it's also going to have a style and we'll set this equal to styles. add button now we'll also have some text inside the button so we'll set that to style equals styles. add button text let's go ahead and set the text on the button should just say add fair enough and that pretty much completes that so now let's go ahead and create the styles that we would have for this and of course we can bounce back and forth once we start the application and see how it looks at least in the web View and of course you can scan that QR code to look at the Expo Go app anytime you want to okay let's scroll down to start the Styles so we'll have H Styles equals stylesheet doc create now inside of our object is where we'll of course name each property that we had up above so we had container first and that went on our safe area view that wraps everything we'll set that to flex one we also want a width of 100% which would be be default essentially but we want to go ahead and set it at 100% if it's inside a container at all and then of course we're going to put background color set that to Black now really I don't think it's in a container so we could see how it looks let's go ahead and see how it looks without the 100% because this is just going to be out there covering everything let's go ahead and start the application now I can type clear first and now type npx Expo start and of course this will give us the QR code as well but I'm going to press W here's the QR code that you can scan to use your Expo app I'm just going to press W to look at this in the browser so we can go back and forth quickly and apply the different changes with our Styles so opening this on the web and it won't take it too long and I'll check this out in the browser as it opens that's fairly bright oh we have a problem stylesheet is not defined we didn't import that at the top I believe so let's scroll back up here yep we still need stylesheet after pressable from react native make that import and that should make a difference in the application now let's go ahead and reload and yes we have it now we have an index we have the header so we didn't hide the header in our layout file and we have the input here it's not styled at all either but the background is black back and that's what we wanted for the container so we know a couple of things we need to do one is let's go into the layout and besides the name let's set the options that we learned about now with options oops options needs to have equal you can say header shown set that to alt okay with that oops we've got an issue I should have put two curly braces there so one more here at the beginning one more at the end there we go now all should be well let's go back and take a look and we got rid of that header at the top and we have the add a new to-do the input is going all the way across because we haven't styled it yet at all and it doesn't have any extra colors or anything else but it's a good start and we'll take a look as we style each thing so remember header shown fals here in the layout for our stack let's go back to our index and after after we added the container now let's add the next container and that is the input container so we called that input container inside of here we'll set the flex direction to a row we'll align items to Center let's also set the margin bottom there we go margin bottom to 10 padding to 10 width now this one is inside of a container so we'll set the width to 100% Max width to 10,24 now that is an iPad Pro size after that we'll set margin horizontal to Auto so essentially if it's wider than an iPad Pro it's going to Center the to-do list on the screen we also want to set the pointer events to Auto and that will remove some of those warnings we'd previously seen in the browser okay with those changes save for the input container let's go back and take a look at the browser to see our changes in place refresh yep that's pretty much all we expected so now it's not as wide as the entire screen but it is just a container here for that header so if we were to of course shrink the screen down we would see a change as well but at least it's not all the way across okay next step after the input container is the input itself roll for some room let's add a comma here this was just called input now inside of this we'll set Flex equal to one border color we hadn't seen a border there before to gray but the Border WID if I could spell width whoa there we go WID and that's at one order radius at five padding at 10 once again margin right 10 font size this will be better 18 a little easier to read now we set the minwidth to zero and so that will let the text input shrink if it needs to and it might need to on some mobile devices and we'll set the color of the text and the input to White okay now let's go back and take a look at the input in the browser once again looking a little bit better and when I type it should have white text and yes it does back in vs code the next thing we want to style is the add button now for that we'll set the background color to white remember I'm going with a dark theme Here the Border radius to five and the padding to 10 and instead of just running to look at that button let's go ahead and quickly style the text for the button too so add button text now here we want a font size of 18 once again and we want the color of this text be black because the button is white now let's take a look and see if our header is complete it looks complete now this is the full web view let's open it up in a mobile view and you can see how the input looks a little good or looks a little bit better here can type test another to-do and everything looks like it should back in vs code it's time to add our flat list and of course the render item that the flat list renders so we could do either right now essentially let's go ahead and put the flat list in place and then we'll create the render item that goes in the flat list so here's the flat list and I believe we'll need to import that as well above and the data would be set equal to the to-do state that we have after that we're going to have our render item now this is what we don't have to provide yet but we soon will then we'll go ahead and set our key extractor because we don't have a key property we have an ID property so it's going to be item and this could actually we could say to-do here doesn't matter what we say as long as we call it something we have to-do then to-do ID after that we're going to say content container style and we're going to set that equal to we need two curly braces again Flex grow and a value of one and then we can just close out our flat list here let's scroll to the top and add the flat list to the imports from react native and after that we also need an icon for the delete button that we're going to put with every item when we render our item okay I'm back at that website we've previously learned about for icons that are available to us and here I want to type in delete and we should see a lot of different options pop up here for delete I'm looking for a circle that is what I want and it's material Community icons so I can click on that and it gives us the import statement and then it also tells us how to render the component itself so we'll leave this open let's copy the import statement put this in vs code first back in vs code I'm going to paste in that import statement for material Community icons and I'll be using the delete Das Circle icon from Material Community icons let's start defining our render item and then we'll be able to put the icon inside of it so after the different crud functions that we have I'm going to say const render item I'm going to set that equal to a function that has a destructured item inside of it and then we'll Arrow over and now I'll have a parentheses here at the top now I'm going to start with a view and of course we'll assign styles to these once again but the view is going to wrap each item from there each item does have text and of course we can put in the item. tile inside of the text text now we'll of course add the style attribute later after that we're also going to have a button so once again pressable and inside of our pressable button is where we'll have our material Community icon so let's go back and copy that code to paste in back in the browser I'm ready to copy the render the component code so I've copied that now we'll go back and put it in our render item back in VSS code I'm going to paste in the material Community icons right here and you can see the name is specified name is delete Das Circle size I want to change that to 36 not 367 that would be huge of course you can style all of this to your taste if you want to I'm also going to set the color to Red instead of black and finally I'm going to set selectable here and just set that equal to undefined and this gets us away from another one of those warnings we work continually seen in Chrome now let's set the different attributes of these components most of them being style so this view gets a style and we'll set that equal to styles. too item and of course we'll Define these Styles afterwards text is going to have a style as well so we'll say style equals you know what let's put this on a separate line because this once again is going to have several different things with it so style equals and now we'll bring this down line and here we'll have equals curly brace then an array and if you remember we can apply more than one style property this way so I'm going to have styles dot Todo text this would apply to all of them but then I'm going to check to see if the to-do is completed or not and we can do that with item. completed and essentially if that is true then we'll have stop files. completed text also applied so just a way to check if it's completed right there by using item. completed and then the and operator and then putting that after it now besides style we're also going to have an on press here so on press let me see if I spelled that correctly press set this equal to a function that needs to be called and this is going to toggle to do so our update function and we need to pass in the item. ID so it knows which one to toggle I did have a typo there that needs to be the equal sign so that works out there I can put this on a separate line to make it a little easier to read so we see where that text component closes out and we've got the item title and then the text component truly closes out so this is the first half that closes right here but it has the style and onpress at attributes or props if you will and as you might guess pressable the button for deleting the to-do is going to call our remove to-do function so this needs to have equal and a curly brace then we start our Anonymous function and inside of that we call remove Todo and we pass in the item. ID and we don't have any extra styles for pressable it's using everything here from Material Community icons we set the size and color right there now with the render item defined we can go ahead and put it in the flat list here but we'll still need to define those Styles so render item now we'll see it render out but it just won't have the Styles yet so we'll need to define those so if we currently look at the application we can see the list has in fact rendered but we haven't styled the text yet so the text is all black and of course not in the row we expect it to be in it's here somewhere we just can't see it because of the dark background as well so let's go ahead and apply these Styles and everything will look like it should back in VSS code let's scroll down to the end of our styles list and we just have three more props to add so we'll start with the big one which is the to-do item itself and it will have a flex direction of row and we'll align items Center then we'll justify content and that that will go to space between okay after that let's put in a gap of four between the items in the row padding of 10 border bottom color of gray border bottom width of one let's set the width to the full 100% Max width once again to 1,00 24 like an iPad Pro margin horizontal should be Auto and pointer events once again should also be Auto oops okay let's save and take a look in the browser to see if it made much of a difference well it did we now have the lines and of course our delete buttons are moved over to the right we just can't see the text yet so we're getting really close and back vs code to add our final Styles after the to-do item let's put a comma here and we'll have to-do text this will be a flex one also font size 18 and color I'll set to White and then let's go ahead and apply the other style and then we'll take a look back at the browser and that is just the completed text and here we'll say text decoration line here is where we want the line through and that means that to-do is completed and it can be toggled of course and then we'll just set the color to gray if it's completed as well okay let's go back and take a look at the to-dos now and yes we can read all of the to-dos we've got white letters here for the to-dos that are not complete the to-dos that are complete have a line through them now let's check out all of our crud operations to make sure they work so if I click on a completed item now it toggles and it's not completed and if I click on it it is completed so that works let's add a new to-do I'll just type test click add there's our new to-do let's go ahead and remove our completed research for the article and the remove button works as well and of course we already know the render item works so we are creating reading upda and deleting in our to-do list application and remember to take a look at it in your Expo Go app by scanning the QR code that's available in the terminal when you start the application as well now in the next lesson we're going to level up this simple crud app with some extras like custom fonts a light and dark themed toggle animations and a very important part of the Expo router that we haven't covered yet Dynamic routes I've got vs code open to the crud app to-do list project that we created in the previous lesson and at the end of the lesson I did mention that we would work on Dynamic routing in this lesson but I think I'm going to push that back to the next lesson so we can add local data storage first and some other nice extras to this app that we created in the previous lesson okay let's get started by opening a terminal window of course I've already got the project open here in the file tree to the left but if you're not in the crud app directory here in the terminal you want to see CD into that so CD R app or whatever you named that directory then once you're in that directory we want to go ahead and start the project with npx Expo start now as always this will give us the QR code that you can scan with your Expo Go app to check out the app on your mobile device it will also give us a URL where we can open this up in the browser so I'm going to press control and click on Local Host 808 1 it'll start building the project here and now we can open it up in the browser just like you see here and this is what we had last time so it populates the to-do list with some example to-dos and everything was working as far as the crud features now let's go back to VSS code and start adding some extras back in vs code I'm actually going to press contrl C now to stop the application because we need to install a new dependency we're going to add a Google font so I can type npmi then the at symbol then Expo DG gooogle D fonts slash and this is where you put the name of the font you want I'm just going to use one and it's called enter with an i so i n t r I'll go ahead and press the enter key and that of course is spelled with an e on my keyboard but they sound the same okay now that we've installed the Google font that we need let's go ahead and I'm going to press the up Arrow twice to go back to npx Expo start go ahead and restart the application but I can close this window while it's restarting and then I'm going to press alt Z here in the index file so I'm in the index. jsx file that we have I'm going to need to import that font here at the beginning so I'm going to import now curly brackets and there's a couple of things we want one is the font itself so I'll say enter an underscore whoops just underscore not a parenthesis and then notice we have some choices here already so everything from 100 thin to 900 black I'm going to go right in the middle so enter 500 medium then also I'll put a comma and I'm going to import the use fonts hook so both of those imported now and we can use those below so let's say after our state here for text and set text we can go ahead and import or not import I'm sorry we can go ahead and Define now now both loaded comma and error and notice they're in Brackets like we would with used state but we're going to set this equal to use fonts parenthesis and then start an object here and then we'll type in our enter underscore underscore 500 medium and put a comma after that okay so now we have imported our enter 500 medium font but what else happened here is a loaded and an error state so we need to check those later on so let's go ahead and scroll down just a little bit we have our different to-do uh crud functions right here and we don't have any use effect hook usage yet here I was just checking we just have Ed State imported here later on when we work with local data storage we will put in a use effect and the next part that we put in here for the font we just want to make sure it happens after the use effect and since we don't have any of those yet we can go ahead and put it right here so I need to check the if loaded State and so this is if it's not loaded and there is not an error then we can return null so we're just doing that to wait until the font has loaded essentially we want to make sure it's loaded and of course we don't want an error either so if it hasn't loaded and there is no error we return all otherwise of course we could use the error if we want to and if it has loaded then we're ready to use the font and now we're ready to scroll down and use the font in our Styles so let's scroll down to our input text inside of our Styles there's the container here is the input text itself and we can put in a font family let's put it right after font size so font family and then we'll say enter uncore 500 medium and that's how we can use it in the style so I'm going to copy this because we're also going to put it in one other space and that is in the to-do item I believe or the to-do text let me double check yep to-do text so underneath the font size here I'll just paste that line in as well okay now just to make sure we have the font loaded in and because we did add that new dependency now we've added it in our code let's one more time let's go ahead and open the terminal when with control and backtick contrl C to get out of that and instead of just restarting the server with npx Expo start we can also put a dash C after that what that does is clear the cach so now it's going to clear anything out it might have saved like the previous font and it will start using the new one so let's go ahead and restart our project with that- C flag to clear the cash and here we've got the warning now it said the uh bundler cache is empty rebuilding could take a minute it didn't but now we have our QR code of course we've got the URL once again and I think we're ready it says oh Metro waiting on it gave us instead of Local Host it gave us this expo here so if we want Local Host now we need to go into development mode which it says press s to switch to a development build so I'm going to do that and now it gives us the Local Host once again okay let's go back to our project let's reload and of course then we'll check out font to see if we can see the different changes here here it's quickly reloading there we go h a small change but I do like this font just a little bit better than what we had everything else is still working as expected and we have added a Google font and of course you can look up Google fonts and you can add any one you want to to the project and now we're back in vs code let me close the terminal window once again we want to add a toggle so we can switch between light mode and dark mode in the app or so that the user can switch between light and dark mode so what we want to do there is first make sure we have two different themes light and dark so let's look in our constants directory and click on colors and see what's defined this is like what came with the project essentially this is what they had previously defined let's delete everything here line8 and up get rid of those definitions first then after that let's go ahead and and start with some new definitions of our own text we're going to keep background we're going to keep icon we're going to keep let's get rid of the tint line and then let's have one other line here and let's call it button okay for button I'll put royal blue just so I have a value there and I think that's the one we'll keep now I'm going to copy the light Fields contrl C and just paste them in here to the dark too and then we'll change the values as we go so for text instead of a hex I'm going to use just the color name so black uh background is white which the pound FFF that works for that so we can just leave it like that the icon we're also going to switch to Black and we'll keep the button royal blue so that's our light theme very simple now for the text in the dark theme we'll go white background now we can switch this to Black the icon go red and for the button we'll switch this back to White and of course if you want to stay consistent and just use the keyword white up here the name of the color you can do that as well so now we've got our light and dark themes in the color TS file colors TS file that's inside of the constants directory now we need to create another new directory so let's do that and I'm going to create it here at the same level that the constants is at so that's inside of the crud app directory not inside of the app directory so now a new directory and we're going to call this one context because we need to create a theme context and a theme provider so this is going to be all in a file that I'm going to name theme context. TS oh and I said TS out of habit or by mistake what I meant to say was JS so we can rename this and actually have this as a JS file because once again we're not using typescript in this tutorial series but you can if you want to the project is already set up to use it notice we didn't even bother to change the extension on the colors constants file it's colors. TS and it works just fine the way it is as well okay now that we have our theme context file let's go ahead and import create context and use State and they're both going to come from react after that I want to import appearance if you remember we have used that before when we were detecting light or dark mode and that comes from react Das uh Native there we go and then finally we're going to import our colors that we just defined that are coming from we need to go up one folder and then go into constants and then look for colors there we go okay now let's define our theme context and so we'll say export const theme context set this equal to create context now parentheses and just put an empty object in there and that creates the context after that we need to create the provider so we'll say export const theme provider set this equal to an anonymous function and structure the children here now if you're familiar with react that just means the children components or the child components that will go inside of the provider that's something that is uh very common in react okay now inside of this theme provider function we're going to define the color scheme so we'll say const and have our color scheme and set color scheme going to set this equal to Ed State and then inside of Ed State we're going to use appearance and call get color scheme so let me press altz to wrap that down but what that will do is get the current color scheme for the system and pull that in here to the color scheme either light or dark now let's define our theme so const theme is going to equal and this will be a turn area so we'll look at the color scheme value say is it equal to dark if it is then we'll set the theme to colors. dark and if it's not set the theme to colors. light okay now we're ready for the theme provider return so we'll use the return keyword I'm going to scroll for just a little bit of room here and now we'll put the theme context that we created and say dot provider now let's set the value so it's equal to two curly braces here I like to use a separate line and I'll pass in the color scheme I'm also going to pass in set color scheme and then also theme so anything we want to get out of this provider we want to pass in as a value here now inside the provider we simply put the children and this means it's going to wrap other components and the color scheme set color scheme and theme will be available in those components for example our index jsx file will be able to pull these in because the provider is going to provide it to the application now I say it's going to provide it to the application but we actually need to put that in place as well so let's go into the app directory and then into the underscore layout. jsx file here we've got a safe area provider already in place so notice how it wraps around the rest of the application we're going to do the same thing with our theme provider so we'll import theme provider and we don't want the one from react navigation native so we want the one that comes from let's go up a directory and then look in the context directory and then get the theme context that's the one that we need so from there let's go theme provider I'll take the closing tag put it at the end and we have wrapped our application now in the theme provider which will make those values available to us inside of the components that are inside the theme provider and all of these of course represent the children as we defined here inside of the theme context. provider in the return there so now that we've done that let's go to the index. jsx file and we'll need to start at the top with a couple of new Imports okay the first import is going to be after you state because it also comes from react and it's simply use context okay now that we have that we have one more separate import so let's say import now this is going to be the theme context that we defined and we can see it comes from at context theme context that works as well so now that we have both of those let's define our context inside of the component itself here so we've got the to-dos set to-dos text set text we've got the font loaded here as well we can put this anywhere in here really it's basically another state so let's go ahead and bring that in it's our color scheme state so we'll have const and then we need color scheme set color scheme and also theme these will all be destructured from used context and we need to pass in the theme context that we imported to the used context hook so now we have defined those and we can work with them inside of the file now before we start putting color scheme set color scheme and theme all in place in the file let's import some icons like a sun and moon to use as we toggle the theme and you have seen me look up different icons before so you already know the site to go to from previous lessons for that so I'll just save us some time and import the ones I've already picked out and this is from octons and now we want from at Expo SL Vector icons SL ions okay now we can use those of course below let's scroll down in the component to where the return statement is because that's where we start to see the header so here's the input here is a pressable button of course that will add a new to-do we want to put the toggle just to the right of this pressable button so it's going to be another pressable that defined I want to call the onpress here or at least Define what happens when the onpress is triggered and so for that we're going to have an anonymous function and inside of this we'll call set color scheme now inside of set color scheme we can use a turn AR so we can check the current color scheme and say if it's equal to light you want to toggle to dark otherwise want to go with light so that will toggle between the color schemes there on this button being pressed so now that we've defined that let's also put in an inline Style just something simple Here style equals couple of curly brackets margin left so we have just a little bit of space between the buttons I'll set that to 10 and I think we can close that out now so we have our closing uh tag here for pressable as well now let's see what we're going to put inside I guess I've got one extra line okay inside of our button now I'm going to start with the curly bracket here so I can put some logic once again I'm going to check the color scheme so now if it's equal to dark then I'm going to have a return here well not a return actually it's a turn are and we will return at that point the octons and let's set the name equal to Moon set the size equal to 36 let's set the color equal to the theme we defined. text so we're pulling that in from our context as well now to avoid one of those warnings we've seen previously in the browser we'll set selectable equal to undefined and after that let's set a style also and have that equal to a width of 36 okay I may have a typo in there somewhere because I see this extra oh I know what I'm missing yet I'm missing the last part of the Turner it's not really a typo it's just we haven't closed out our Turner statement yet so now I can copy this octons because we're going to have basically the same thing except we need to switch the name and make this one Sun so we're going to either have the Sun or the moon icon depending on the theme and that's what will be returned and the pressable button of course will let us toggle the theme okay with those now in place we still need to apply the theme to our Styles right now we just have it set to a static black mode here as we see background color is black so let's go ahead and update everything we need to in our Styles so this should be theme. background pull in that actually we need to go ahead and set a function here too that I didn't as we have in the past so let's do that instead of styles equals we'll say function create Styles now we'll pass in the theme and the color scheme and then inside the function we will return our stylesheet doc create and so now we have the theme. background here we'll scroll down to the input and where the color of the text is white here we'll say them. text scrolling just a little bit more for the background color on the button this is where we'll say theme. button and now for the color on the add button text well we're not we don't have anything actually in the theme for that so what we're going to do is Define it right here we'll say color scheme and if it equals dark then we'll say okay this is going to be black text if not then we're going to say this is going to be white text remember this is the text color on the button so the button itself would be white if the theme was dark for example next let's go down to the to-do text itself and here the color is set to White I think we can say theme. text once again and finally it looks like we need to close out the function with our curly bracket right there and Save now the function is in place but we haven't called the function create Styles above so let's go back up somewhere towards the top and call our create Styles function we I think we want it to be after we know the font has loaded for sure so let's put it here we'll say const Styles equals create Styles we'll pass in the theme and then we'll also pass in the color scheme okay now with all of that place we should be able to go to the browser check the application to see if our toggle button is working so let's pull that up here's the application here's our toggle button we're in dark mode so we see the moon let's click on that and wow that is bright but yes we're now in light mode and we see the sun here so if we click on that again we'll go back to dark mode Let's Open up the dev tools I'll use control shift I clear that out for now and look at the mobile view here in Dev tools and I've got this set to an iPhone 678 Plus in previous lessons I've shown how to set this up to possibly show the frame just so you could look at this in the browser as well but remember to always go ahead and scan that QR code and look at it on your mobile device too but once again just checking to see how it all looks here in light and dark mode and everything is working as we expect it to we're looking at the website for react native reanimated and one of the things that can make your app really stand out are just some nice subtle animations to make things seem very smooth and flow like a native app and react native reanimated is already installed when we install that example Expo project so we've already got the dependency in our project now so let's go back to VSS code and put a nice little animation or two in place for our to-do list CR crud app okay back in vs code let's scroll up to where our Imports are and we can say go after the fonts that we imported here or the font if you will let's go ahead and import animated then put a comma and now we need curly braces and we'll also import linear transition both of these will come from react-native D reanimated okay now that we have the Imports let's put these in place and really what's going to happen here is the animated part has its own flat list so it's going to replace the current flat list that we have here so instead of just flatlist it's going to be animated. flatlist and then there's a couple of things we can provide as extra props here that will help us animate our flat list so the first one we want to have the main one that does the animations is item layout animation and let's set this equal to the linear transition that we imported now the other thing that I want to put just while we're here is called keyboard dismiss mode let's set this to I'll go ahead and delete the curly brackets we can just set this equal to on drag so what this does is when you have the keyboard popped up let's say you were entering in a new to-do so the keyboard pops up on your mobile device you can just drag down on the list and the keyboard will disappear and of course you can try it without this in there to see the difference now I can't show you that in the browser I don't think this item layout animation we should be able to see in the browser as well okay that's it we've applied both let's go back to the browser and take a look at our application over at Local Host 8081 I'm going to reload just in case and now let's add a new to-do and see if we see an animation new to-do yes and nice little slow animation there okay let's go ahead and delete an item and a nice little slow animation when it's deleted he so when I put this in you of course you don't see a keyboard pop up here so if you go ahead and scan that QR code that we have in the terminal window and check out your application in your mobile device where you'll have the keyboard displayed here as you want to enter a new to-do then drag down on the list and the keyboard should go away and that would be the keyboard dismiss mode and now we're finally ready to add local data storage to our application and this will let us persist that data between the times we start the application and pull those to-dos back up so the ones we checked off will remain checked off the ones we've added will then be there when we open it back up and so on I am in the Expo docs under store data and they give several options for what we want to do let's scroll all the way down here to to async storage this is the one we're going to use so let's go ahead and click on that to go to the dedicated website for async storage and then of course you can go to the get started page and it tells you how to install the dependency that we're going to need so that is what we're going to copy right here go back to VSS code and install and back in VSS code I'm going to press control in the back tick to open up a terminal window contrl C to stop the application then I'll just write click and it pastes this in for me you may need to do it a different way depending on what computer operating system you're using but I have just pasted that in so I'm ready to install react native active or I'm sorry react native async storage so let's go ahead and press enter install this into our application it will be listed in the package Json file and then we'll be able to use it so now let's go ahead and restart the application with npx Expo start I don't think we need the dash C to clear the cach but you can use that anytime you want to or you think you're seeing something that you shouldn't be seeing in the application that would be a good time to clear that cash out when you restart in Dev mode okay we've got everything up and running but we don't really need to go back and look at the app yet let's just scroll to the top and import what we're going to need here so I need to import async storage I'll just add that below our animated Imports here so import async storage that's going to come from react native async storage SL async storage so we see it right there in our list okay now that we have that we also need use effect so let's import that after our use State and use context they both come from react as does use effect okay we've got the Imports now let's scroll down and put a use effect in place now remember we want the use effect to be before we check to see if the fonts have loaded or not or there will be a problem okay this use effect is going to be for loading data into our application so right now we're importing data up here we're importing data from our data/ toos file that we have and that's just our example data that would be fine to start out an application with maybe you'd want to have five example to-dos in there and just name them example one example two and so on just to show users how it looks with a little bit of data in there before they start adding their own of course it would be easy to delete just about five example ones as well when they first started using the application but after that you want to use the data that they have entered and saved or removed and so on so let's define a function inside of this use effect we'll call it const fetch data set it equal need the equal sign here equal to an async anonymous function and inside this function we're going to have a try and of course with a try let me scroll for some room here is also going to be a catch we have an error inside of here we'll just console do error and pass in the error but inside the try let's define our Json value and we'll set this equal to a weit async storage that we've imported dog item and we will look for an item called to-do app so that would be what would be saved in the local storage and we're retrieving it if it exists and we can check that but now we want to do just a little bit more because this is the Json value so you need to parse that as well so let's say const storage todos equals a Json value and if that's not equal to null then we'll call json. parse and we'll pass in that Json value so we'll parse the Json we got and otherwise we'll just return null so now we've either parsed our Json or we have a null value so here we can say if we have storage to-dos and storage to-dos has a length then we can go ahead and set the to-dos equal to storage to-dos but now I also want to sort the to-dos and make sure that we always have the newest to-do on top and not the bottom so I'm going to put in that sort function and then I pass in A and B and then we have b. ID minus a.id and we really only need to do this when we load the to-dos back in this won't need to be something we do when we save the to-dos to local storage because they could be saved in any order but when they're loaded back in is when we would want to sort them but else here let's also have another set todos and this is essentially going to be okay we didn't have the storage Tod do so maybe this is the first time the app is ever opened and we have that example data so this would once again then be data. sort here would be a A and B and we'd have b.id minus a.id so the difference here being we're either using the storage to-dos or we're using the data that comes with the app right at the very beginning now we still need to call this function inside of the use effect and then we could put in the data that is imported as a dependency we really only want this to happen of course when the application loads so you could leave it empty the data is not going to change it's that static example data but it is a dependency really for the use effect so it does go in the dependency array if you want to put it there now since we're loading the data inside of the use effect we want to come up here to this used State and remove the data that we were putting in there and just put an empty array inside of the to-dos and the set Todo use state to start out with and then it will load when this use effect is called okay so that's all good you say and that's how we load the data in but now what about how do we save data to local storage and of course how does it save the latest data well we need a second use effect for that so let's go ahead and Define that now so we'll have use effect starts out the same with our Anonymous function and it also has a dependency array I'll scroll it up here just a little and inside the dependency array we're going to be looking whoops I need to be inside the dependency array going to be looking at whenever the to-dos state changes that's when we'll want to call this so we get the latest information set inside of this use effect so this won't be quite as big actually we'll Define store data set it equal to an async function now let's have our try catch once again we can just catch and then console error but inside the tri portion here we want to once again Define a Json value now we'll use Json stringify so json. stringify and we pass in the to-dos then we will await async storage and call the set item method we want to make sure we name this the same so once again Tod do app but now the second pram here is the Json value that we're setting inside of local storage so let's go up here and make sure we named that the same yep to-do app and to-do app here are the same so that's all it takes to set it now of course we need to call that down here as well so we call store data and this happens anytime the to-do State changes so this gets the latest update set into our local storage and with that complete let's go to the terminal window once again with control in the back tick I think this might be a good time to go ahead and restart the application with npx Expo start and to be safe use that- C flag to clear the cache once again because now we're changing a little bit about how we load the data let's make sure everything works as expected we also want to test this out not only in the web but also make sure you scan the QR code and use your EXP Go app to check this out on your mobile device and make sure it's working as expected okay I have loaded in the example to-dos and so they are just like they are in the file right now and of course we can check one off like pay the bills let's go ahead and add a new to-do new to-do for Dave you could put your name in there whatever you want to do we've added a new to-do we've checked one off let's delete finish the presentation and now if we reload the app it shouldn't go back to the file the original list it should still have the new to-do for Dave here it should have the other one checked off the one deleted and so on it should look the same here after I reload I still got new to-do for Dave the other one is still checked off the other one is gone and so on so our state Remains the Same and that's what we want to make sure happens both in the browser and on your mobile device okay everything is working for me including local storage as you see both light and dark mode here on each side of the screen so there's one thing I want to call your attention to do you see the difference between the images besides light and dark mode notice on the light mode you can't see the battery status or any of those things across the top that's called the status bar so let's fix that quickly back in VSS code I'm going to scroll to the top where we've imported several other things and I'm going to import one more and that is the status bar so import status bar and that comes from Expo status bar okay after that let's scroll all the way down to almost the bottom of our application here in the return close to the end of the safe area view now just above that closing safe area view is where I'm going to put the status bar and we'll set the style of the status bar equal to a turnera that's going to check the color scheme and here we kind of want the opposite so if it's equal to dark we want to return light otherwise we want to return dark and then of course we need to close out the status bar with the Slash and the arrow and that's all it should take so now let's once again check the app and as you can now see when I compare the images left and right with dark and light mode we can see the status bar with the battery status and everything at the top in both color schemes so that was the final thing we added to the app today but in the next lesson I promise we will look at Dynamic routing in react native with Expo I've got vs code open and you can see the crud app directory that I have over here in the file tree that we've been working on for the past couple of lessons let's open a terminal window with control in the back tick and if you haven't already opened that directory in the terminal you'll want to CD and then into the directory whatever you named it mine is named crud app and so now I am in that directory and I can type npx Expo start to go ahead and start up the application this will go ahead and give us the QR code that you can scan with your Expo Go app on your mobile device and you can view the application likewise you can press W and it will open up in a browser here on the web so let's go ahead and take a look at that and here we've got it so it's even without pressing W it says open web here it's waiting at Local Host Port 8081 so I can also press control and just click on that link we'll go ahead and compile the project and should be ready to open it in the browser and here is our crud app to-do list in the browser now if I click on a to-do it crosses it out so we have an action there for completed or not completed likewise we can delete a to-do as well and in the last lesson we added async local storage so it remembers the to-dos we put in when we reopen the application the ones that we added are still there today we want to add Dynamic routing and what that means is when we click on a to-do for example it's going to take us to a page just for that specific to-do and we don't have to add a new route for each to-do that would be static what we mean by Dynamic is we can add one route that can handle the page the edit page that we're going to create for any one of these given to-dos and we're going to do that by passing the ID of the to-do to the route so let's get started with Dynamic routing back in vs code back in vs code let's go ahead and close the terminal window and let's open up the crud app directory that we see here on the left and then the app directory that has our index and our root layout file and we want to click on that root layout file first let's go ahead and press a couple of keys I'm going to press alt Z so it wraps any line of code down so you don't see it scroll off of the screen and also for now contrl B which will hide the file tree and give us just a little bit more room now if you remember earlier in this react native tutorial series we built a coffee shop application and there we had a stack that had more than one stack screen so far as we've been working on this crud app the to-do list we've only had one file the index that we have put everything in but now we're going to have a dynamic route and it's going to have its own stack. screen but before I do that let's go ahead and add screen options to the parent stack so screen options and I'll set this equal to what we have below header shown fults and this way we won't have to put the header shown faults on every stack do screen so I can remove this and now this setting for the stack will apply to both stack screens that we'll have so let me press shift alt and the down arrow to copy that down and now let's put in the new name for our new stack screen and this is going to be our dynamic route so we're going to create a to-dos directory inside of the app directory and then we're going to have a file that represents the dynamic destination if you will for our edit page for each to-do and it's represented inside of brackets and we'll just put ID because we're going to pass the to-do ID whatever that ID is that will pull up the individual to-do that we can edit at this Dynamic route so now after we save these changes we need to go back to the file tree and create that Dynamic route it's going to be in the app directory so I'll create a new directory here called to-dos and then inside of the to-dos directory I'll create a new file and I'll name it ID inside of brackets like that and then jsx now remember we're not using typescript in this series but please feel free to if you're comfortable with typescript now we are going to build a complete component a complete page for our application if you will here but I'm going to start out with the very basic stuff and then we'll come back and add the rest so for now I want to import use local search prams from Expo router after that I'm going to start defining the function so I'll have export default function I'm going to call this edit screen then inside of the function we can say const and we can destructure the ID which is that pram when we call we'll set that equal to actually use local search params so when we call that hook that we have imported from Expo router it will give us the ID value that is passed to this route which is represented by the ID inside of the brackets so for now let's just have a return and I'll put something simple here like oh I guess we'd need to import text if we were going to do this exactly for react native typically in a web application I would just put like an H1 header but let's go ahead and import text from the top and maybe a couple of other things let's do a view text we're going to need a stylesheet eventually as well and pressable for a button and a text input also all of these can come from react-native which is why I went ahead and did that let's press alt Z to wrap that line down okay so we could just put maybe a view here for now and inside that view we could have text and inside of the text we could put in the ID value of course that we have received and so this is just a very basic page we'll come back and add much more to this but for now I just wanted to put in the basics okay let's move over to the index page this of course has our full list of to-dos and we need to change a couple of things just so when we click on it to do it takes us to this Dynamic route let's scroll down in this index file until we reach our render item where we are actually creating the list items that we list out okay here it is notice we have a view and inside of the view we have the text of the item and it has an onpress and we also have a pressible and this is of course to call our remove to-do function so what we want to do is wrap this text in another pressible so let's start there I'll take this closing pressible and cut it out here with CR X and just past it underneath the closing text so we have now wrapped the text in pressible and now I want to remove this on press that we have where we're toggling the to-do item so I'll also cut that out with crl X and I'm going to put that inside of the pressible itself here but I'm also going to change the on press there's also something called on long press and that's what we're going to use is a long press to toggle the to-do item so if I press down on the to-do item and hold my finger there just a little longer or hold my mouse button down just a little longer that's going to toggle the to-do item so that means we're also going to have a regular onpress and this is going to help us navigate to that Dynamic route so let's go ahead and call this function and inside of the function we're going to have a new one that we need to trate yet I need lowercase here handle press and this will receive the let me get the right casing item. ID there we go so what we're going to do is call handle press and pass the item ID in and handle press will navigate us to that new Dynamic route okay so just like before I'm going to press contrl B to hide the file tree and have a little more room also alt Z to wrap any long lines down now let's go ahead and see if we have already imported used router I don't think we have and we're going to need that in this application so let's import use router here import use router that's going to come from Expo router and after that we can use it here underneath let's put it underneath our use State and use context so now we'll say const router equals use router and now we can use the router from use router to navigate so now we can create our handle press function and I'll just do that underneath all of our other crud functions here so after const remove to do we'll have const handle press let's set this equal to a function that receives an ID and now inside of this function we're going to say router. push and this is where we can put in the URL so I'm going to put in a template literal string so I can insert the ID and it's going to be to to-dos let me go ahead and start with a slash here slash to-dos slash and now I need the ID number that we're passing in that the function receives so let's save that and we come back and look at this and here it is called with the item. ID and that will route to our Dynamic route when the item is clicked with a normal click or a normal press a press will toggle the completed status of the to-do just like we were previously doing with a normal press okay I know the application won't look like much now on the new page but let's go ahead and try the dynamic routing out because we actually have it in place so we have started the application or if you need to restart it with npx Expo start and then let's go ahead and press control or you can press W to open the web I'm going to press control and click on Local Host 88 80 and pull the application up here in a new tab I'll close my old one here is the application so now a long press I'll click and hold and it crossed off the to-do just like we had previously done with a normal press I can click and hold again and of course it unchecks it so essentially completed or uncompleted but now let me go ahead and just click the to-do and you can see we've got the number 20 way over here in the top left it would be hard to see let me go ahead and zoom in with control and the plus button there's the number 20 at 500% that's as big as I can make the screen but we do have it on the screen so now let's go ahead and make this page the edit page for any specific to-do and of course if I come back and click on a different one there's the number 12 so it's going to show the ID of whatever to do we click on right now let's go back to VSS code and finish this page okay back in VSS code I'm going to close a terminal window and open the file tree I can go ahead and close out of the layout file we're going to work between the index file and our new Dynamic route and really a lot of the same dependencies and a lot of the same things are in both once again alt Z to wrap anything down in the index file that is off the screen and really since I have both of these open up here I could go ahead and press contrl B to close the file tree and we can just toggle back and forth up here so we've already imported quite a few things here at the top we have View text stylesheet pressable text input but we're going to need a few more so let's start with those we'll import use State going to need use effect and we're also going to want our use context so we can get our theme as well get all of that from react then we're going to import safe area View and that should come from react native safe area cont context after that let's go ahead and get our theme context that should come from at context SL theme context then we're going to import the status bar which we also used in the last lesson that comes from Expo status bar we're going to set up fonts like we did previously on the other page so we want enter 500 medium also the use fonts hook those come from Expo Google fonts sler and then we're going to use the Sun and Moon icons so that comes from import octicons there we go octicons and that's from Expo Vector icons slash there we're missing something at the end of that autoc complete we need slash octons and then we're going to use our async storage that we applied in the last lesson as well so import async storage that should come from react native async storage SL async storage and we're also going to need use router once again because we're going to want to navigate back to our original list after we make any change to the individual to do so we'll have import use router and that's going to come from Expo router okay that should be all of the Imports we end up needing here in the page let's get started underneath our ID that we've already got from use local search prams and we're going to Define some State here for the individual to-do so we'll have to-do and set to-do we'll set those equal to use State and if you remember our to-dos are objects so we just want an empty object here to start out with let's also go ahead and Define the router once again so const router equals use router and after that we're going to just copy some things from our index page that are absolutely identical so what we want to do here is get the const loaded and error from the Ed fonts hook copy that and go back paste that in I also noticed we hadn't got the color scheme and the set color scheme and theme from our context yet so let's get all of those and just for consistency let's put them kind of in the same place here just above the used router now we are going to have a use effect where we load the data so I'll start it but I won't put in the details yet and we'll come back to that so let's go ahead and just put in the basic use effect here and we'll have an empty dependency array for now so we'll come back to this use effect but after that if you remember when we load these fonts we want to have the last part after any use effect we would call so we want to copy this last part and just put it after the use effect so here we go I'll put that in and all of that is the same so it was just easy to copy it we'd already covered what it all did in previous lessons so that's essentially loading in our theme and fonts now let's talk about this use effect because we're already using async storage and really that's where we want to get the data for any of the individual to-dos because we already load the data into storage in the index file when the to-do list loads and when we make any changes of course we update that async local storage as well so anytime we would navigate to edit an individual Tod do this would be the place to load that data in and of course after we make any changes we'll want to save it to our async storage as well but let's start off with our fetch getting the data from the async storage so I'll say const fetch data going to set this equal to an async function and this async function will receive the ID of the to-do and now inside of this function we'll have a try catch so there's the try let's put the catch right below receive the error here and of course we could console do error the error and just pass that in so in the TR is where we're going to take care of everything let's define our Json value set this equal to await async storage. get item if you remember we were calling our storage to-do app so we're getting all of the to-dos at this point and now we'll say const storage to do equals and now we'll use a Turner so if we have a Json value essentially if it's not equal to null then we'll say json.parse and we'll parse that Json value otherwise we'll just return null okay so now let's use an if state so if we have storage to-dos and storage to-dos has a length then inside we can define a Define a spe specific to-do so I'll just call this my to-do is going to equal the storage to-dos doind which will return the specific to-do we'll have to-do do ID do to string because any Pam that comes in like the Pam we get from use local search prams will be a string and not a numeric value so now we'll say equals and we'll just compare that to the ID that's passed into the function and then we will let me go ahead and move that back we will set the to-do to do there we go equal to my to-do that we have hopefully found okay so that defines the function but we still need to call the function of course so now we call it with the ID that is passed into the dynamic route with fetch ID and then of course that is the dependency is the ID so anytime that ID changes essentially a new to-do is passed into our Dynamic route then this use effect will run again now of course we also need to save the new to-do and that's going to be in a function this time because we'll call it with a button click so here we'll say const handle save so it's not directly inside of use effect this will be an async function and now we don't have to pass in the ID because we're going to use our state above so it's going to be the to-do state that is set the specific to-do that we have okay so here is our try and let's put the catch once again with catch and an error and we'll console. error that error and pass it in now inside of the try here I'll scroll for a little bit of room let's define our saved to-do this is going to be equal to the to-do that we have and now we're changing the title because that's what we'll be able to edit there's really nothing else we can edit besides the completed status and we can do that right on the list so we're going to edit the title on this edit page so this will receive the to-do do tile from the state okay so there is our save too now we'll say const Json value set this equal to await async storage once again get item or getting the to-do app item from Storage after that cost storage todos this should look very familiar because it's what we did in the previous function as well so we'll say Json value not equal to null then we'll call Json do parse and lowercase parse there we go and now I'll have Json value otherwise it will be null me get rid of the semi colons I don't consistently use those okay if storage todos and storage do to-do storage to-dos do length having trouble speaking today we'll say resp other to-dos equals the storage todos do filter and now we're going to filter out the to-do ID so we'll have to-do doid not equal to saved too. ID let me press alt Z to wrap that down so what I'm doing here is removing the to-do that we edited and now we'll have the other to-do because we don't want the old version of that to-do we want to include the new one so here's all of the other to-dos and now after that we'll say const all to-dos equals a new array and we can pass in the other to-dos and then we can pass in our saved to-do so that will replace the old version of that Todo okay now we'll await async storage and we won't call that yet we want set item first and then we'll call this and we'll save it under the to-do app then we'll say json.stringify and let's pass in all todos but with this if we should also put an else so let's say else now we can await async storage. set item and this will once again be the to-do app value and now we'll say json. stringify and now we're going to pass in something different this would be for example if this was the only to-do we had so it's an array with our to-do object in here so if we didn't have to-dos in storage for some reason say everything was deleted and there was no length to that array then we would just create a new one here okay finally after our handle save logic we have one more thing to do and that is router. push and we want to just go back to the homepage so that would be just at the slash here this would take us back to the root so after we have edited and saved our to-do changes we're going to go back to the list the index page and that really gives us all of the logic we need for the page but we're really not returning anything new yet so let's go ahead and update everything we had here first of all I want to wrap everything say inside of the safe area view component that we have so let's go ahead and the closing at the end here after that we're going to look at the rest so we're going to have a view and of course that view is going to have a text input where we can change things so we'll say text input and that can close itself out a self closing tag also going to have a wrestle here where we want to actually save our changes so we'll leave that as well now that's one view other than that let's go ahead and put in the next View and actually I just told you wrong I don't think this would be our save button I think we want to make this our night and day our light and dark button our sun and moon all of those things right here inside of this view let's go ahead and make a save button we'll also make a cancel button as well so here we'll have a pressible then another pressible and after those we'll close out that view we're also going to use the status bar like we did in the previous component now here we'll set the style let's set this equal to the color scheme create a Turner so if this equals dark then the color scheme will be set to light and remember we did this before so we could see the things like the battery meter up at the very top of the screen now here we want dark so the reason we're setting it this way so it's just the opposite so if the color scheme's dark we'll make that battery meter and other things there in the very top status bar light so we can see them okay after that this is a self-closing tag as well so close that out and now we're ready to put in some detail dets here for the page so again a text input this is light and dark mode this will be a save button and this will be a cancel button to cancel out of our changes now we haven't created the Styles yet but I'm going to apply them here and then as we actually create them below I'll go ahead and bounce back and forth so you can see each different component as the style is applied but for now I'll just say style is equal to we'll have a Styles object so it will be styles. container not stylesheet Styles there we go now after that let's go ahead and set the styles for the view or the style we'll set that equal to styles. input container and now our text input is going to have several different things we set on it so we'll start with style set that equal to styles. input we're also going to have a placeholder value here and we'll set this equal to edit too after that placeholder text color let's set that equal to Gray and now let's set the value of this input equal to to-do do tile and I'll use optional chaining because it could be undefined or empty and then we'll say if it is of course just set it to an empty string okay after that on change text and this is where we'll update the to-do value so that's set equal to our curly bracket I can't see it right now there we go let's go ahead and pass in a function that receives the text and we set that equal to set to do with our you state above remember this is an object so we'll spread in Todo and then we'll have our title text so if this is confusing at all this is the to-do State from above and usually I would use previous here in a set Todo so let me do that instead I'm going to say got the previous state which you can do with the setter in the Ed State hook so set to do is receiving the previous state and now I need to wrap this in another parentheses that we would see here so let me add one here at the end and now instead of this to-do State I typically like to use the previous state and I'm just spreading that in and of course it is a to-do still so it's representing essentially the same thing I had I think this is a better way to do it and then we have the title text so this is overwriting the title property of that to-do State okay our next button being the toggle for the theme we can really just get that from our index where we had already created that so let me scroll down in the page to where we had that with our Octon there I see it here is the pressable itself so it has its own onpress I'm just going to copy this full thing from line 115 down to 120 contrl C to copy come back here and highlight the pressible that we had inserted here and just paste it in so it's the same thing when I save it autof formatted now we have our light dark button that we had created in the previous lesson okay let's scroll up for some more room and we'll look at our second view here now I know this isn't where the input is it's where the save and cancel buttons are going to go but nevertheless I'm going to apply the same style here so I'll have styles. input container as they apply to both views that we had after that our pressible here is going to be the save button so let's come down an extra line and we'll say on press we're going to call the handle save function that we previously defined other than that we'll set the style equal to styles do save button so our save button is going to look a little different than our cancel button then on the pressable button itself we'll have some text we'll set the style here equal to let's see Styles Dove button text and of course we want it to say save now just to make things a little easier I'm going to copy this save button that we just made control see and then paste it over the other area we have a button for pressable now we'll just change what we need to change here so this onpress is going to be an anonymous function and inside this Anonymous function we're going to say router. push then we'll just go back to the homepage so that's a pretty easy way to cancel out our changes and not save them and just essentially cancel out of editing that to do fill back to our to-do list after that we will have styles and now if you remember we can apply more than one style if we put them inside of brackets like an array so here we're going to have brackets and we'll say styles. saave button even though it's the cancel button because many of the same Styles will apply but then we can override that by providing an additional style here essentially overriding one of the Styles that's in the save button style or class and so I'm just going to set the background to red and by putting that in that array they'll both apply so it will first apply these Styles and then it will overwrite the background color from the save button Style with red now for the text style we'll do something very similar so let's once again put our save button text style in Brackets then let's put a comma here and here let's change the color of the text to White and of course we want to change the text itself to cancel now All That Remains are actually creating those different styles that we've applied so underneath our function here let's create our function for creating those Styles function create Styles set this equal to actually we have the parenthesis first and we'll have theme that gets passed in and color scheme as we have in previous lessons as well then we're going to return stylesheet do create and for now I'll just pass in an empty object because we still need to call this function above let's scroll up and do just that I'll scroll up here say above the handle save right after our if statement here so I'll say const Styles equals create Styles and we'll pass in the theme and the color scheme so now that we've defined the Styles and they'll apply we just need to go ahead and create the individual areas like the container and the input container and so on that contain those Styles here inside of our stylesheet doc create let's start with the container and here I just need to set Flex equal to one width at 100% And then also the background color which here we need to remember our theme just has a background property and not background color okay let's put a comma after that now this won't apply a whole lot let's go ahead and see how it looks in the browser or in your Expo Go app whichever you prefer so I'll open up the terminal window with control in the back tick we can see mine's already running if yours isn't running you want to do npx Expo start which will start that let's go ahead and go to the browser and let's see what we've got here it looks like I need to refresh and I have an error let's go back now this is where I was telling you earlier at least with an overlay I should have one in the video to show this that the octons either needed to not have the curly braces when you import that or not have the slash octons so you could get rid of this still use the curly braces because then it should bring in octons from Expo Vector icons but if you have the slash octons then you don't want the curly braces let's try it this way now I'll go back to the browser and refresh and see if I can get the app to actually load yes it did so that looks good let's go to the page now and see what we get okay we don't have a whole lot but we do have a few things we've got our day and night are light and dark toggle and now when I toggle to light you can see some more we have the text for the to-do says set up the new computer and it's actually an input notice when I click in there it has the line you've got the save button and the cancel button they're just hard to see especially when we go to dark mode Let's go back and apply some more Styles maybe I'll leave it in light mode even though that's bright and we'll be able to see the things a little bit better as we go okay back on the page now where we're creating the Styles here for the dynamic route we have the container after that we want to have the input container so this wraps around both the part that has the input and the part that has the buttons we'll have Flex Direction set that to row align items we want in the center set the padding to 10 put a gap between the items of six width at 100% a Max width 1,24 margin horizontal that would be left and right well set to Auto so it centers horizontally and then pointer events and we want this one just to avoid some of those warnings we've seen in the console before we'll set that to Auto I'll put a comma here after the input container and let's see what that changed in the browser so okay now we have a little bit different setup you still don't see a whole lot of detail and of course in dark mode you don't see much at all but here's the two buttons here's the input here's the toggle let's go back and add some more we we get away from that bright page soon I prefer the darker Pages myself okay after this we'll design the input itself we'll set that to a flex of one border color set that to gray order width of one a border radius which will make the corners round just a little bit we'll set that to five padding of 10 margin right go ahead and add just a little bit there even though we do have that Gap too so we'll say margin right 10 font size 18 font family this is what we imported enter have underscore 500 medium and again these are just my styles of course play around with it style it make it your own app the men width is to let the input shrink if it needs to shrink for smaller screens and I'll set the color equal to theme text so it actually changes with the theme we have okay I'll put a comma after that let's go back to the browser and see how these Styles applied hey our input looks much better now we can see set up the new computer and it shows up in a full input switch this and yes the input looks great in dark mode too so really now we just need to style the these buttons let's go back to VSS code once again and after this we want the save button set the background color equal to the theme do button and then we'll have a border radius equal to five once again so we have some rounded corners and padding of 10 so this is the save button but remember some of the save button styles apply to the cancel button as well and then let's go ahead and just add the other style here because there's not much save button text here we'll have font size of 18 and now the color this is where we import the color scheme into the function so we can use it and we'll check to see if this color is dark then we want to set the color to Black otherwise we want white and save now we should be finished styling let's go back and look at the edit page so here is the light mode set up the new computer clearly have a save and cancel button when I switch over to dark mode what I prefer are save and cancel button and again the to-do here that can be edited let me go ahead and cancel we should go back to the main list if I click on even one that has been completed I should be able to edit it yep pay the bills I could switch this to monthly bills let's go ahead and Save now when we come back and find pay the bills even though it's crossed out it says pay the monthly bills now I can long press and uncomplete uncross that out but either way our long press is working and our Dynamic routes are working as well so everything looks good there one other thing I want to try is possibly limiting the length of the to-do when we get down to a smaller screen for example let's look at this we're in an iPhone 678 Dev tools modee right now here in Chrome and if I put in a long to-do like check for the news paper every weekday morning that should crowd off of the screen and it sure does now of course if we switch this over it looks great in horizontal mode and if we come out of a smaller screen it's going to look fine too but maybe we don't want to allow the text to be that long or you might prefer to set up a style where the text actually wraps down but let's just see if we can limit this input first okay we're back in vs code we already have our Dynamic route file with the id. jsx and we also have the index and they both have text inputs so let's scroll up here to our text input and where is it we've got the handle save here we go so inside of the jsx return here just after style I'm going to put a max length set this equal to 30 so when we edit at this point we can't enter anything that's longer than 30 characters now let's go over to the index. jsx and let's find the text input that we're using there as well so that should be down here here we go right after the style here I'm also going to put max length equals 30 and that should limit the length of what we can enter for a to-do both when it's originally created and when it's edited let's go back to the browser now this one I can't really change right now well I can edit it and change it that way but I can't go ahead and make it shorter than 30 otherwise so let me go ahead and just change it to again every week or some whatever this says and I'll save now I can delete that one but let's try to enter a new one so take out the trash every week day I'm can't type day anymore I have ran out of characters and that's what I wanted to happen so now this looks just fine take out the trash every week now let's try to edit this here I'll try to add more characters as well so every week day I cannot add more characters here either so everything does work the way we want it we could still save this so I could switch this to every Tuesday for example save the edit and that looks just fine so I hope this lesson has helped you learn more about Dynamic routes with the Expo router when you're creating a react native app today we routed to an individual to-do page so we could edit any one of our to-dos at this Dynamic route that accepted an ID in the route we're getting started today in the Expo docs and it says introduction to development builds so not just react native but we're focusing on a development build with the Expo framework and first we want to look at the difference of Expo go that we've been using throughout this series and a development build well Expo go is a perfect for getting started quickly and of course that made it perfect for this tutorial series it's a sandboxed native app environment however as you progress with your app build you want to break out of that sandbox and an Expo development build let you do that an expo development build is a debug build of your native app that uses the Expo Dev client package and a development build also puts you on the path towards a preview and eventually production builds when you're ready to release your app to the world so let's get started now before we get into VSS code I'm at expo. deev and you can get a free account there if you haven't and you're going to need it at this point so what I recommend if you don't already have an account is just just do the sign up and get a free account once again at expo. deev I'm going to log into mine as we go through this process so create your account first and then you'll be able to follow along I've got VSS code open now to our to-do list crud app project from the previous lessons and we're going to use it for our development build today there's two ways to create a development build one is locally on your computer but that does require installing xcode if you have a Mac or Android studio and of course you can use Android Studio on a Mac or on Windows I'm on Windows but what we're going to do is use option two and that is Expo application Services an EAS lets you build apps in the cloud and then install on any device without ever installing xcode or Android Studio on your computer so it should be much easier for all to follow along with that and that's what I prefer to use as well so let's open up a terminal window with control and the back tick here in VSS code we need to CD into our crud app directory if you haven't already so now that we're in the crud app directory we want to go ahead and install the EAS CLI so those abbreviations stand for Expo application services and CLI stands for command line interface so we'll type npm install DG and then e- CLI the- G flag just installs it globally so it won't be just for this project you'll just have it in installed and be able to use it on any project in the future okay you may have received a few deprecated warnings up here don't worry about that that's something they'll need to update in their CLI but we'll continue to use it now we'll say e-v and just check the version that we have installed so now you can see I have a report here that says what version of the EAS CLI was installed also I'm on a Windows computer and it also shows what version of node.js I currently have installed okay after this we need to log in to our account that you hopefully created at expo. deev so I'm going to type EAS login and let's see if it thinks I'm already logged in or if I need to continue it says I am already logged in and there is my username the same as I use on GitHub and we can continue so I'll continue the process just so we can go through it and you can see what you need to do so I'll type y there so enter my email or username so I'll just re-enter the username we see there then my password so you would do the same for your account after that it should have us logged in yes it says we're now logged in now we can verify this by typing EAS who am I all one word for who am I press enter and we get another warning here don't worry about this I think we're going to see this warning a few times but after that we see get deg gray so we see my username and we know we're logged in okay after this we're ready to initialize Expo application services so we type EAS andit press enter now once again we see that same warning no need to worry about that every time we see it would you like to create a project for the get de SL crud app so I want to say yes with a capital Y it will start creating this project says the project was success successfully created and linked to our account now because we're logged in so your ID here probably looks different than mine now that we've done that we're ready to configure the build so we want to type EAS build colon configure and this is going to create a Json file that has our build configuration so let's go ahead and press enter here and it will create the file and we'll take a look at that after it's created oh it's going to ask us first which platforms do we want to configure for EAS build well today we're going to do an Android build and that's because we don't have developer Accounts at uh apple or at Google Play yet of course you can set those up if you want to but I didn't want to require that for this series by any means so since we don't have those Android still makes it fairly easy to go ahead and create a build for iOS you would need that Apple developer account but on this instance right here I'm going to go ahead and select all in the future you'll see where I specifically say Android just to get through this without requiring anybody to create an account okay so says we're ready to build now and it generated e. Json so let me quickly close the terminal window open up the file tree and as we scroll down in the project you can see we have a new file here e. Json now it shows right here inside this Json file what version of the EAS CLI we're using 13.3 and here it says remote and here is our development build so development development client is true or distribution of course this would be internal in your organization only others helping you build the app and test it would be getting this distribution then you can see there are other builds available here and that would be preview so once you've moved Beyond development you would also be previewing it internally and then finally production when you would release the application now today we're doing a development build and going through these processes so it will make it easier for you to follow along when you do preview or production and you can follow those steps in the Expo documentation as well but moving on with the development build let's open the terminal back up and see what it said here it said run EAS build when you're ready to create your first build we're not quite ready yet there's a few steps we want to take before and here it says once the build is complete run EAS submit to upload your app to the App Store we're not ready to do that at all and as I mentioned we don't have accounts yet as a developer for Google Play or for the Apple store yet but you would want to create those in the future before you actually published before you could actually publish your app to either App Store but before we even run a build here for our development environment we want to set a couple of things and one is to go to our GE ignore file so let's close the terminal again and just by the chance that maybe you created a local build if you did it would create IOS and Android directories now if you have those IOS and Android directories the EAS service will not go ahead and build your application if identifies those but and the reason it doesn't want to build those is because then it would think it was overriding code that you may have altered or changed and it doesn't want to do that but what we can do is just put them inside of our GE ignore so SL iOS and also slash Android and it's going to ignore those now just in case they were in there and then if you did have these directories then EAS would go ahead and build your app in development once again so that's what we want and that's why I'm putting those there okay after that there's something else we need to do as well and that is to run a check on our build so I want to show show you this you might see something later on as we're looking at the development build that says Expo doctor and it will flag this so I want to point this out let's run npx Expo install d-h check now this is going to check our dependencies that are listed inside of our Json file our package Json file so all of the dependencies that we have here for our application it's going to check all of those for for us let's come back and run this npx Expo install D- check and I expect it to find one let's see what we've got oh more than one here so we've got several we've got react native async storage this is the one I was thinking of and I wanted to highlight this because really this one in particular is at 2.0 right now and it said expected version is 1.23.1 that would be a downgrade by quite a bit now notice these others the numbers are going up so for whatever reason when the 2.0 version of async storage was created this part didn't get updated as far as the compatibility with Expo but the rest of these the number is just a little bit higher and that's what we' expect now right now you can say fix dependencies and fix all so let's go ahead and do that with the capital Y it's going to install all of those but really I'm not so sure sure I want to downgrade the async storage we could test out our app and see if it works the same with the version 1.23.1 or we can go back and go ahead and install that 2.0 once again let's find that here it is so you can see now our package Json has been updated and we're at 1.23.1 but I want to go back and install the 2.0 and then during the development build we can see if it functions okay if it is it's okay to go ahead and use the newer version so while that check confirms that everything's compatible we could also just confirm it on our own to make sure the newer version works and maybe something else didn't get updated maybe the compatibility list for example so let's open this back up going to type npmi for install I'll paste in the name of the package the dependency then I can say at latest once again now I should get the newer version reinstalled here so if we run this and now if we look at our package Json oh it's at 2.1 at this point now so we've got just one increment newer version than what we had before so we can check that out make sure it works now if we come back I'm just going to Arrow up to get to those previous commands I'll run this npx Expo install check and it should flag that async storage again yes now it just flagged the new version of the async storage but instead of saying yes to fixed dependencies we could always just say no and just make sure everything works we know version 2.1 is not outdated in fact it's very much newer than 1.23.1 and now we're ready to create our build just to clear this up I'm going to type the word clear to clear out my terminal screen so we've got a new Fresh screen here I'm going to type EAS build then I want D- profile and this is where we say this is a development build and after that I want D- platform and this is where I'm going to specify Android but please follow the EAS docs in the Expo docs actually for the EAS build if you want to make an Android build with this as well I mean an iOS build all right I'll press enter and it will start in on this Android build however this could take a little bit it said oh they didn't detect that I had the Expo Dev client installed so do I want to install that it would probably ask you this as well and yes a capital Y we do want to install the Expo Dev client our development build will work with that so it will install that first and then it will start in on the build and now it's asking what I would like my Android application ID to be and I'm good with this it's just going to say Comm Dot and then have my username and and then crud app that is fine so I'll press enter now it's asking if I want to generate a new Android key store and I'm going to say yes please do and now it's gone through a couple of things and it's waiting for the build to complete now you could exit with contrl C but it would stop building at this point this could take a while maybe up to 10 minutes or so it just depends we're on a free tier so your build can be put in Q so you might have got a notification about that that didn't happen to me at this point but let's just come back when the build is complete but actually we can check the progress in our dashboard at expo. deev as well so I'm going to do that while we wait on the build here is my dashboard at expo. deev I've logged in and you can see the crud app right here so let's go ahead and click on that and you can see under build the little gear is turning and when I Mouse over it says building so we can see the progress right here as it builds I click on this we can get even more Det details here for the logs here's the part about run Expo doctor that I talked about that just identified that same async storage that didn't match up with the compatibility however we know we're using the newer package so right now it's on the pre-build now you see it jump down to something else and you could follow this along in the log if you want those details if not you can of course just go back to the dashboard and wait for it to uh finish here it doesn't really give you so much of an update but in vs code you can see it still says build in progress now when this completes I'll come back okay the build has completed you can see we have a new QR code here to scan but it also asks us a question at the end it says install and run the Android build on an emulator well we would need Android Studio for that so I'm going to say no but we also need to do something before we can go ahead and run this development build and that is to start the local server once again so I want to type NP Expo start and for this to work on my network I need to use that tunnel flag that we also highlighted earlier in the series like maybe in the very first lesson so you could try npx Expo start first and see if it finds it after you scan the QR code but if it doesn't for whatever reason then you need the tunnel flag so I'm going to go ahead and press enter for that we'll see that go ahead and start here but then we're going to need to go back actually scan that QR code and I'm going to show you some screens from my phone as well oh and I've actually got an error here that I had not seen before I'm going to try this once again with the tunnel flag to see if that works out and yes it did so now the development server is running so we'll scroll back up here and what we want is this barcode it might be the same barcode here I'm not for sure but we know for sure this barcode the first one we saw is our development build so I'm going to drag this so I can maybe see just a little bit more of the barcode I think that's good I'm going to scan that and then show you my phone screen and now here's my phone screen after scanning that first QR code and the first one is definitely the one you want they are not the same and underneath that if you can't scan it for whatever reason this is the URL that you would want to enter as well that you essentially go to by scanning that so one or the other but now looking at my phone screen you can see it says build artifact and I'm I'm going to click install there and now it is downloading the file you once again see the update here on my phone screen and now with the download complete I am going to open up that download and it starts to install the application now you may get a security notice in your phone and you may have to improve or approve this installation from a source that is previously unknown after it has installed it's going to ask if I want to open the application and I'm going to click open and now we see this screen with the development servers and it says it's searching for development servers if I scroll back to where we started our development server you can see it says it is using the development build now if for whatever reason it can't find those servers you can contrl C to exit and then restart the server that's what I'm going to do right now if it still can't find it for example then we can actually exit the application and reopen it because it will be able to be opened from the icon on your phone remember this installs a native installation not something through Expo go so you should be able to find the app with the icon on your phone and after it finds the development server your screen will look something like this where you can see it lists the name of the app and then it says on Dave's desktop which is the name of my computer so then I'm going to click on that name of the app and open up the application now it takes it just a moment to open up because it generates a bundle as you see here in the terminal it says Android bundled and now you can see the screen and it opens up a notice for the developer it says this is the developer menu and it gives you access to Tools in development builds so we are now running a development build on the mobile device you can close that menu and then you'll see the application this is our to-do list trud app and that we're now running a development build on our mobile device and now you can make changes to your code and you will still see them reflect on the mobile device like we did with Expo go but now you're running an actual native build not in a sandbox like Expo go and now that you know how to create a development build it will help you test on real devices without any limitations from Expo go and it's going to put you on the path to deploying your app in the app stores another good habit to get as a developer is to always go back and reference the docs so this is the Expo website and if I click on docs here I'd like to point out a couple of things you can follow here one is the guide section it has guides for many things as I scroll down you can see we have EAS that we learned about today with an introduction and an explanation of that e. Json file that we created when we configured our build here is EAS build that walks you through all of that but there's much more more to Expo application Services as well there's also the EAS submit that we briefly mentioned EAS update how you could update an app that's already deployed for example and some other things to learn about here so definitely check that out something else I recommend in the Expo docs is the learn section and there is a create your first app section here that they also have video guides for and it shows some things that I did not show in this react native series that I created it shows gestures they do work with the camera and it is a very easy series to give you one more beginner project to work through so I highly recommend this create your first app under the learn section of the Expo docs and of course these videos are going to lead you to the Expo YouTube channel so also check that out remember you can also find the react native docs link to in the resources for this course so not only Expo but also o react native docs check everything out here I'll be adding some more references but here's the react native official docs and here's a link to the Expo site as well so check out all of the resources that I give for the course linked to in GitHub and remember there's a branch for every lesson that we have covered here inside of this GitHub repo and how can I not mention making sure you go to my own YouTube channel and of course subscribe to the channel and follow along I'll be creating more react native projects in the future but I have lots and lots and lots of videos and different tutorial series to offer on my own YouTube channel and also a huge shout out and thank you to zero to Mastery for making this react native for beginner series possible when you're ready to level up what you've learned here and build a production grade app you can add to your resume ztm has an excellent react native course for you I've linked to the ztm react native course in the GitHub course resources and congratulations on completing this react native for beginners course a quick shout out to my patrons holy coder is a progress provider Sean Lynch and Gregory Perry are senior patrons and my junior patrons Isaac will Stacy Abe Javier Michael Heath and Malik thank you all so very much you're helping me reach my goals and if you'd like to learn more about my patreon go to patreon.com davay remember to keep striving for Progress over perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon