On to the cart items.
Now again, I will create a separate component for each cart
item I want to output here.
I could do it in here but again, it will be a a bit of a longer component and I don't want to bloat this
file with it and I will actually also use it in another place later
which might sound strange given that we only have one cart screen but you'll see where else we can use
a cart item later.
So for that, let's go back in the components folder and there in the shop folder maybe and add a
CartItem.js file next to the product item.
Now of course we have a normal React component in there, so you know the game, how
those are created.
We import React from React and then here since this is the component that should output something, we'll
import a bunch of components from React Native, the core primitives with which we built the UI.
I'll need a view, I'll need a text, I'll need a stylesheet here for sure and then I'll add my constant
here, cart item which receives props and then in the end here return some jsx code. I will add my
styles object here with stylesheet
create and I will export this as a default cart item.
Now the jsx code which should be returned here of course is always up to you but I will have a view
here and in that view, I want to output the quantity and the title of course,
also the total amount for this cart item in case we added more than one, then this is not just the price
of a single item but of course price times quantity and I actually also want to have a button that allows
me to delete this item from the cart,
a trash icon.
So in the end, I'll have a row here with a text and this text will have the quantity and the title, so
there I will have the quantity and the title and actually this should be styled differently, so I'll wrap
the quantity here into a separate text node and do the same for the title, so that I have two separate
text nodes here in the end and then after this text block here, there should be a view to group two other
elements together, another piece of text which is the total amount for this item here,
so amount and next to that, a button or actually not a button but actually a pressable icon.
So I'll build my own touchable thing with touchable opacity and of course, you could again do that platform
differentiation for the ripple effect but I'll go with opacity on both platforms here and I will import
Ionicons from @expo/vector-icons which we already added earlier because I want to have just an icon
here which we can press,
so here I want to have touchable opacity and wrap that around an icon which we can add with Ionicons
as you added earlier in this course, with this as a component here and then simply use a name which
should actually differ by platform because the name is the icon identifier
and there, we can check platform OS and if that is Android, then the icon that should be used will have a
name of md trash and otherwise it'll be iOS trash which renders a nice trash bin icon and we can also
give this icon a size of let's say 23 which again should look quite nice and a color and
here, I'll actually use red because it's removing this item so it should have like a warning colour I'd
say. Touchable opacity when pressed should do something and it should forward the press event to the component
that uses the cart item component,
so I expect to get an on remove prop, this name as always is up to you which holds a function that is in
the end executed then and we can also add a style here, very simple style where I point at delete button
for example and that's a style declaration we can add thereafter.
Speaking of styles, there are of course more styles to add,
for example on the topmost view here, I'll give this a cart item style,
this text here then will receive a style
of an item data
maybe. This text with the quantity can receive a style which we can name styles.quantity, again
all these style identifiers as always are totally up to you.
Here on the title, I have a title style
and then here on this view, I'll add a style of item data again, so I'll reuse this style because I want to
have the same set up here and this amount here will also get a style of amount. So a bunch of styles
to add,
let's go down to the stylesheet and in there,
add the cart item which is our root style,
then item data and quantity,
so item data
quantity,
then the title here and the amount and last but not least, the delete button.
So that's also something we have to add here. Now on the delete button,
that's simple,
I'll just add a margin to the left of 20 to have some spacing between the icon and the text that sits
next to it
and with that, let's go to the cart item. There,
I want to have a padding of 10, a background color of white,
I'll not use my card look here, I'll not add a shadow here, you could do that but I prefer a different
look.
Important is flex direction row so that all the items in that view,
so this text and this view are sitting next to each other in one and the same row. Justify content should
be space between so that all empty spaces between these two blocks of content and I'll also add a margin
in horizontal direction of 20
so that there's some spacing to the left and to the right around my cart items.
Now item data, that's the style we're repeating around quantity and title and amount and the delete button,
item data should have flex direction row to make sure the items in there are positioned in a row and
I'll set align items here to center to center all the content vertically. Now for the quantity here, I want
to set a font family of open-sans, by the way, we can actually also use a view here instead of a
text around these two text nodes because I'm not setting any text specific styles here,
so let's take a view instead but with that, back to the quantity. We can give this a font family of open-sans,
a color of maybe this dark grayish color which we used before for prices,
now for the quantity and a font size of 16 maybe
and then here for the title, I'll set a font family of open sans bold to make that bold, give this a font
size of 16 too though and on the amount here, I'll do the exact same thing.
Therefore of course we could also merge this into one and the same style, maybe name this main text or
anything like that,
get rid of the amount since we have the exact same style definitions and now use main text here
instead of title and here instead of amount.
Okay.
This is a cart item,
now let's use it in the cart screen
with the help of a flat list there
because right now we're not outputting any items there on the cart screen.
So this view here can be replaced with flat list
now and the data we sit there should be an array of cart items and that's just what we have here in
the cart items constant,
so let's use this here.
Now here,
I'll also add a key extractor and here you definitely need to add it to let React Native know where
your key can be found because every item in here in the end is of this format and this has neither a key
nor an ID property but we know that product ID can be used as a key because this will be unique
for every item.
So here, I point at item.productId in the end
and now for render item, I want to use this cart item we just added.
So here, we need to import cart item from the components folder, the shop folder and there, cart item
and then use this cart item component down there in our render function where we get our item data in
the end and where we then return our cart item like this and now on the cart item, we need to pass in some
data, right? In the cart item,
right now I have dummy placeholders, of course here I expect to get my quantity let's say on a prop
named quantity, I expect to get my title on maybe a prop named title and the amount on a prop named amount
and there, I will call to fixed to 2 make sure that we always have two decimal places there and we also
have the on remove prop which we expect right.
So we got quantity, title, amount and on remove,
so back in the cart screen, that's what we have to add, the quantity is of course itemData.item.quantity
because a single item here is of course such an item and
therefore we'll have a quantity keep and besides the quantity, we have to pass in the title, the amount
and on remove.
So title is of course itemData.item.product.title,
that's the name I chose there, for amount we can pass in itemData.item. if we have a look at
how we define our data, that would be the sum, that's the amount for one item no matter how much
quantity we have in there or respecting the quantity we have actually.
And then last but not least for on remove, we should point at a function and at the moment, we have no
logic for this,
so I'll just point at an empty function and this is now a cart item as I want to render it. Let's give this
a try. Let's add two red shirts and a blue carpet, go to the cart and now I got text strings must be rendered
within a text component and it's pointing at cart item, line 14,
so let's have a look at that,
yes it's this here of which my IDE automatically added, this whitespace I want to have here after
my quantity. I indeed want to have that here,
so I will just add one extra whitespace here before I close my text. Now with that, let's try this again,
two red shirts, one blue carpet.
See the amount here,
see the title here
see the sum and this of course also adds up to this total sum.
Now it's time to make this delete button work.