1
00:00:02,420 --> 00:00:06,140
So let's focus on the meal detail screen for now,

2
00:00:06,170 --> 00:00:06,770
so

3
00:00:09,660 --> 00:00:13,950
the part here where we view the details of the selected recipe.

4
00:00:14,070 --> 00:00:19,590
Right now, we just have the dummy content there, of the meal detail screen and that's of course not

5
00:00:19,590 --> 00:00:21,810
the content I really want to have there,

6
00:00:22,020 --> 00:00:24,190
instead what should be in there?

7
00:00:24,210 --> 00:00:30,280
Well, if we have a look at our meal model, it probably makes sense to have the image there,

8
00:00:30,330 --> 00:00:35,340
please keep in mind that the title already is shown in our header, so it makes sense to have the image

9
00:00:35,340 --> 00:00:43,710
here at the top maybe and below that, maybe just again repeat duration, affordability and complexity just

10
00:00:43,710 --> 00:00:47,140
as we're doing it here below our recipe

11
00:00:47,370 --> 00:00:56,730
and then also below that, list all the ingredients and the steps it takes to make that dish. So that's

12
00:00:56,730 --> 00:01:02,170
in the end what I want to have on this page here on the MealDetailScreen and therefore,

13
00:01:02,340 --> 00:01:08,220
I think it makes sense to first of all add a scroll view because we'll certainly have a lot of content

14
00:01:08,220 --> 00:01:15,340
on there that will most likely not fit onto one screen and certainly not on all possible device sizes.

15
00:01:15,390 --> 00:01:22,320
So I will add a scroll view here and wrap that around my content here.

16
00:01:22,330 --> 00:01:24,920
Now we'll have a couple of different sections here,

17
00:01:25,030 --> 00:01:30,750
for example at the very top, I want to have my image and for this,

18
00:01:30,750 --> 00:01:36,300
I will also import the image component from React Native here so that we can render an image

19
00:01:36,300 --> 00:01:39,030
here, not a background image but a normal image

20
00:01:39,270 --> 00:01:45,260
and I want to add this, let's say here right at the top, something like that.

21
00:01:45,260 --> 00:01:51,390
Now after the image, I want to have a view with the duration, affordability and complexity as I mentioned,

22
00:01:51,400 --> 00:01:57,930
so basically the same setup we have in the meal item, this here you could say and therefore I'll actually

23
00:01:57,930 --> 00:02:03,330
copy the view from there and then we can adjust it as we need it here in the MealDetailScreen,

24
00:02:03,360 --> 00:02:06,220
so I'll just replace this view with the copy view.

25
00:02:06,360 --> 00:02:10,510
Of course that requires us to import default text component here,

26
00:02:10,710 --> 00:02:11,700
so let's add this,

27
00:02:11,720 --> 00:02:16,370
let's import default text from components

28
00:02:16,610 --> 00:02:21,450
default text. So that's the next row

29
00:02:21,500 --> 00:02:26,580
and thereafter, I want to have my ingredients and the steps you need to execute.

30
00:02:26,890 --> 00:02:39,790
So we can add some text here where we say ingredients and there, I want to also apply a style, like styles

31
00:02:39,820 --> 00:02:42,910
text, title, something like this or just title

32
00:02:45,630 --> 00:02:52,320
because I want to have some bold header here, maybe increase the font size. Below that, have my list of

33
00:02:52,320 --> 00:02:58,770
ingredients, so list of ingredients and that's of course not the final content, instead we will render

34
00:02:58,770 --> 00:03:07,260
a list here and below that, I'll repeat this here because then I want to have a title where I say steps

35
00:03:07,980 --> 00:03:14,760
and then a list of steps below that and now I'll get rid of this old content down there and that's what

36
00:03:14,760 --> 00:03:15,940
I want to work with.

37
00:03:15,960 --> 00:03:20,790
Now of course, all the styles are missing and also props duration and so on, that doesn't yield anything,

38
00:03:20,790 --> 00:03:26,080
instead we have to work with the selected meal here, selected meal duration, selected meal complexity, selected

39
00:03:26,130 --> 00:03:34,560
meal affordability and for the image for example, I want to add a source here, source since it's a network

40
00:03:34,590 --> 00:03:42,210
image, is an object with a URI property which points at selectedMeal.imageUrl to load

41
00:03:42,240 --> 00:03:47,210
this and we also need to apply a style there, to set a width and a height,

42
00:03:47,310 --> 00:03:53,190
so here I want to point at styles image let's say and all these styles are missing as I said so let's add

43
00:03:53,190 --> 00:04:02,470
that. Here for this style, I also want to say styles.details maybe because we're displaying the details

44
00:04:02,470 --> 00:04:08,680
of this recipe and let's go down to the stylesheet therefore, remove the screen which we don't need

45
00:04:08,680 --> 00:04:09,340
anymore,

46
00:04:09,520 --> 00:04:16,920
innstead let's add image and details. Now for details, we need to set the flex direction to row because

47
00:04:16,920 --> 00:04:19,180
that should be all the details in a row.

48
00:04:19,380 --> 00:04:27,060
We can add a little bit of padding in all directions maybe of 15 and also add a justify content of space

49
00:04:27,120 --> 00:04:33,550
around to nicely distribute our detail items here, that should be good.

50
00:04:35,210 --> 00:04:42,270
In addition to that, on the image here, we also need to add a style, there

51
00:04:42,440 --> 00:04:48,100
the width should be 100% let's say, to take the full available width and for height,

52
00:04:48,140 --> 00:04:49,580
I'll go with 200,

53
00:04:49,580 --> 00:04:54,680
though of course you could dynamically calculate this with the dimensions API for example to always

54
00:04:54,740 --> 00:05:00,720
take a certain fraction of the available height or simply play around with different values here.

55
00:05:00,890 --> 00:05:03,520
I'll go with that and have a look here and

56
00:05:03,740 --> 00:05:04,940
that doesn't look too shabby,

57
00:05:04,970 --> 00:05:06,130
that's not too bad.

58
00:05:07,450 --> 00:05:13,990
Now you could definitely also try some bonus work here, some bonus tasks and for example color

59
00:05:13,990 --> 00:05:20,200
these details - simple, affordable and the duration depending on whether it's rather short or depending

60
00:05:20,200 --> 00:05:25,810
on the different values you have for simple, for the complexity and the affordability.

61
00:05:25,810 --> 00:05:31,150
It's not something I will do here but you can have a look at the meal data of course to see which values

62
00:05:31,150 --> 00:05:37,090
we have there to derive what's short, what's a medium duration what's a long duration and to see which

63
00:05:37,090 --> 00:05:41,800
values are getting used for complexity and so on and then you could actually add some if checks to apply

64
00:05:41,800 --> 00:05:47,470
different styling to the different values we're outputting here in meal detail screen for these

65
00:05:47,470 --> 00:05:52,360
details so that you color the text differently depending on whether it's long or not. It's not something

66
00:05:52,360 --> 00:05:58,150
I'll do here because it's just some extra work that doesn't really add much to the navigation which

67
00:05:58,150 --> 00:05:59,740
is the focus of this module.

68
00:05:59,740 --> 00:06:08,110
So instead, I'll focus on ingredients and steps and there, a first step is to make sure that title here

69
00:06:08,530 --> 00:06:10,250
is styled properly.

70
00:06:10,330 --> 00:06:17,660
So let's add title to the stylesheet and in there, I'll add font family and set this to open sans bold,

71
00:06:19,080 --> 00:06:26,790
set the font size to 22 maybe and set the text align to center to center the text in the middle

72
00:06:26,810 --> 00:06:32,160
and with that if we check this, this looks quite nice.

73
00:06:32,230 --> 00:06:37,540
Now I also want to output my ingredients in my steps of course and for that, it's important to understand

74
00:06:37,540 --> 00:06:40,770
that in the dummy data, these are arrays,

75
00:06:40,780 --> 00:06:42,480
these are my ingredients for example,

76
00:06:42,490 --> 00:06:49,540
these are my steps and you see there's just text in these arrays. So I just want to output my text here

77
00:06:49,720 --> 00:06:56,410
as a list and I'll not use a FlatList because you could do that, you could have scrollable containers

78
00:06:56,410 --> 00:07:01,470
in there so to say but I will simply render the ingredients and the steps on top of each other.

79
00:07:01,480 --> 00:07:07,690
So here, we can use a good old approach we know from Vanilla React or React for web to which I also

80
00:07:07,690 --> 00:07:14,140
showed earlier in the course. We can use our selected meal and there, the ingredients which is an array

81
00:07:14,140 --> 00:07:17,640
of strings and map this into an array of components,

82
00:07:17,650 --> 00:07:23,230
that's how you can output a list of data in React and also React Native

83
00:07:23,230 --> 00:07:27,660
and often, you use FlatList but here we don't need to because it's not an infinite amount

84
00:07:27,670 --> 00:07:33,300
so we don't need these optimizations and we have a wrapping scroll view around the entire screen

85
00:07:33,400 --> 00:07:38,050
so we will be able to also scroll if we're outputting more than fits on the screen, so we're absolutely

86
00:07:38,050 --> 00:07:39,950
fine using this approach

87
00:07:39,950 --> 00:07:45,220
and therefore here, I will have my single ingredient in this map function and map is a method built into

88
00:07:45,220 --> 00:07:46,900
JavaScript as you know

89
00:07:46,990 --> 00:07:50,030
and here we need to return a jsx element now

90
00:07:50,170 --> 00:07:55,660
and what I want return is a text component where I simply output ingredient because ingredients

91
00:07:55,720 --> 00:07:56,880
is an array of strings,

92
00:07:56,890 --> 00:07:59,010
so ingredient is just a string

93
00:07:59,020 --> 00:08:03,280
and then here we also need to supply a key, that's a requirement by React

94
00:08:03,280 --> 00:08:07,980
and we can use ingredient as a key because we'll always have each ingredient only once.

95
00:08:07,990 --> 00:08:10,230
So that is guaranteed to be unique,

96
00:08:10,240 --> 00:08:12,510
that's how our meals are set up

97
00:08:12,550 --> 00:08:19,520
and with that if we save this and we have a look at a recipe here, we see our ingredients. Now for the

98
00:08:19,520 --> 00:08:21,620
styling, we can certainly do something there

99
00:08:21,650 --> 00:08:26,960
and I will do so in a second but before I do that, let me repeat this for the steps here,

100
00:08:26,960 --> 00:08:34,250
replace this text with selectedMeal.steps and then output each step here which is also just a string and

101
00:08:34,350 --> 00:08:41,910
which is also unique in a text and with that added, we should also see the steps for our meal, indeed we do.

102
00:08:42,630 --> 00:08:46,730
Now again, styling can be improved a little bit and we'll do just that

103
00:08:47,010 --> 00:08:53,460
and I think it makes sense to create a separate component or render function for this and I will

104
00:08:53,460 --> 00:08:58,830
create a separate component, we'll store it in the same file though because we really only use it in that

105
00:08:58,830 --> 00:08:59,310
file

106
00:08:59,340 --> 00:09:03,260
but you could also create a new file, totally up to you. There

107
00:09:03,270 --> 00:09:11,340
I'll have my list item which receives props where I return

108
00:09:11,350 --> 00:09:17,500
and now here I want to use a view which I'm importing as a wrapper so that I can style this container

109
00:09:17,500 --> 00:09:24,690
and in there, have my text where I output props children and now that view here will get a style from

110
00:09:24,700 --> 00:09:28,450
styles.ListItem maybe so that we can style this nicely

111
00:09:28,450 --> 00:09:33,490
and here of course, I don't want to use text but actually default text,

112
00:09:33,490 --> 00:09:34,630
also here of course

113
00:09:34,780 --> 00:09:38,010
so that we take advantage of our own custom text.

114
00:09:38,170 --> 00:09:47,430
Now for the list item style here, let's go down to the stylesheet and add list item and each list item

115
00:09:47,460 --> 00:09:55,530
should have some margin, a vertical margin of let's say 10 and a horizontal margin of let's say 20,

116
00:09:55,530 --> 00:10:05,600
so more spacing to left and right and let's also maybe add a border color of a light grayish color

117
00:10:05,600 --> 00:10:09,540
here with #ccc and a border width of 1,

118
00:10:09,540 --> 00:10:16,730
we'll see how that looks like and then also add a little bit of padding in there, 10 in all directions

119
00:10:17,570 --> 00:10:18,930
and we'll see how that looks like.

120
00:10:18,950 --> 00:10:25,910
Now we just need to make sure we use our list item component and we use it by returning that instead

121
00:10:25,910 --> 00:10:30,590
of text here when outputting the ingredients, we still pass ingredient between the opening and closing

122
00:10:30,590 --> 00:10:36,200
tags of our own custom component because there, we're using props children that does use the content

123
00:10:36,470 --> 00:10:38,920
which we pass between opening and closing tags

124
00:10:39,110 --> 00:10:43,870
and we do the same for our steps. With that,

125
00:10:44,530 --> 00:10:47,520
let's have a look at this, yes

126
00:10:47,670 --> 00:10:55,870
doesn't look too bad. We get our steps here, got our ingredients, of course you can refine this styling, fine

127
00:10:55,870 --> 00:11:02,650
tune to your requirements, to the way you want it to look but I'm actually quite happy with that and with

128
00:11:02,650 --> 00:11:08,050
that, we got a basic detail screen and of course, this detail screen also works for our favorites

129
00:11:08,050 --> 00:11:10,610
because we're using one and the same screen there.

130
00:11:10,660 --> 00:11:15,500
So that looks quite nice, the filter screen is what's now missing.