Now that we've got all of our blog contact stuff put together let's start to focus on the rest of our
application.
We're going to eventually put together these show create and edit screens.
But for right now let's just wrap up the index screen.
We need to make sure that whenever we show a blog post we should have a little delete icon next to it
as well.
So to get this in here we're gonna have to modify our index screen component and show the icon.
We'll also have to add in some additional code to our blog post context and make sure that there is
kind of a maybe delete blog post function that will delete some particular post when we start to think
about deleting posts as well.
We need some way to refer to which post actually gets deleted.
And so chances are we will eventually add in an I.D. property to each blog post that we create.
But we'll get around to that in a little bit.
Right now let's just go back to our index screen.
We're gonna make sure we show that icon on the right hand side and maybe update a little bit of styling
inside of here as well.
Okay.
So inside of it index screen I'm going to first get started by finding that text element that says index
screen.
And I'm going to delete that because we don't really need to show that anymore.
I'll then find my flat list.
Here's the render item function.
I'm going to wrap that text element that we are returning with a view I'm going gonna make sure I also
clean up that semicolon at the end of the text that I had previously.
And then after that text element we're going to want to eventually display our actual icon so to show
an icon remember we're going to make use of that vector icons library provided by Expo.
Let's go take a look at the icon directory and make sure that we have some appropriate trash icon looking
thing that we can show to back inside my browser.
I'm going to navigate back to get hub and we'll go to Expo slash vector dash icons.
Remember this is the repository that provides all the icons into our project.
We can scroll on down and find a link to the icons directory underneath resources and then on this page
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
icon.
So we could try searching for like trash or delete one or the other.
It looks like both them give us some appropriate choices.
So I think that maybe all the go with trash and I'll just go ahead and pick like the feather icon right
here called trash.
So we want to make use of the feather icon library which means back inside of our index screen at the
very top.
We will import feather from at Expo vector icons and then after our text element down here I'll put
in my feather I'll get the name of the icon which we trash and then remember by default an icon shows
up rather small.
So we're probably gonna want to add in some font size property or size directly to the feather element
to increase its size.
But ultimately I think that we're camped out in a little bit of styling inside of all three of these
elements right here.
So let's just add in some styling to our styles object at the bottom.
We'll take care of the size of the feather element will increase the size of that text element and we'll
also add in a style to that view to make sure that we get some spacing as is shown right here between
the blog post title and the icon that should be displayed on the right hand side.
So inside my styles object I'm going to add in a couple of different styles.
The first one I'll make is Roe.
This is going to be applied to our overall view element.
So I want to make sure that the text and feather icon show up on the same line.
So to do so I'll put in a flex direction of row.
They'll get them to show up on the same line.
I'll also put in a justified content of space between remember that's going to add in a little bit of
space between everything inside of this view.
Now let's add in that style to that view right away and just see what these two rules by themselves
do.
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.
I'm going to add a blog post and now I've got my blog post on left in the icon on the right.
OK it looks pretty reasonable.
So let's increase the size that icon in the size of our blog post title as well it's about over here
all adding another section call this about next will be title.
This will be a style for the title of the blog post and I'll give it a increased font size will go up
to like maybe 18 then I'll also put in a icon style.
I'll give this one a font size.
Remember the font size for an icon.
Scales a little bit differently than a text font size.
So in our case doing a font size for the icon of like maybe I don't know twenty four something like
that might be appropriate.
We'll just try that out and we can very easily adjust it.
So let's now apply these two styles to the respective elements.
So on the text element of the style is styles dot title and on the feather icon.
Style is styles dot icon and claps the sidebar.
We can see that line very easily.
I'll say it again.
And yeah that's looking a little bit better now I know that I said that we weren't going to focus too
much on styling.
Nonetheless these things are really squished together.
So I think that we could do just a little bit more to assist with styling here.
So maybe on Styles dot Roe let's just add in some like about padding vertical just to get some spacing
above and below.
Each blog post will add in about 20 units worth we'll say that really quick and that's little bit better.
And then finally I'm going to also add in a border around that row element just so it's really clear
that we've got a collection of different rows more or less it's allowed in a order with top excuse me
border top with There we go of one a border bottom width of one and a border color of grey and we can
add in some posts and there we go now because we are showing a border on both top and bottom all the
blog posts in the middle have a kind of double thick line right there because we're seeing two borders
right next to each other.
I'm gonna worry about that too much if you want to go ahead and fix that.
Well you know what let's just fix it.
What the heck to fix it we can very easily just add in or simply remove say the border top or the border
bottom.
So let's try taking up border bottom.
We save that OK.
Alex a little bit better.
OK.
Now we've got all of our different blog posts.
We've got the trash icon on the right our title on the left looking pretty good.
Now if you want to add in any additional styling here go ahead and feel free to do so.
In particular you might add in a little bit of maybe padding horizontal on the row element or even it's
probably padding hordes on let's just go ahead do it.
What am I saying here.
It's not that hard to do art padding horizontal there.
We did it analysts give that like 10 and that's just to get a little bit of offset of our content against
the sides of the device.
OK.
Better.
Ok I'm going to call it there.
We've done enough little additions so I think that on both Android an OS that looks reasonable enough.
So we now the ability to create some number of resources.
OK.
So now that we've got this stuff here let's take another quick pause.
The next video we're gonna make sure that tapping on that little icon right there is going to actually
delete a blog post.
So we'll take care that in the next video.