# Building a Todo App with React Native | Beginner Tutorial ## Метаданные - **Канал:** Feel Free To Code - **YouTube:** https://www.youtube.com/watch?v=sgq7-njfLKQ ## Содержание ### [0:00](https://www.youtube.com/watch?v=sgq7-njfLKQ) Segment 1 (00:00 - 05:00) So currently I'm learning React Native and today I'm going to create to-do application um with React Native. Okay. So let's just start the implementation. If you want to see what I built uh go to at the end of the video and just see what uh what I built. Okay. Then you can continue watching this video. Uh so let's start. I already uh created a project uh using uh this command npx create uh npx at the rate react native community uh CLI at the uh latest in it to do. Okay. So this is how I created react native application and this is the initial uh template. Okay. So let's open code here. This is code editor and this is basic template. when I start any React Native application and this is my first screen which is uh here inside app. tsx. Okay. So let's remove everything. I don't want these things. I will code everything from a scratch. Okay. Now let's add something a text from React Native. Text imported And simply let's remove this. I do not need this. Remove everything. Remove this. everything. Like this. Okay. Now add a text. This is my first todo application. Okay. So I need to add safe area view. Okay, what it does? Let's see. Uh I'll go and search for safe area view. Let's see the purpose of safe area view to render component render content within the safe area boundaries of a device. It is currently only applicable in iOS devices and iOS version 11 or later. Safe area view renders nested content automatically applies and status. So when I use safe area view it will add uh some padding so that it will be inside the um this view status bar or so suppose I remove this thing from here what happens you can see in this screen like this. So I need to add safe view. Safe area view. Perfect. Okay. Now we have styles to maybe component create I will uh write everything in this single component app component and later maybe in the next video I will uh split these uh components and we'll create smaller small components. Okay to make it maintainable. Okay. So let's start. I need to create a state to manage state. Uh to-dos. So first thing let's create UI first. Key suppose I have 10 todos with some text and I need to add two buttons to remove that to-do and mark as completed. That will actually remove or remove will actually remove. So we can add simply one button to remove which will be a green icon take icon. We will click uh click on that icon. It will remove everything. Okay, let's plan the design first. So let's go to draw. io or maybe canva anywhere. So let me plan. Okay. So what I'm going to do is screen it will be look it will be like this. Okay. This is my first screen. We will have to-dos like this. Suppose this is my first to-do, second to-do, third to-do, fourth to-do, and five to-do. Okay. Now we will have an icon which is cross icon or maybe take icon to mark as complete. So this will be here. This will be here like this. This and another one like this. Now we need a form to create to-do. So let's create a form at the top. I can simply uh lock this and select all. I will move it to here. Then I will have a form like this. I will have two ### [5:00](https://www.youtube.com/watch?v=sgq7-njfLKQ&t=300s) Segment 2 (05:00 - 10:00) input fields not two it will be one. So one input field input text and we will have one button. Add to-do. This is my button. Cool. So when I type something, I will click on add to-do. It will add to the state and it will update the UI. So this is my basic simple application. This is what I'm going to create. Now how will I design? So we'll implement here using flex boxes. So what I will do? I will create a flex box for this box. Then we will have two icons. Uh in column view we will have one f uh one scroll view to scroll these icon uh items and then we will have one more flex box where we will have the uh row flex box uh flex direction will be row which will have two uh two components two items first will be the description the content which you just added and the second icon will be to remove that so this is how it will work okay let's create so first I will create the main component which is main safe area view and then we'll add view. Okay. Now here we will have input fields. So just uh we have view for input for this area. Then we have two items text area and add to-do. So let's add one text um I call it input text input like this. And then we will have one button. So to add button I'll create button. button will have label not label it will be title which add to-do. So this is add to-do button text area. Uh where is the text area? Yeah this is what we have. Okay this is text area. We will add a style later. This is one view. Let's add second view to add this content scrollable this for this scrollable content. So we will have a scroll view and then we will have multiple items. So one view will represent one item. This item, this item will have two item text and icon. That icon will be close icon. Okay. For example, this is my first to-do. Okay. So, In the same way, we will have multiple to-dos like this like this. And this is input field. when I will add on add to-do it will add new item. Cool. So I need one icon to uh mark as complete. So let's go to SVG. Let's create SVG. And I need tick or basically check icon this one. Let's copy this. Uh React Native. I want a color as green. So I need to change something here to change the color. What I can change here? Let's copy first then we'll change it later. I copied. I can create a folder here components. And then inside this I can create atoms not like this. Atoms inside atoms I will have icons and then I will create one icon like check dot icon dot tsx. Okay. And then simply paste it here. Uh I need react native component SVG. So let's go to the terminal install it. npmi oops npmi react native svg done. So when I add any component I simply go to the iOS folder create pod install pods. Perfect. If anything breaks then I will restart my project. If not then it's fine. Okay let's go and let's mark it as any. We have enabled background and yeah let's ignore everything for now. Let's name it check icon and check icon. Let's use ### [10:00](https://www.youtube.com/watch?v=sgq7-njfLKQ&t=600s) Segment 3 (10:00 - 15:00) this component here after view check icon like this. Okay, it doesn't work. We'll go to terminal and then simply reload the application. Okay, I reloaded. Uh there is no check icon. Why? Um it has no size actually. So let's apply height and width. So if I do not pass any height and width, I should have for 24 height and then width will be 24. Let's see what happens. Okay, there is no height and width. Uh there is no color not color it will be spell as green. Let's apply a color to path also. Path fill will be green. No icon. I have simply returned it. Uh what is this? What is this style? Let's remove this. Uh it is not working. Fill with green. This is path. And I have added a text component. Let's restart the application again. Okay, we have something unsupported or what is this? Okay, let me restart applications. So whenever you install any component third party components, I think we need to restart the application first. So I will simply go back and close terminal terminate it and PM run iOS and let's wait. Okay. And let's remove everything and design this text box and button. Okay. So here we have a style. Let's pass dot sorry not dot input container. Then I will have input. I will button and uh items. Then I will have items and then another one is item and then item text. Another one will be check or mark complete icon. Okay. And then one more for container. Okay. Let's apply this to view. This will be my main container. Styles dot container. This is for input container. So apply style and then styles dot input container. Same for input and button. This will be my input. This will be my button. Okay, this is a scroll view which is uh items basically items or you can say to-dos. Uh what is the error? Style is equals to assignable. Uh style dot button is not assignable. What is this? Style doesn't exist on the type of read only button. Title and string empty is not assignable. Okay, let's write something. Background color will be um tomato. What is the error? Button is imported from React Native. Okay, style. Okay, there's no Okay, there is no style actually. So inside style I need to add text or let's add view here. Uh I will use another component touchable ### [15:00](https://www.youtube.com/watch?v=sgq7-njfLKQ&t=900s) Segment 4 (15:00 - 20:00) opacity. Touchable opacity instead of button. And then simply I will add text here. Text will be add to-do. Okay. And then let's style here. And style will be style dot button. Okay. Now icon is working. Perfect. Input is not there. So okay let's start applying styles before that apply style to this styles dot item and then this will be style dot text item text and this is style is equals to style dot icon not icon mark completed icon perfect okay Now we'll go to the container. Okay. Now we have input. For input height uh let's add height uh 48 maybe. Okay. Let's add border. Border color has ccc border color. Okay. Border width will be one. Okay. Now add padding to the container. Padding 16. Okay. Now add border width. Border sorry border radius will be 16. Okay. Let's make it eight. Perfect. Now we have input container display will be flex and then uh flex direction will be column which is by default even though I don't apply it will be column and then let's apply gap to 16 nice and then main container will have again display flex not like this display flex and then simply gap will be 16. Okay. Now we have items. Items again will be display flex gap will be 16. And then apply border width to 1. Border color to hash cc. And then border radius will be 8. Okay. And then add padding. Padding will be 16. Perfect. Now let's add for item. So again item will be again um display flex but this time flex direction will be row and then justify content to center and then align items will be again center. Uh let's remove this. Justify content should be space between. Awesome. Now font size. So for the item text add font size for uh font size is 16 again. And then for button. So this is my button. Button is tomato. Add um display flex uh justify content center and then align items. Align items center. Okay. Now add padding 16. Awesome. Border radius will be 16. Perfect. And then we have button. Inside button we have text this text. So let's add a style for the text so that we can change font size and font color. So styles dot button text. We do not have any style for button text. Let's add it button text. So font size will be 16. And then color will be hash fff white color. Okay. Let's add font weight. Let's add 600. Let me make it 700. And then it should be 20. Perfect. Okay. I can click on it. Perfect. And if it is like this, we also can add some other components. We have another like touch touchable opacity, touchable native feedback. Uh you can check it in detail maybe later. Okay. Okay, let's add uh touchable opacity for now. Perfect. Okay, now I can click on it and we have ### [20:00](https://www.youtube.com/watch?v=sgq7-njfLKQ&t=1200s) Segment 5 (20:00 - 25:00) input field. Whenever I type something in input, we do not have any padding in input field. So, let's go to the input container and add padding. Uh maybe padding horizontal which is uh 16. Okay, perfect. Now I have input, I have button and I have this is my first todo. This is my icon. Okay, perfect. Now we are ready to go with the state management. Now, uh let's manage the state here. So, for example, if I have a state for todos, uh const todos and set to-dos will be use state empty array and then simply I can maybe add uh maybe record video. This is my initial to-dos. These are my initial to-dos and then have dinner. Okay, I have two to-dos. I need to iterate over two to-dos and then it will render two items. So I will simply go here and then simply todos dot map and then first to-do simply add this view return it. I need to pass a key here. Key will be todo or maybe index. You can also add id for the to-do. Uh let's set index. ID will be sorry key will be index and the text will be actual to-do. And this is the complete icon. Perfect. Uh gap we do not have any gap for the items. Uh gap is 16 actually. Let's set 20. Oh, it is not working. Why? items. Uh item is there. I do not have any items. Okay, we have items. Uh scroll view. Uh let's add one view here. View. And inside view, I will apply this style. Let's move all the to-dos here. Perfect. Okay. And one more thing I can do for item for every item I can add a border width water color and here but the border bottom width will be one. So we do not have any border for top left and right. Okay. And also add padding uh vertical will be 16. Perfect. Okay. Uh we have gap here. We also have gap 20. I can also remove this. So it will look like this. Okay, perfect. Cool. Ch. So now I will add to-do. How to add to-dos? So I need to capture this click here. So for this opacity, touchable opacity. I will add on press uh on press I will add a function um a function handle add to-do click like this and then after handling click I will how will I get this value so I can add on change event here on change text it will return a text here so what is the to-do you just typed that I need here. How will I get that? I simply add uh input text and then set input text. So whenever I type something, I will store that value in the input text. So currently it will be empty initial value and then on type I will simply pass set input text. So whatever I will type it will update to the uh this state and then whenever I click on the button on press I will pass handle add handle at to-do and then simply whatever input you just typed if uh if input text dot trim is there. Okay, it means I have to-do and then I can pass values equals to input text dot again I can pass str whatever value I have I will set to-dos copy all the previous todos and then pass another to-do I can add this to-do at the top like this initial todos and I'm I am repeating this thing I can move it to here const value is equals to this and then inside if I can simply add value if value is there and then pass this value add that to after adding that to I will simply pass set input text to empty awesome okay let's try it adding another ### [25:00](https://www.youtube.com/watch?v=sgq7-njfLKQ&t=1500s) Segment 6 (25:00 - 28:00) to-do add to-do perfect okay now let's work on this remove icon how will it work let's copy this function and then paste it here. handle remove to-do this will get an index that what you want to remove and then whenever I click on this check icon uh on press oh there's no press on it should be but uh it is not giving me suggestion because I used any here so it will be there so let's use on press and then handle remove to-do okay So whenever I uh whenever I will click on this remove I will simply get that index here. How? So I will pass arrow function here and then call this function with the current index. That index is coming from here. Okay. And then simply handle add to-do handle remove. I will pass get the index. I need to remove that particular index. How? So let's see I will say updated to-dos is equals to current to-dos dot filter out all to-dos filter out all the to-dos where index is not equals to current index. If it is this will be like current index and then index. If it is not current index and get all the to-dos and if you have that all the to-dos then simply pass it to updated to-dos and that's it. Cool. Let's see if I remove this record video. Awesome. When there's no to-do we need to remove these uh this is scroll view and then simply like u to-dos do. length length and so this if I use like this it will show one or two here okay it is like zero then it is not showing anything if I add one to-do uh a string must be render inside text okay I'm rendering this length actually so I need to convert it to the boolean using this awesome adding to-do oh it is not working why okay perfect why when I click Okay, this is not getting removed here. When I click it should be cleared. Uh why it is not working? I'm setting input as empty and this input text. Okay, I haven't applied the value actually. So I need to sync this value with the state. So it will be like input text here. Perfect. So I will add hello add. Perfect. Now let's remove. Remove. Awesome. Let's try again. Add. Try again. Add. Perfect. Let's remove. Okay. So, this is how I build my basic to-do application. If you like the video, hit that like button. Share with your friends. If you want more tutorials or maybe detailed tutorials about the uh React or about React Native, because basically React Native I'm learning currently. So, I'm good at React. So if you want to if you have any question about the react let me know in the comment section uh connect with me on the Instagram so that you can ask any question directly to me. That's it for this video. Uh hit that like button and share with this video with your friends. Thanks for watching. --- *Источник: https://ekstraktznaniy.ru/video/31390*