1 00:00:01,590 --> 00:00:06,210 We're definitely picking up in this show with our header tag here so let's keep on rolling along and 2 00:00:06,210 --> 00:00:08,340 start fixing amps and the styling. 3 00:00:08,340 --> 00:00:12,300 When you look at the header in the style you'll see in the simulator excuse me you'll see that there 4 00:00:12,300 --> 00:00:16,560 is a little bit too little space right here and there we can definitely use a little bit more space 5 00:00:16,560 --> 00:00:20,030 between the image and the text to the right hand side. 6 00:00:20,040 --> 00:00:25,740 In addition it would be really nice if the first piece of text in here which was the album title was 7 00:00:25,740 --> 00:00:31,530 just a little bit larger at least or hopefully a little bit bolder as well just to make it stand out 8 00:00:31,530 --> 00:00:33,630 a little bit. 9 00:00:33,630 --> 00:00:38,300 So let's start by fixing some of the spacing with this image here. 10 00:00:38,310 --> 00:00:43,650 We'll achieve this by adding some styling to the view tag that is wrapping the image. 11 00:00:43,650 --> 00:00:49,210 So on this the tag right here will set up some margin on the left and right hand side. 12 00:00:49,380 --> 00:00:52,510 That means we're going to have to add another property to our styles object. 13 00:00:52,560 --> 00:00:57,120 So we'll go down to our styles object at the bottom and I'm going out on another property. 14 00:00:57,130 --> 00:01:01,410 They're going to call a thumbnail container style. 15 00:01:02,220 --> 00:01:08,480 So the thought process behind this name right here is that the container that is containing the thumbnails 16 00:01:08,490 --> 00:01:11,280 so you know thumbnail container style. 17 00:01:11,850 --> 00:01:18,270 So for this container right here I also want to kind of center the thumbnail in there right. 18 00:01:18,280 --> 00:01:22,800 I want to make sure this myson centered to make sure that sintered will give it the justify content 19 00:01:23,280 --> 00:01:30,630 of center and align items of center as well and will give it some left and right and spacing by giving 20 00:01:30,630 --> 00:01:36,400 it the margin left of 10 and a margin right of 10 as well. 21 00:01:37,230 --> 00:01:44,540 Now we can add this thumbnail container style to that view that we have up top so I'll scroll back up. 22 00:01:44,610 --> 00:01:47,960 I'm going to put in some new lines here. 23 00:01:48,000 --> 00:01:52,610 Now that I've got a pretty good number of things I need to restructure my styles object. 24 00:01:52,800 --> 00:02:02,140 And then I will pull in my thumbnail container style then we're going to take that style and just use 25 00:02:02,140 --> 00:02:03,350 it on the View tag. 26 00:02:03,580 --> 00:02:10,140 So hey view here you go use your style thumbnail container style cool. 27 00:02:10,140 --> 00:02:15,040 Now remember the other thing that I mentioned is I would really like if our header text you know so 28 00:02:15,060 --> 00:02:21,610 the text tag that has the artist title or the title was a little bit larger and maybe bolded as well. 29 00:02:21,660 --> 00:02:26,170 Let's start off by just making it larger and then we'll decide whether or not we want to build it. 30 00:02:26,220 --> 00:02:31,470 So I'm going to scroll back down and we're going to add a another text rule and here I'm going to put 31 00:02:31,470 --> 00:02:37,130 this one right underneath the header content style because this is the one that's holding the textile. 32 00:02:37,740 --> 00:02:44,610 Add a single rule to just add on to that text and call this one. 33 00:02:44,670 --> 00:02:47,770 Let's do Hetter text style. 34 00:02:50,670 --> 00:02:58,830 And I will give it a font size of 18 so now we'll place this textile as well. 35 00:02:58,830 --> 00:03:07,730 So I will scroll back up to restructure it and then add it to our first text tag. 36 00:03:07,830 --> 00:03:09,450 So here's the first text tag. 37 00:03:09,600 --> 00:03:16,910 It has the album title and I'll give it the style of header text style. 38 00:03:17,170 --> 00:03:17,980 All right. 39 00:03:17,980 --> 00:03:19,480 Time for the moment of truth how are we doing. 40 00:03:19,480 --> 00:03:20,830 How are we doing that check it out. 41 00:03:20,890 --> 00:03:23,010 Let's refresh the simulator. 42 00:03:24,010 --> 00:03:24,470 OK. 43 00:03:24,490 --> 00:03:26,500 Now this is starting to look pretty good right here. 44 00:03:26,500 --> 00:03:28,100 This is definitely coming along. 45 00:03:28,120 --> 00:03:34,750 We've got the nice slightly larger you know not too large but just slightly larger album title at the 46 00:03:34,750 --> 00:03:35,290 top. 47 00:03:35,350 --> 00:03:40,360 We've got some spacing to the left and right hand side of the image and the image is kind of centered 48 00:03:40,600 --> 00:03:43,780 vertically and horizontally inside of that container as well. 49 00:03:43,810 --> 00:03:46,540 So this is definitely getting towards where we want to be. 50 00:03:49,290 --> 00:03:53,970 So let's now continue and start working on the body of each card member of the body of each card we 51 00:03:53,970 --> 00:04:01,100 want it to have the album artwork and we've already got access to the album artwork on our album object. 52 00:04:01,170 --> 00:04:05,880 So if we go back to our album object you'll recall it's available as the image property. 53 00:04:05,880 --> 00:04:10,840 So your image image image each one has the artwork image. 54 00:04:11,190 --> 00:04:17,250 So we want to just add in a new card section right because this is a new section on the card and inside 55 00:04:17,250 --> 00:04:23,940 of that card section we just want to show this album cover just the album cover nothing else so shouldn't 56 00:04:23,940 --> 00:04:24,550 be too bad. 57 00:04:24,550 --> 00:04:28,070 Well in first the card section and then Image card. 58 00:04:28,220 --> 00:04:29,970 Is the image tag inside of it. 59 00:04:30,450 --> 00:04:34,610 So beneath our existing card section we'll add in another one 60 00:04:38,410 --> 00:04:41,300 and then we can add in an image tag as well. 61 00:04:43,480 --> 00:04:48,900 Again I'll give it the source property define you or I. 62 00:04:49,140 --> 00:04:55,150 And if you recall that Al or that image link you know the the actual thing we want to use here is available 63 00:04:55,150 --> 00:04:58,210 as props dot album dot image. 64 00:04:58,300 --> 00:05:05,530 But we are doing some destructuring so I'm going to reference just image and I'll scroll back up to 65 00:05:05,530 --> 00:05:07,510 my album destructuring right here. 66 00:05:07,570 --> 00:05:09,720 And I'm also going to need a structure out of my album. 67 00:05:09,730 --> 00:05:12,830 I'm going to structure out the image property as well. 68 00:05:12,910 --> 00:05:20,540 So I've got my title artist thumbnail image and image coming directly out of the album so I'll go back 69 00:05:20,540 --> 00:05:21,090 down. 70 00:05:21,180 --> 00:05:23,140 Yup we're all good to go. 71 00:05:23,900 --> 00:05:26,090 Let's refresh the simulator. 72 00:05:28,550 --> 00:05:29,360 And ok. 73 00:05:29,370 --> 00:05:29,650 Yup. 74 00:05:29,660 --> 00:05:32,230 It looks like we definitely have the additional section on here. 75 00:05:32,240 --> 00:05:38,060 But as you might expect we did not set a height or a width to the image right here. 76 00:05:38,180 --> 00:05:41,280 And so it didn't actually show up inside the simulator you know. 77 00:05:41,300 --> 00:05:46,120 Theoretically it's there theoretically the image is there but we did not give it a high or a with. 78 00:05:46,130 --> 00:05:50,220 So it gets condensed down to basically zero. 79 00:05:50,300 --> 00:05:54,100 This time around however we decide on the dimensions of our image. 80 00:05:54,170 --> 00:05:57,320 Things start to get a little bit interesting if you think about it. 81 00:05:57,320 --> 00:06:01,640 Remember I said that we have to specify the height and the width of the image. 82 00:06:01,820 --> 00:06:06,830 But this time we have an image that we want to stretch all the way from the left hand side all the way 83 00:06:06,830 --> 00:06:08,030 to the right hand side. 84 00:06:08,210 --> 00:06:13,040 And that with the right there that is not something that's very easy for us to hard code right. 85 00:06:13,040 --> 00:06:16,210 It's not easy for us to hard code that value and here's why. 86 00:06:16,490 --> 00:06:21,920 We do know in theory you know maybe we haven't really done this but in theory theory we know that with 87 00:06:22,010 --> 00:06:23,850 the device that we're on right. 88 00:06:24,020 --> 00:06:29,040 But then we will also have to add in like the margin over here the margin over here. 89 00:06:29,120 --> 00:06:32,390 And then any internal margin to the card section as well. 90 00:06:32,390 --> 00:06:38,660 In other words it's just really tough to calculate the width of our image we want it to span the entire 91 00:06:38,660 --> 00:06:41,220 width of this card section right here. 92 00:06:41,510 --> 00:06:47,220 So to solve this we're going to use just a little trick with re-act native styling images. 93 00:06:47,370 --> 00:06:49,230 Galleries a little trick. 94 00:06:49,280 --> 00:06:55,220 First we'll add in a new style to our styles object and I call this one just image style. 95 00:06:55,700 --> 00:06:59,150 So then here's the trick I am going to set a fixed height. 96 00:06:59,140 --> 00:07:04,180 Now I'm going to say that's going to be 300 which is a pretty respectable height. 97 00:07:04,190 --> 00:07:06,140 Now here's where it gets interesting. 98 00:07:06,140 --> 00:07:11,030 To make sure that the image takes up the full width available to it you know always from the left hand 99 00:07:11,030 --> 00:07:18,590 side of the card to the right hand side and you throw on a property of flex 1 and a with specifically 100 00:07:18,590 --> 00:07:19,450 of NULL. 101 00:07:19,700 --> 00:07:24,110 So I know you know your thing yourself Stephen Noal is basically like undefined Why do we even have 102 00:07:24,110 --> 00:07:24,680 to define it. 103 00:07:24,680 --> 00:07:25,890 Just trust me here. 104 00:07:26,060 --> 00:07:29,220 I'm going to provide a with of no. 105 00:07:29,390 --> 00:07:32,760 Now I will apply this image style to that image tag. 106 00:07:33,080 --> 00:07:42,380 So I go back up to the last image and I'm going to give it a style of image style and then we also need 107 00:07:42,380 --> 00:07:45,200 to structure this out of our style object. 108 00:07:45,200 --> 00:07:51,970 So scroll up a little bit more find my image or see my style's object right here and I'll also destructuring 109 00:07:51,980 --> 00:07:53,750 out the image style. 110 00:07:54,890 --> 00:07:55,430 OK. 111 00:07:55,770 --> 00:07:59,720 So let's give this a shot inside of our simulator now. 112 00:08:00,450 --> 00:08:03,900 I'll refresh our hot dog. 113 00:08:03,900 --> 00:08:05,460 That is exactly what we wanted. 114 00:08:05,460 --> 00:08:11,370 Our image is stretching all the way from the left hand side to the right hand side as well as perfect. 115 00:08:11,400 --> 00:08:13,910 So let's scroll down to see you. 116 00:08:13,980 --> 00:08:20,220 Wait a minute wait a minute I'm clicking and dragging here which is traditionally how you scroll in 117 00:08:20,220 --> 00:08:24,180 the simulator but it appears that there is no scrolling behavior whatsoever. 118 00:08:24,180 --> 00:08:27,120 So that is definitely not expected. 119 00:08:27,120 --> 00:08:32,270 We have five albums on this list though so I know there are Alban's further down the list but I apparently 120 00:08:32,280 --> 00:08:33,390 just cannot scroll to them. 121 00:08:33,390 --> 00:08:36,170 So we definitely have a little bit of an issue here. 122 00:08:36,420 --> 00:08:40,140 Let's continue in the next section in and explore this bug a little bit more.