How to Build a Full Stack ToDo App With React Native & Firebase | Part 1/4

hello devs welcome back to another video today we're finally going to be building an app we're going to be building a to-do list app called fire app to do if this is your first time here welcome my name is akash and here at fire app dev i teach you how to build full stack react native and firebase apps from start to finish today is part one of this to do list app where we're going to be building part of the front end this i believe is going to become a four part series the first two parts are going to be building the front end using react native and expo and the second two parts are going to be incorporating that with firebase for authentication and storage so without further ado let's get this video started so let's take a quick look at what we're going to be building today right in front of us we have the fire to do app you can go ahead and add a new list to the app call it fire to do's and we'll set it orange hit save and you can go inside these lists and you have your actual to-do list this demo app is pre-populated with a couple items but let's add something else do homework and then we could also do record video and there you go you could scratch off these items or you could go ahead and delete all of them go back list one again it's a pre-populated list a very similar thing you can add or delete items and you can also go ahead and edit your list say we want to call this one work so we'll rename it work to do's and uh we'll go ahead and set the color to red and we'll save that okay so we're going to start off with a screen looking like this this should be the basic layout for your project if you don't know how to get to this project setup right here i recommend you check out my previous video on how to set up expo react native and node.js pretty much the complete dev environment setup so i'll probably put that in the cards or down in the description below but once you are at the screen you pretty much have started working on the app already so this is the main app.js this is pretty much the entry point for your app and then if we just go through some of the folders here we have package.json which holds all of our node dependencies so we have expo react react native all three of those are pretty self-explanatory and then we have react native web which lets us render the react native screen on the web which we're going to be using for the video today so let's get this started before we go ahead and start our react native app we have a couple more packages we need to install so with this screen right here you pretty much just have a basic react native app but what's an app without multiple screens and what's multiple screens if you can't navigate between them easily and here's exactly where react navigation comes in so go to your command prompt and navigate to the directory of your app if you're new to this it's just cd to change directory to go to whatever directory you want so i go to cd documents projects believe it's in fire app dev content and then fire to do app all right yeah so that's pretty much how you navigate to your directory and you want to type in this following command let me just go ahead and paste that in real quick so it's going to be npm install at react navigation slash native which is the core react navigation module and also react navigation stack which allows you to use the stack navigation and i'll give that a minute to run okay now that we have that installed we're not quite done yet type in this command as well expo install react native reanimated react native gesture handler react native screens react native safe area context and react native community math to you these are all just a few peer dependencies you need to use with react navigation so just go ahead and install all of those okay now we should have all of that installed let's just go check out our package.json real quick and there we have all of them react navigation the master view gesture handler screen safe area context all that so we should be good to go at this point we can go ahead and get the app started so i'm going to run npm run let me zoom into this a little bit so you can see this a lot better there you go npm run web which is pretty much running this command right here expo start web and this should start the app in your browser and once it's in your browser what you want to do is go ahead and right click and click inspect ideally you're on chrome and once you click inspect there should be a small mobile icon at the top and click on that so it looks like a little mobile screen otherwise if you don't want to run it on the web you could also run it on your device just go ahead and download that expo app and you should be able to run it on any device you want when whatever the expo screen pops up it should give out this qr code to scan that with your expo app and you should be able to run it but now you should have an app running that looks something like that it should just say hello world and we can go ahead and play around with the hello world text right here in your app.js let's just change it to hello fire app devs go ahead and save that and as you can see it updated to hello fire app devs it's pretty simple and if you are new to react native this is pretty much how react and react native are going to be laid out the syntax is very similar to html but it is not quite html it is called jsx and it's just sugar coding pretty much for javascript so this html looking text actually compiles to javascript in the background now throughout this video i'm not going to be going too in-depth into react and react native concepts i'm going to assume you know the basics this is mainly going to be focused on actually developing the app so let's get started by setting up the navigation to start off we're going to get rid of the status bar because we don't really need that save that then we're going to go ahead and import the navigation container from react navigation slash native and your entire app is going to be surrounded by this container to get navigation to work properly and then you're going to do import create create stack navigator from react navigation stack which is going to allow us to set up the actual stack navigator and type in con stack is equal to create stack navigator and this creates the stack navigator for us so now what we're going to do is we're going to use the navigation container which is a component remember for those of you are new to this everything in react and react native is a component components are just pieces of reusable code which make coding very easy and convenient because you can pretty much say you want to code a button you can code one button and reuse it in multiple places very efficiently which is what makes react native so amazing so now that we put all this inside the navigation container we want to actually render our first screen so we're going to put everything inside a stack dot navigator and inside the stack dot navigator we're going to do stack dot screen name equals we can name our screen whatever we want i'm gonna name it fire to do and then component equals we're gonna have to create a component so we're gonna take this and then toss it in its own component now the components i'm gonna be using for this video is are called functional components so we'll call this cons fire to do app equals this is just javascript notation for a lambda function which is going to return this right here and we're going to pass that into this component right here so usually you see that we put components inside components like html but for the stack dot screen we actually pass the fire to-do app component in as a prop props are how you pass information from a parent component which the parent component for all this is the app component the top level component and for the app component to pass information into any of its children component you're gonna have to pass it in as a prop so let's go ahead and save that all right hold up we're getting a quick error right here oh there you go just had to refresh and there it is uh if you closely look at the screen you can see at the top we have this little navigation or title bar now which says fire to do which is the same name as this if we go ahead and change it to just fire app and save it you notice it updates in the top right there so there we go we have our first screen already um ideally we do not want to load this app.js with all of these components we're going to want to put each screen in its own separate javascript page just to keep everything organized you can have it all in one single page but then you're going to end up with this gigantic page of code that's going to look really ugly and be really hard to navigate so let's go ahead and make a folder called screens and in the screens folder imma make fire to do or you know what let's just call it home home home.js and i'm just going to copy this right up here paste it you need to import react so all the react works and then the specific components from react native and then you're going to want to make sure you're actually exporting this component so other pages can import it export and then we're gonna go ahead and copy this right here and there we go this means we're exporting this function right here this is the default export for the page and uh it will format that to look nice and clean i know why my prettier extension is not working let me let me click on that maybe i change the settings to keep it pretty unsafe but we're going to go back here and now instead of having firewrap to do app right there we're going to do import home from screens we'll do dot slash screen slash home and then instead of fire to do app right here we're going to pass in home hit save whoa we got an error styles is not defined oh yeah we forgot to copy the styles over so let's copy those styles over there and then there you go everything's working nice and clean and right here we can keep typing whatever we want to do you can see everything still updates properly and we'll clean up this page right here by getting rid of these useless imports from react native and just like that we have our first screen so this screen is pretty much going to be our home screen for the app what we're going to add here is a bunch of boxes that represent different folders for to-do lists so for the app we're going to have multiple to-do lists which you can add or create entirely new to-do lists and then once you click inside those boxes it's going to take you to a separate screen where you can actually add items to the individual to-do list before we get started with the list button there's going to be a couple things i'm just going to copy in so first we're going to make a folder called constants whoops constance and in this folder we're gonna copy paste this file called colors.js and i'll show you the file and leave it up on the screen a little bit so you can add this but what this has it just exports a bunch of colors i want to use throughout the app for any reactor react native app it's useful to have a file like this because say you want to change the color for red after using it in a million different places instead of going to every single spot and updating the color you can just update it in this one file and it'll instantly update in every spot in the app so organizationally speaking it is very convenient and next another thing we're gonna do is copy over a bunch of styles because the focus on this is about actually building the app and not styling it but i will go through the styles from time to time and tell you what's what so we're going to get rid of the styles we have right here and paste these in and we'll start from this spot right here so we just have a view a view is you can pretty much think of it like a div in html and a view com everything in react pretty much goes in some type of view component this view gets this container style called flex one and flexbox one which makes it expand throughout the and fill out the entire screen and we're just setting the background color to white and then let's also go ahead and import colors from uh dot dot slash slash colors okay and another thing we're going to be importing is called a touchable opacity now this is how we're going to be creating all our buttons in react native using this touchable opacity component so let's get started we'll just make our first button our list button which is eventually going to take us to the list screen so it's called touchable opacity and it takes in the prop on press and this pretty much runs a function every time you press this touchable opacity for now we'll just put in an empty function we're not going to have this do anything quite yet and then we'll give it a style and we'll do styles dot item container he has a touch of opacity this is our item container style right here it says the flex direction to row in react native your flex direction is vertical by default i believe they call column and everything renders from top to bottom when we set the flex direction to row all your child components we're going to put inside touchable opacity it's going to start rendering from left to right and then we have justify content space between which means for all the children item it's going to distribute the space evenly between it so they're going to be pushed to the edges i'll show you in a second when i add some child items align item center make sure everything is nice and centered then we just give it a height make it flex throughout the width i'll give it a border radius of 20 give it a margin and some padding just to make everything look nice and pretty inside the touchable opacity let's do another view inside this view we're going to put in some text i will put style sequel to styles.item title that's going to hold the title of our eventual to-do list and inside we'll just say list one for now and then let me go ahead and save this we refresh the chrome page okay and we got nothing because we don't have a background color yet on the style so let's let's give it a background color for now of colors dot blue or not black blue okay and there we go we have a we have somewhat of a list box uh obviously we're going to style it up and make sure it's a lot shorter later but let's keep carrying on with it for now now we're going to have another view and we're gonna give it a style of just flex direction row and the reason i'm putting this text into the view and now i'm going to add some icons and the reason i'm putting these into separate views is because the children of the touchable opacity are styled directly if i didn't put them in their own separate views they would all be rendered in a row with space between but we want the buttons these icons i'm going to add in to stick together and the text to be by itself so we're going to separate it into two views and that way the touchable opacity only has two children one it's going to render on the left and the other it's going to render on the right so let's go ahead and see how that looks i'm going to add a button right here and we're going to do on press again we won't have this button having any functionality for now and then we'll give this button a little icon so let's go ahead and import ionicons should already be here with expose ion icons from expo slash vector icons and then inside this touchable opacity which again is a button will render an icon and this icon is going to be an options button so we'll call in options outline the give it a size of 24 and we'll set the color just equal to white for now white is the only color i don't actually import from the colors because white i always keep the same everywhere you can still go ahead put in colors and import it from there if you would like to and this is going to be an options button and then we can just copy over here and we'll add a delete button in case you want to delete the list so we'll just change the name of the icon to a trash outline and we'll go ahead and save it give it a second ionicons is not uh keep let me make that a lowercase i and there it is you can see those tiny buttons right there and now all we have to do is add functionality to the options button and the delete button but what we're going to add the functionality later we're just strictly doing the ui for now and if you notice we have one button now but we're gonna want to have multiple buttons so how do we do that how do we efficiently render multiple buttons on the screen well first thing we have to do is we can move this entire button out into its own mini component so let me do that up here for now we'll call it list button equals and we'll just copy paste this over there and that's another functional functional component we have right up here which we can just output right here list button just like that and when i refresh and everything is still there let me just format this real quick all right there you go looking nice and clean and if i go ahead and toss another list button right here you can see you have two list buttons and if i toss another one we got three list buttons and so on so that's pretty much how components work like i said before you take this entire piece of code package it up into one component and now we can just copy paste this tiny line instead of having to type all of this over and over again which is what makes react so powerful now what if we don't want them all to be called list one maybe i want list one list two list three or maybe it's gonna be work school errands or something like that well to do that we're going to have to change the title right here and it's going to have to be different for each component how do we make that happen this is where props come in we're going to want to do something like title equals we'll call this one list one also with props if you notice with style or with on press everything is surrounded by curly brackets if you want to execute any javascript code inside it however if you're just passing a string in you don't have to surround it with curly brackets you can still surround it with curly brackets but it's just a little short form that you don't have to so how now we pass in title equal list one let's pass in list or you know what let's call it school work fun so you gotta plan out your fun to do's as well okay let's go ahead and save it and you see it's still showing list one list one and list one that's because we're passing this prop in and we're not actually doing anything with it in here so we can take the props in using this props variable that's passed into every functional component and we're going to use as some fancy you know first of all let me show you how this works so again curly brackets anytime you want to run javascript inside jsx we do props dot title lowercase t and then there you go we refresh it and we got school work and fun and we're going to do something called object destructuring in javascript where instead of taking in props directly we're going to put these curly braces and just directly taken title and then here we can instead of doing props.title we can just directly pass in title and we're going to get the same effect and it's called object destructuring not going to go too in depth into how that works you can feel free to look it up but yeah instead of taking in props directly you can just destructure the props object into its various properties and we have a title right here and we're going to leave it at that now for now but in the future we're going to want to add more list buttons or remove these list buttons and well we want that to change dynamically right now every time i copy paste it it's a very static way of adding a new button so to make it so it's easy to render a bunch of new buttons to add more in or to remove some we're going to use something called a list view the lucy is going to allow us to render a bunch of components based on some data and it's going to make it all scrollable so you can scroll through everything so let's get started with that first we're going to go ahead and import the flat list and this is how we're going to render a list and we're going to get rid of all the list buttons over here and just have a flat list and then the flat list is going to take a prop called data which is what we're going to use to render all the the list and the data for this is an actual array and right here we can pass in whatever data we want for each list so we'll say each list is each list button is formatted as a an object where you get the title colon called school and then we'll maybe pass in a color too add some color to it make each list button look different the color and for now we'll just have it be colors.red for this one and let me go ahead copy that call work and we'll add colors.green for work and next we're also going to pass on something called render item to flat list where we're going to be taking each item from the list taking the data from it and using that data to render a component then right here we'll just pass in nothing for now and then we'll close out the flat list and inside this render item we're going to have a function and this function is going to be passed in something called it's just going to be we can call it whatever we want we can call it data but i'm going to destructure this data item actually into item and the item itself is going to be destructured into what we're getting up here so we're going to get a title and a color comma we're also going to get an index and index is going to be based on the index this has in the list so school the school item would have an index of zero and the work item would have an index of one and then inside we're actually going to return here a list button so for each item up here we're gonna it's gonna generate a new list button so we'll do a list button and then we'll do title equals title and we'll also pass in color equals color and now we should have a little flat list and we're not doing or let me go ahead save that have it re-render and look at that we have two buttons now we have the school and the work if i go ahead and expand this list and say we add our fun list and this this one can be blue and uh go ahead and save it let me format this a bit actually so everything's nice and readable okay and we have a fun button too but you notice we're not doing anything with the color because we're not using the color prop anywhere in this component so let's go ahead and get the color from the props again this is destructuring the props object now we have the color and let's get rid of the background color we put in right here and instead we can add it to the styles here so every prop pretty much or every component has a style prop you can pass into it and with the style prop you can add as many styles as you want if you just want to add one uh style you just pass in one styles object as we have done here but if you want to add more you can make it a list and pass in more and remember you got to pass in the styles as an object you can't just go ahead and type it directly so we'll do background color and then we'll set it to color go ahead and save it there you go we got red green and blue a multi-colored to-do list and we have the basic structure of the homepage set up already we got our fire app with a bunch of to do items but again nothing happens when we actually go ahead and click on any of these click delete or options or on the button itself and nothing happens because we haven't added any functionality to the buttons right here so the first thing we're going to do is make sure that when we click on school or work it takes us to the actual to-do list itself so to do that first and foremost we're gonna have to go ahead and create a to-do list screen so let's do that in screens create a new file called to-do list dot js so that's going to be our to-do list screen and again we're gonna import our basic items right here not gonna type that out again so grayed out because we're not using any of it quite yet we'll just do export default we're not going to do anything fancy with this quite yet we'll just return a view and save that and actually let me go ahead and import some styles in for the to-do list screen as well that we're going to be using in the future and we'll pass in style to this view component called styles dot container whoops forgot that little equal sign over here screaming at me and then we have this to-do list screen what we're gonna do is go ahead and import that to-do list screen in our app.js so we're gonna import to-do list from screens slash to-do list and we're gonna create another screen in the same way i'm going to do copy this right here and we'll call this we'll just leave the name to-do list and the component instead of being home is now going to be to-do list so it renders the to-do list screen and again went ahead and saved it we're not going to see anything because we haven't actually navigated to the to-do list screen yet so how do we go ahead and navigate to the to-do list screen well because we're using the stack navigator and the stack screen every screen is going to get a prop automatically injected into it you can't see it right here but it's happening in the background where we're gonna get the navigation prop so again you can either get in props and then do something like props.navigation to get it but instead of doing that i'm going to use javascript's object destructuring again and just get navigation like that and what the basic functionality we want is when we click on school button or work button we want to go to their respective to-do list so we're gonna have to have the list button itself navigate so let's do that by passing the navigation prop itself to the list button because again any information we want to pass from a parent component to a child component we do it through props so we're going to do navigation equals navigation save that and now we should be able to access navigation right here and now it's so that we navigate when we press the actual button we want to modify this on press right here this on press or this on press responds to the little icons but this is the on press for the overall button and right here we could do navigation dot believes navigation.navigate and then we pass in the name we set right here so to do list let me go ahead and save that now let's check out what happens when we click on school well we're on the to-do list page right here which is sweet uh we could click on the work one we navigate to the screen and you notice it automatically adds a back button which is one of the more convenient things using the stack navigator and we can go back so now we officially have an app that has more than one screen but we notice the title for everything says to-do list what if we wanted to say school or fun or something like that we wanted to render the title on top so to do that we're just gonna pass we can pass in parameters to the navigation route so we can just do comma and pass in an object with everything you want to pass in i'm going to pass in the title and the color and hit save and then let me clean this up right here i really got to get the prettier via scout extension working because the auto formatting helps so much so we're passing in the title and the color but we are actually gonna have to use the title in color because i go ahead and click on school you notice nothing's happening it's still not working so we're going to go back to app.js and we're going to pass in another prop to the to-do list component screen right here so what i'm going to pass in is this prop called options and options gets an object passed in with a bunch of parameters and we're going to destructure that to root because we only really care about the root uh let me put this whole thing in curly braces and do that and inside we're gonna return an object and inside this object we're going to set title equal to root dot params root.params is where we're going to get this stuff this title and color past and that's how we're going to access that so we're going to do root.params.title i'm going to go ahead and save that re-render and if we hit school voila it's a school up there and if we hit work it says work up there we have that perfectly and let's also have it use the color so maybe we want to make the header have the color of the list button so the way we do that is we pass in another option called header style where we can just pass in styles like you're doing before oops forgot the little comma right here and then i'm going to do background color is going to be root dot params dot color go ahead save that and re-render and there we have it school is red work is green and fun is blue and i don't know black on red doesn't really look good nor does it look good on green so i'm going to go ahead and change that text to white so we can do that by doing header tint color set to white now you might be wondering where i got this header tin color header style title where is all of that defined all of this is pretty much defined in the react navigation library and if you want to check out more about that go ahead and pull up the react navigation official website i'll put the link down in the description below and you can just look up how to style headers with react navigation and their fantastic documentation it's going to show you these and a whole slew of other options you can customize with each page so you can definitely go ahead and play around with that and again throughout this entire video i encourage you to pause it change some props see how it affects the actual app change colors change the way components are structured and really play around with it so you get a feel for how react native works and how you can modify things with it you're always going to learn better that way rather than just following along the video but also feel free to follow along the videos that's how you enjoy to learn but let's take a look at school and you look at that the header is now white with the red background and same with work and same with fun so we added our first set of functionality to everything and it's working pretty smoothly next what we're going to add is the ability to add a new list or we're going to delete the list we're going to actually add functionality to this little delete button right here so how do we make it so that the flat list can actually be modified well we do that by modifying the data right here and to make the data itself modifiable first let's go ahead and move this outside i'm going to do cons list data tools that right here makes it simpler and we can add a bunch of functions to modify this list data actually let me just call it list plural because this list this confusing naming but this array is has a bunch of to-do lists because each is a list button but so we're just going to call it list for now and then let's make a add items function cons add item to list equals uh we'll take an item in that's going to be the item we're going to want to add in and we'll do lists.push item so whenever you call add items to lists it should take the item you pass in and add it to this list right here and let's add a quick button so we can add items maybe we'll add that button in the header so let's create a new component we'll call this component render add list icon equals this function right here in which we're going to return we can have a touchable opacity because remember every button you're going to want to add a touch of opacity on press equals on press we want to add an item to the list so we're going to do add item to list when we need this passed into this so we will take that in as a prop and add item to list takes in an actual item so let's just pass on a default item for now we're going to do title is equal to title and color is going to be let's see it's a color we haven't used color start let's use olive and there we have our touchable opacity and inside this we're gonna add a text instead of using a legit icon i'm just going to use a little plus sign and then i'm going to pass on a style here styles dot icon which just gives it padding and sets the font size to the icon of 24. i'm gonna go ahead and hit save nothing pops up yet because we're not actually using the render list icon and oh we have an error because list data isn't defined here let's just change that from list data to list forgot to rename it and there we have it now how do we actually get the render add list icon onto the header up here for that we're going to have to import something called use layout effect whoops we don't want all that extra stuff sometimes these snippets are annoying so i'm just going to type it in use layout effect now use layout effect as something called a react hook now these hooks help us manage a bunch of life cycles of the component or the state of the component we're going to get into all that in a bit but it pretty much allows us to manage the state of the component any changing parts of the component pretty easily so we're going to use use layout effect because right now with the way we have the components set up we have all this right here we have props coming in over here but nothing's really dynamic we nothing's really changing we just have a static item rendered use layout effect is going to allow us to do some items we need to some functions we need to do before the components actually fully laid out or right as it's laid out so we're going to use layout effect and we're going to do navigation dot set options so you notice how we passed in some options right here we could also modify these options by doing navigation.set options and then we're gonna pass into this a header right option which tells it what to render on the right side of the header and then we're gonna do oh hold up let me capitalize let me call it instead of render add list icon remember you always have to have your components start with a capital letter that's a key thing to note for and we're just going to do add list icon and we're going to pass an add item to list as a prop you know what we can rename it up here to make it a little prettier up here uh they don't always and then we'll just do add item over here and then here we'll just pass in add item to list and then we'll do that go ahead and hit save oh okay okay we need to pass it in like such okay so it looks like header right doesn't take any component it just takes in a direct function you need to render so let's go back and change it to render add list icon and we'll just treat it as a function now remember this isn't a functional component but it's just a function which we're passing in a parameter to so this will just do render add list icon and we'll pass in the the at item as a parameter so add item to list say parameter and that should get it to work why is this giving me errors use layout effect object is not a function okay let me see if i'm importing this properly use layout effect support it properly we have a function navigation dot set options hmm oh that's why my bad so use layout effect is actually it's a react item and i was importing it from the wrong spot so that should go ahead and fix everything let me go ahead and hit save okay there it is so we have a little plus button right here let's go ahead and hit that plus button whoa nothing's happening even though we're calling the add item right here nothing is happening why is that because when a variable updates in a component it doesn't actually trigger the component itself to re-render so you don't see any change at all to actually trigger the item to re-render you're going to want to do something called storing everything in a state and then updating the actual state because anything that's changing that you want to cause the component to re-render you're going to want to store in the state rather than directly storing it in a variable because updating any variable again is not going to cause your component to re-render so we're going to get another hook called use state and we're going to do const and then use state is going to use something called list destructuring it returns a list and you can destructure it to we'll call it list and then set lists equals use state and then we can pass in the initial state to use states so i'm going to pass in this list right here we'll get rid of this list right here and then we'll save it now list itself is stored as part of the state and then if we get click plus still not changing because just setting it as a state isn't enough because adding doing lists.push isn't going to change anything you're going to actually have to set the state by using set list and then passing in lists and when we go ahead and save this you're gonna notice it still doesn't actually update because the state notices that you're not actually updating the lists variable itself you're just mutating the actual list so the actual array itself is still the same but you're just adding an item to the array so the state doesn't register it as the list variable actually changing so to fix this you're going to want to pass in a new array and then pass in all the items of lists into that new array and you're going to use that using something called a spread operator and pass it in like this let's hit save now if we hit plus you see title pops up with that olive color i don't like that olive color it's not different enough from the other colors let's set it to orange there you go that looks much cooler and now we're able to add a bunch of different lists which is pretty cool but how do i get rid of these it's still taking up space and it's annoying so let's make a function right here called remove item from list equals and here we're gonna take in an index so we're gonna remove a certain item from the list based on its index and we're gonna do list dot splice index comma one which tells it to split get rid of one exactly one item starting from the index and then we're gonna do the same thing we gotta remember to set lists equals dot oh whoops dot dot list save that and we have to find a way to get the delete button to actually trigger the remove items from liz so let's go ahead and pass in this function to the list button so right here we're going to pass in a prop called on delete and the on delete is going to call it's going to map to the remove item from lists and then we're going to pass in the index from right here because remember the flat list passes in not only the right item but also the index of the item in the list so this is a great way for us to keep track of the index and we're going to pass that in and i'm gonna go ahead and hit save and go ahead hit the delete button right here and nothing happens because we're not actually using the on delete and the list button so let's go ahead and use that on we'll pull on delete in right here and for the icon with the trash outline we're going to pass in on delete and as a matter of fact instead of passing in this navigation component to the list button which is unnecessary we can just pass in something like on press at a higher level over here and we can just move this navigation code get rid of that right here let's get rid of all this extra stuff and then instead of navigation we can get an on press right here and we'll replace the on press for this with on press and hit save now if we hit delete it gets rid of it if we hit add we can add more delete stuff and if we click on it it still takes us to the respective list page sweet we can now add and delete these list buttons so our app is really coming along now we're going to take a break from working on the actual list buttons and start working on the to-do list page now later we're going to come back and modify this list button page so when we add a list button we can actually set the title and color as we add it and we can also change the title and color when we hit the options but we'll do that at the end for now we're just going to work on the to-do list itself but all of that is going to be for next week's video because this video has already gone on for long enough a lot longer than i expected it to go stay tuned for next week's video where i'm going to be finishing up the front end of the to-do list app and if you enjoyed this video and helped you in any way at all do your boy a favor and hit that subscribe button down below and give me one of these bad boys boom boom bomb and hit that notification bell so you can get next week's video and finish this app see ya

Channel: Fire App Dev

Views: 3,253

Rating: 4.961165 out of 5

Keywords: Computer Science, Software Engineer, Programming, Coding, projects, ToDo, React NAtive, To Do list, React, Expo, Firebase, Expo Cli, Full-stack, Mobile app, React native, How to

Id: QQ7w75NpWec

Length: 58min 50sec (3530 seconds)

Published: Fri Feb 12 2021