1
00:00:02,180 --> 00:00:07,440
On the product detail screen, we started working on that already but we're not really

2
00:00:07,850 --> 00:00:10,240
outputting anything useful there,

3
00:00:10,250 --> 00:00:11,600
now it's time to change this.

4
00:00:11,690 --> 00:00:17,570
For that, I'll replace the jsx code we're currently using there with a scroll view because as I mentioned

5
00:00:17,570 --> 00:00:19,790
earlier, we'll output our image there,

6
00:00:19,790 --> 00:00:23,510
our product description and this could be a very long description or we're simply viewing this on a

7
00:00:23,510 --> 00:00:25,790
smaller device or in landscape mode,

8
00:00:25,850 --> 00:00:28,410
so we definitely want to have some scrollable content there

9
00:00:28,640 --> 00:00:33,020
and by the way we don't need flat list here because the content will not be infinitely long,

10
00:00:33,100 --> 00:00:36,420
we know pretty much that it will not be that long in advance,

11
00:00:36,440 --> 00:00:42,020
so scroll view is perfectly fine and in that scroll view, you can now add an image component which outputs that

12
00:00:42,020 --> 00:00:50,210
product image at the top let's say and below that, we can then maybe add our button to allow us to add this

13
00:00:50,220 --> 00:01:01,560
to a cart and below that, we can have our text, like displaying the price and then maybe the text for

14
00:01:01,560 --> 00:01:04,260
the description. So for the image,

15
00:01:04,270 --> 00:01:08,980
we need to set up the source prop and that is an object which has a URI property

16
00:01:09,330 --> 00:01:14,530
and of course we have our selected product here, so the source is just selectedProduct.imageUrl

17
00:01:14,620 --> 00:01:20,680
because the selected product is of the type we defined in our products model. On the

18
00:01:20,680 --> 00:01:26,530
button here, we can add a title of add to cart because that's in the end what this button should do

19
00:01:26,620 --> 00:01:32,970
and onPress does nothing for now but later we'll add this to the cart. Then here

20
00:01:33,010 --> 00:01:34,390
I want to output the price,

21
00:01:34,390 --> 00:01:37,600
we don't need to output the title because that's already part of the header,

22
00:01:37,600 --> 00:01:43,630
so we see the title there but here I want to output the price in dollars by referring to selected

23
00:01:43,630 --> 00:01:47,810
product.price to fixed 2 which I did before

24
00:01:48,100 --> 00:01:50,410
and then down there also the description,

25
00:01:50,410 --> 00:01:56,170
so here we have selectedProduct.description, like this.

26
00:01:56,200 --> 00:01:56,560
Okay,

27
00:01:56,590 --> 00:01:57,670
so that's looking good,

28
00:01:57,670 --> 00:01:59,380
now it's time for some styling of course.

29
00:01:59,380 --> 00:02:04,270
For example for the image we'll definitely have to set a width and height because it's a network image,

30
00:02:04,270 --> 00:02:09,350
so here I'll add the image style which I have to add to my stylesheet.

31
00:02:09,460 --> 00:02:15,040
Now for the texts here, this text should have a style of price maybe which we have to add

32
00:02:15,580 --> 00:02:24,490
and then this here, this text should have a style of description maybe, sounds like a fitting name.

33
00:02:24,490 --> 00:02:31,690
Now in the stylesheet, we have to add all these things, so let's start for the image.

34
00:02:31,980 --> 00:02:34,580
There I'll add a width of 100%,

35
00:02:34,580 --> 00:02:38,730
this should really take the full available width and a height of 300 maybe

36
00:02:38,740 --> 00:02:40,570
and of course you can play around with that,

37
00:02:40,570 --> 00:02:46,810
you could also use a percentage value for that or use the dimensions API to kind of calculate this dynamically.

38
00:02:48,000 --> 00:02:52,970
Thereafter, I want to have my price,

39
00:02:53,080 --> 00:03:01,810
that price text should have a font size of 20 because people should of course be able to see it, a colour

40
00:03:01,870 --> 00:03:09,670
of that grayish, this dark grayish colour I used earlier already and a text alignment of center so that

41
00:03:09,670 --> 00:03:11,780
it's always centered,

42
00:03:11,850 --> 00:03:20,640
also a margin on the vertical axis of 20 maybe, so around it, of 20 and then thereafter, the description.

43
00:03:21,240 --> 00:03:30,660
Description actually can have a font size of let's say 14, let's see whether that works and in there, also

44
00:03:30,680 --> 00:03:38,810
use text align center, something like that. If we save that, let's have a look at that, doesn't look too

45
00:03:38,810 --> 00:03:47,420
bad. Now for the button, I want to set a different color, so I'll add colour here and set this to colors

46
00:03:47,450 --> 00:03:56,170
which we need to import of course from our constants folder, Colors.primary and now if we save

47
00:03:56,200 --> 00:04:03,500
this, this looks quite nice. On Android, you see that the button sits directly below the image though

48
00:04:03,680 --> 00:04:06,300
and that it's a full width button.

49
00:04:06,320 --> 00:04:07,900
It's the same here for iOS, there

50
00:04:07,910 --> 00:04:08,830
we just don't see it

51
00:04:08,840 --> 00:04:13,940
but if I tap here, you also see that this button gets pressed and that's actually not what I want here.

52
00:04:14,150 --> 00:04:14,590
So

53
00:04:14,600 --> 00:04:23,310
what I'll do is I'll wrap this button in a view which I'll give a style of let's say actions,

54
00:04:23,310 --> 00:04:28,160
even though it's only one action here, you could maybe have multiple buttons here for different things.

55
00:04:28,350 --> 00:04:32,890
So I'll add my actions key here to the stylesheet

56
00:04:33,030 --> 00:04:40,530
and there, we can set for one a margin on the vertical axis of 10 to top and bottom and align your items

57
00:04:41,930 --> 00:04:43,260
in the center

58
00:04:43,430 --> 00:04:50,740
which, because the default flex direction is column, centers it horizontally and now we have more spacing

59
00:04:50,740 --> 00:04:53,750
here and we see this even better on Android, more spacing

60
00:04:53,780 --> 00:05:00,100
and the button now does not stretch as it would be, its default alignment setting anymore but instead only

61
00:05:00,100 --> 00:05:05,230
takes as much width as it needs and is aligned in the center.

62
00:05:05,240 --> 00:05:06,310
So this is the setup

63
00:05:06,440 --> 00:05:07,050
I'll go with,

64
00:05:07,070 --> 00:05:11,480
of course you can still tweak this in different ways if you wish to,

65
00:05:11,480 --> 00:05:13,150
to me this doesn't look too bad,

66
00:05:13,160 --> 00:05:18,360
let's also view like a different item, maybe also this one,

67
00:05:18,440 --> 00:05:18,670
yes,

68
00:05:18,710 --> 00:05:20,820
that's all looking quite nice.

69
00:05:20,870 --> 00:05:25,790
Now for a longer text here though, you see that's not that beautiful, there should be more spacing.

70
00:05:26,240 --> 00:05:34,700
So actually on the description, I'll also add a little margin horizontal of let's say 20 so that we have

71
00:05:34,700 --> 00:05:42,600
spacing around this, so that if we have another look at this, you see now this automatically jumps into

72
00:05:42,600 --> 00:05:43,890
a new line which it should.

73
00:05:44,970 --> 00:05:45,290
Okay,

74
00:05:45,360 --> 00:05:46,290
so that's looking good,

75
00:05:46,290 --> 00:05:48,380
now we have the product detail screen.

76
00:05:48,480 --> 00:05:53,970
Now before we continue, I want to bring my own fonts and use those because I'm not happy with the default

77
00:05:53,970 --> 00:05:54,420
fonts.