1 00:00:00,900 --> 00:00:04,830 Now that we've got all of our blog contact stuff put together let's start to focus on the rest of our 2 00:00:04,830 --> 00:00:05,970 application. 3 00:00:05,970 --> 00:00:09,420 We're going to eventually put together these show create and edit screens. 4 00:00:09,420 --> 00:00:11,950 But for right now let's just wrap up the index screen. 5 00:00:12,000 --> 00:00:16,590 We need to make sure that whenever we show a blog post we should have a little delete icon next to it 6 00:00:16,620 --> 00:00:17,730 as well. 7 00:00:17,730 --> 00:00:22,390 So to get this in here we're gonna have to modify our index screen component and show the icon. 8 00:00:22,410 --> 00:00:27,090 We'll also have to add in some additional code to our blog post context and make sure that there is 9 00:00:27,090 --> 00:00:32,970 kind of a maybe delete blog post function that will delete some particular post when we start to think 10 00:00:32,970 --> 00:00:34,480 about deleting posts as well. 11 00:00:34,500 --> 00:00:38,080 We need some way to refer to which post actually gets deleted. 12 00:00:38,190 --> 00:00:43,350 And so chances are we will eventually add in an I.D. property to each blog post that we create. 13 00:00:43,350 --> 00:00:45,390 But we'll get around to that in a little bit. 14 00:00:45,390 --> 00:00:47,800 Right now let's just go back to our index screen. 15 00:00:47,910 --> 00:00:52,290 We're gonna make sure we show that icon on the right hand side and maybe update a little bit of styling 16 00:00:52,320 --> 00:00:54,060 inside of here as well. 17 00:00:54,060 --> 00:00:54,290 Okay. 18 00:00:54,300 --> 00:00:58,800 So inside of it index screen I'm going to first get started by finding that text element that says index 19 00:00:58,800 --> 00:00:59,580 screen. 20 00:00:59,580 --> 00:01:02,860 And I'm going to delete that because we don't really need to show that anymore. 21 00:01:02,870 --> 00:01:04,620 I'll then find my flat list. 22 00:01:04,620 --> 00:01:06,570 Here's the render item function. 23 00:01:06,570 --> 00:01:12,690 I'm going to wrap that text element that we are returning with a view I'm going gonna make sure I also 24 00:01:12,690 --> 00:01:16,450 clean up that semicolon at the end of the text that I had previously. 25 00:01:16,830 --> 00:01:21,540 And then after that text element we're going to want to eventually display our actual icon so to show 26 00:01:21,540 --> 00:01:26,730 an icon remember we're going to make use of that vector icons library provided by Expo. 27 00:01:26,730 --> 00:01:32,160 Let's go take a look at the icon directory and make sure that we have some appropriate trash icon looking 28 00:01:32,160 --> 00:01:35,250 thing that we can show to back inside my browser. 29 00:01:35,250 --> 00:01:42,750 I'm going to navigate back to get hub and we'll go to Expo slash vector dash icons. 30 00:01:42,790 --> 00:01:46,990 Remember this is the repository that provides all the icons into our project. 31 00:01:47,230 --> 00:01:53,740 We can scroll on down and find a link to the icons directory underneath resources and then on this page 32 00:01:53,740 --> 00:01:58,990 we can search for the icon that we want to show in our case we want to show like a trash can or a delete 33 00:01:58,990 --> 00:01:59,460 icon. 34 00:01:59,710 --> 00:02:04,180 So we could try searching for like trash or delete one or the other. 35 00:02:04,180 --> 00:02:07,360 It looks like both them give us some appropriate choices. 36 00:02:07,360 --> 00:02:12,490 So I think that maybe all the go with trash and I'll just go ahead and pick like the feather icon right 37 00:02:12,490 --> 00:02:14,290 here called trash. 38 00:02:14,290 --> 00:02:18,820 So we want to make use of the feather icon library which means back inside of our index screen at the 39 00:02:18,820 --> 00:02:19,970 very top. 40 00:02:20,440 --> 00:02:32,240 We will import feather from at Expo vector icons and then after our text element down here I'll put 41 00:02:32,240 --> 00:02:39,650 in my feather I'll get the name of the icon which we trash and then remember by default an icon shows 42 00:02:39,650 --> 00:02:40,880 up rather small. 43 00:02:40,880 --> 00:02:46,340 So we're probably gonna want to add in some font size property or size directly to the feather element 44 00:02:46,520 --> 00:02:47,960 to increase its size. 45 00:02:48,110 --> 00:02:51,890 But ultimately I think that we're camped out in a little bit of styling inside of all three of these 46 00:02:51,890 --> 00:02:52,810 elements right here. 47 00:02:52,850 --> 00:02:56,020 So let's just add in some styling to our styles object at the bottom. 48 00:02:56,030 --> 00:03:00,800 We'll take care of the size of the feather element will increase the size of that text element and we'll 49 00:03:00,800 --> 00:03:06,560 also add in a style to that view to make sure that we get some spacing as is shown right here between 50 00:03:06,560 --> 00:03:10,430 the blog post title and the icon that should be displayed on the right hand side. 51 00:03:10,580 --> 00:03:15,120 So inside my styles object I'm going to add in a couple of different styles. 52 00:03:15,140 --> 00:03:17,130 The first one I'll make is Roe. 53 00:03:17,150 --> 00:03:20,200 This is going to be applied to our overall view element. 54 00:03:20,300 --> 00:03:23,940 So I want to make sure that the text and feather icon show up on the same line. 55 00:03:23,960 --> 00:03:28,100 So to do so I'll put in a flex direction of row. 56 00:03:28,110 --> 00:03:30,210 They'll get them to show up on the same line. 57 00:03:30,350 --> 00:03:38,500 I'll also put in a justified content of space between remember that's going to add in a little bit of 58 00:03:38,500 --> 00:03:41,350 space between everything inside of this view. 59 00:03:41,390 --> 00:03:45,400 Now let's add in that style to that view right away and just see what these two rules by themselves 60 00:03:45,400 --> 00:03:46,320 do. 61 00:03:46,360 --> 00:03:53,700 So on the view I'll add in a style of styles dot row we'll save this and then see how we're doing. 62 00:03:53,790 --> 00:03:58,880 I'm going to add a blog post and now I've got my blog post on left in the icon on the right. 63 00:03:58,890 --> 00:04:00,710 OK it looks pretty reasonable. 64 00:04:00,710 --> 00:04:06,230 So let's increase the size that icon in the size of our blog post title as well it's about over here 65 00:04:06,260 --> 00:04:12,000 all adding another section call this about next will be title. 66 00:04:12,000 --> 00:04:16,740 This will be a style for the title of the blog post and I'll give it a increased font size will go up 67 00:04:16,740 --> 00:04:22,920 to like maybe 18 then I'll also put in a icon style. 68 00:04:23,060 --> 00:04:25,030 I'll give this one a font size. 69 00:04:25,070 --> 00:04:26,750 Remember the font size for an icon. 70 00:04:26,770 --> 00:04:29,780 Scales a little bit differently than a text font size. 71 00:04:29,810 --> 00:04:34,820 So in our case doing a font size for the icon of like maybe I don't know twenty four something like 72 00:04:34,820 --> 00:04:35,970 that might be appropriate. 73 00:04:35,990 --> 00:04:38,650 We'll just try that out and we can very easily adjust it. 74 00:04:38,700 --> 00:04:41,510 So let's now apply these two styles to the respective elements. 75 00:04:41,570 --> 00:04:47,660 So on the text element of the style is styles dot title and on the feather icon. 76 00:04:47,660 --> 00:04:52,390 Style is styles dot icon and claps the sidebar. 77 00:04:52,400 --> 00:04:53,950 We can see that line very easily. 78 00:04:56,260 --> 00:04:57,430 I'll say it again. 79 00:04:57,840 --> 00:05:02,970 And yeah that's looking a little bit better now I know that I said that we weren't going to focus too 80 00:05:02,970 --> 00:05:03,910 much on styling. 81 00:05:03,930 --> 00:05:06,380 Nonetheless these things are really squished together. 82 00:05:06,390 --> 00:05:09,990 So I think that we could do just a little bit more to assist with styling here. 83 00:05:09,990 --> 00:05:20,040 So maybe on Styles dot Roe let's just add in some like about padding vertical just to get some spacing 84 00:05:20,040 --> 00:05:20,720 above and below. 85 00:05:20,730 --> 00:05:29,250 Each blog post will add in about 20 units worth we'll say that really quick and that's little bit better. 86 00:05:29,300 --> 00:05:34,070 And then finally I'm going to also add in a border around that row element just so it's really clear 87 00:05:34,070 --> 00:05:42,020 that we've got a collection of different rows more or less it's allowed in a order with top excuse me 88 00:05:42,020 --> 00:05:56,580 border top with There we go of one a border bottom width of one and a border color of grey and we can 89 00:05:56,580 --> 00:06:01,740 add in some posts and there we go now because we are showing a border on both top and bottom all the 90 00:06:01,740 --> 00:06:06,480 blog posts in the middle have a kind of double thick line right there because we're seeing two borders 91 00:06:06,480 --> 00:06:07,770 right next to each other. 92 00:06:07,920 --> 00:06:10,880 I'm gonna worry about that too much if you want to go ahead and fix that. 93 00:06:10,890 --> 00:06:11,900 Well you know what let's just fix it. 94 00:06:11,900 --> 00:06:17,340 What the heck to fix it we can very easily just add in or simply remove say the border top or the border 95 00:06:17,340 --> 00:06:18,170 bottom. 96 00:06:18,390 --> 00:06:20,280 So let's try taking up border bottom. 97 00:06:20,280 --> 00:06:22,430 We save that OK. 98 00:06:22,440 --> 00:06:24,070 Alex a little bit better. 99 00:06:24,120 --> 00:06:24,370 OK. 100 00:06:24,390 --> 00:06:26,110 Now we've got all of our different blog posts. 101 00:06:26,160 --> 00:06:30,630 We've got the trash icon on the right our title on the left looking pretty good. 102 00:06:30,630 --> 00:06:34,650 Now if you want to add in any additional styling here go ahead and feel free to do so. 103 00:06:34,710 --> 00:06:42,380 In particular you might add in a little bit of maybe padding horizontal on the row element or even it's 104 00:06:42,630 --> 00:06:44,340 probably padding hordes on let's just go ahead do it. 105 00:06:44,340 --> 00:06:45,410 What am I saying here. 106 00:06:45,450 --> 00:06:47,750 It's not that hard to do art padding horizontal there. 107 00:06:47,760 --> 00:06:54,150 We did it analysts give that like 10 and that's just to get a little bit of offset of our content against 108 00:06:54,150 --> 00:06:56,370 the sides of the device. 109 00:06:56,460 --> 00:06:56,740 OK. 110 00:06:56,760 --> 00:06:57,580 Better. 111 00:06:57,660 --> 00:06:58,850 Ok I'm going to call it there. 112 00:06:58,860 --> 00:07:04,080 We've done enough little additions so I think that on both Android an OS that looks reasonable enough. 113 00:07:04,320 --> 00:07:07,410 So we now the ability to create some number of resources. 114 00:07:07,440 --> 00:07:07,670 OK. 115 00:07:07,710 --> 00:07:10,110 So now that we've got this stuff here let's take another quick pause. 116 00:07:10,120 --> 00:07:14,100 The next video we're gonna make sure that tapping on that little icon right there is going to actually 117 00:07:14,100 --> 00:07:15,540 delete a blog post. 118 00:07:15,540 --> 00:07:16,890 So we'll take care that in the next video.