On the product detail screen, we started working on that already but we're not really
outputting anything useful there,
now it's time to change this.
For that, I'll replace the jsx code we're currently using there with a scroll view because as I mentioned
earlier, we'll output our image there,
our product description and this could be a very long description or we're simply viewing this on a
smaller device or in landscape mode,
so we definitely want to have some scrollable content there
and by the way we don't need flat list here because the content will not be infinitely long,
we know pretty much that it will not be that long in advance,
so scroll view is perfectly fine and in that scroll view, you can now add an image component which outputs that
product image at the top let's say and below that, we can then maybe add our button to allow us to add this
to a cart and below that, we can have our text, like displaying the price and then maybe the text for
the description. So for the image,
we need to set up the source prop and that is an object which has a URI property
and of course we have our selected product here, so the source is just selectedProduct.imageUrl
because the selected product is of the type we defined in our products model. On the
button here, we can add a title of add to cart because that's in the end what this button should do
and onPress does nothing for now but later we'll add this to the cart. Then here
I want to output the price,
we don't need to output the title because that's already part of the header,
so we see the title there but here I want to output the price in dollars by referring to selected
product.price to fixed 2 which I did before
and then down there also the description,
so here we have selectedProduct.description, like this.
Okay,
so that's looking good,
now it's time for some styling of course.
For example for the image we'll definitely have to set a width and height because it's a network image,
so here I'll add the image style which I have to add to my stylesheet.
Now for the texts here, this text should have a style of price maybe which we have to add
and then this here, this text should have a style of description maybe, sounds like a fitting name.
Now in the stylesheet, we have to add all these things, so let's start for the image.
There I'll add a width of 100%,
this should really take the full available width and a height of 300 maybe
and of course you can play around with that,
you could also use a percentage value for that or use the dimensions API to kind of calculate this dynamically.
Thereafter, I want to have my price,
that price text should have a font size of 20 because people should of course be able to see it, a colour
of that grayish, this dark grayish colour I used earlier already and a text alignment of center so that
it's always centered,
also a margin on the vertical axis of 20 maybe, so around it, of 20 and then thereafter, the description.
Description actually can have a font size of let's say 14, let's see whether that works and in there, also
use text align center, something like that. If we save that, let's have a look at that, doesn't look too
bad. Now for the button, I want to set a different color, so I'll add colour here and set this to colors
which we need to import of course from our constants folder, Colors.primary and now if we save
this, this looks quite nice. On Android, you see that the button sits directly below the image though
and that it's a full width button.
It's the same here for iOS, there
we just don't see it
but if I tap here, you also see that this button gets pressed and that's actually not what I want here.
So
what I'll do is I'll wrap this button in a view which I'll give a style of let's say actions,
even though it's only one action here, you could maybe have multiple buttons here for different things.
So I'll add my actions key here to the stylesheet
and there, we can set for one a margin on the vertical axis of 10 to top and bottom and align your items
in the center
which, because the default flex direction is column, centers it horizontally and now we have more spacing
here and we see this even better on Android, more spacing
and the button now does not stretch as it would be, its default alignment setting anymore but instead only
takes as much width as it needs and is aligned in the center.
So this is the setup
I'll go with,
of course you can still tweak this in different ways if you wish to,
to me this doesn't look too bad,
let's also view like a different item, maybe also this one,
yes,
that's all looking quite nice.
Now for a longer text here though, you see that's not that beautiful, there should be more spacing.
So actually on the description, I'll also add a little margin horizontal of let's say 20 so that we have
spacing around this, so that if we have another look at this, you see now this automatically jumps into
a new line which it should.
Okay,
so that's looking good,
now we have the product detail screen.
Now before we continue, I want to bring my own fonts and use those because I'm not happy with the default
fonts.