1 00:00:00,970 --> 00:00:06,230 In the last video we saw how he could fix this layout issues especially on a small device by adding 2 00:00:06,230 --> 00:00:09,200 in a flex one property to this view element in this video. 3 00:00:09,200 --> 00:00:12,110 I want to show you a slightly different solution we could take. 4 00:00:12,110 --> 00:00:17,000 I wanted to put this alternative solution into a second video especially because this is a little bit 5 00:00:17,000 --> 00:00:19,820 of syntax that we're going to use quite a bit throughout the rest of this course. 6 00:00:19,880 --> 00:00:23,720 And I just want you to have a separate video that you can refer back to in the future to understand 7 00:00:23,720 --> 00:00:25,160 what this thing is doing. 8 00:00:25,250 --> 00:00:29,420 So it turns out that whenever we make use of a view element just as I was mentioning in the last video 9 00:00:29,630 --> 00:00:34,610 sometimes this thing can be a little bit destructive or kind of interrupts the layout we're going for. 10 00:00:34,610 --> 00:00:40,010 In other words sometimes a view element is going to accidentally kind of span off the screen in an attempt 11 00:00:40,010 --> 00:00:41,480 to fit all of its contents. 12 00:00:41,660 --> 00:00:46,340 And in other cases it's going to shrink itself down just to fit its contents which could also have some 13 00:00:46,340 --> 00:00:47,930 really bad consequences as well. 14 00:00:49,020 --> 00:00:54,780 So sometimes rather than using a view every single time that we need to wrap some other number of elements 15 00:00:54,840 --> 00:00:57,090 because remember that's the only reason we're using a view here. 16 00:00:57,150 --> 00:00:59,640 We can only return one element by default. 17 00:00:59,760 --> 00:01:01,240 We could instead return. 18 00:01:01,260 --> 00:01:03,310 Well not an element. 19 00:01:03,420 --> 00:01:08,310 So I'm going to select everything inside of the less than greater than symbols and just delete it like 20 00:01:08,310 --> 00:01:09,120 so. 21 00:01:09,120 --> 00:01:11,470 So I've now got an empty tag. 22 00:01:11,490 --> 00:01:15,830 I'll then go down to the closing view down here and delete the word view from there as well. 23 00:01:15,900 --> 00:01:18,960 So I've got a closing or empty closing tag here as well. 24 00:01:19,480 --> 00:01:24,820 So this is essentially a little bit of syntax that allows us to return a bunch of different elements 25 00:01:25,180 --> 00:01:28,630 but this does not actually render an element on the screen. 26 00:01:28,630 --> 00:01:32,740 So now we do not have some kind of containing element that's wrapping all this stuff. 27 00:01:32,770 --> 00:01:38,190 Instead we've got some kind of invisible thing by using this kind of place holder element. 28 00:01:38,260 --> 00:01:42,880 We don't have to worry about adding in that flex one property all the content we're trying to display 29 00:01:42,880 --> 00:01:47,980 here will be automatically rendered on the screen by React Native but usually or the default that React 30 00:01:47,980 --> 00:01:52,650 Native is going to use here is to not allow any of this content to go off the edge of the screen. 31 00:01:52,690 --> 00:01:58,360 So by just extracting that view and not making use of it anymore we can solve ourselves a lot of issues 32 00:01:58,360 --> 00:02:05,700 in the future it's going to save this and then flip back over Angela notice that I have now got this 33 00:02:05,700 --> 00:02:10,910 same thing we had before so I can still scroll through this entire list. 34 00:02:10,980 --> 00:02:15,000 So in general we like to make use of this place holder anytime we need to return multiple different 35 00:02:15,030 --> 00:02:20,440 elements whenever using a view would actually kind of harm our layout overall. 36 00:02:20,460 --> 00:02:23,550 So throughout this course as I mentioned we're going to use this place holder quite a bit. 37 00:02:23,570 --> 00:02:27,720 Any time that we need to return a grouping of elements and we don't want to have to worry about having 38 00:02:27,900 --> 00:02:32,980 a wrapping view kind of constrain or expand too far to fit all of our content. 39 00:02:33,000 --> 00:02:33,290 Okay. 40 00:02:33,310 --> 00:02:34,220 So let's take a pause right here. 41 00:02:34,230 --> 00:02:37,980 Now that we've added this in and continue with one last fix in the next video.