1 00:00:00,890 --> 00:00:05,390 Believe it or not we've now got a pretty good idea on most of the prime systems around react. 2 00:00:05,390 --> 00:00:11,440 We understand how to handle events deal with props and also update our application using state as well. 3 00:00:11,440 --> 00:00:15,530 So now we're gonna move on to one of our last big topics which is to handle layout. 4 00:00:15,530 --> 00:00:20,060 In other words how do we style or react native app and make it look really nice. 5 00:00:20,060 --> 00:00:24,350 Well first off I want you understand that there are three different systems or kind of three from properties 6 00:00:24,550 --> 00:00:29,240 that we're going to use to control how elements are displayed and react native application. 7 00:00:29,240 --> 00:00:35,690 These three systems are the box object model the Flex box system and a single property called position 8 00:00:36,470 --> 00:00:37,640 with the box object model. 9 00:00:37,640 --> 00:00:40,220 You might be familiar with this from the world of web development. 10 00:00:40,220 --> 00:00:45,530 We're talking about properties like margin border and padding and also the intrinsic height and width 11 00:00:45,530 --> 00:00:47,070 of some element. 12 00:00:47,150 --> 00:00:52,220 We're going to use this box object model anytime that we're trying to position a single element by itself 13 00:00:53,280 --> 00:00:55,740 you might also be familiar with the flex box system as well. 14 00:00:55,740 --> 00:00:58,480 This is also pulled from the world of web development. 15 00:00:58,700 --> 00:01:03,420 The Flex box system is concerned with how we lay out some number of child elements that are all inside 16 00:01:03,420 --> 00:01:05,330 of one common parent. 17 00:01:05,400 --> 00:01:09,690 We're going to use this flex box system and each head that we're trying to position multiple elements 18 00:01:09,720 --> 00:01:12,580 within one common parent element. 19 00:01:12,730 --> 00:01:17,380 And then finally the position property is also kind of talking about how we're going to position a element 20 00:01:17,380 --> 00:01:20,060 inside of a child with the position we're talking about. 21 00:01:20,080 --> 00:01:25,450 One single child inside of a parent in a general we're going to use this position thing and each time 22 00:01:25,450 --> 00:01:30,050 they want to override the box object model or the Flex box systems. 23 00:01:30,180 --> 00:01:35,710 Now in order to understand these three different systems you really have to look at some different examples. 24 00:01:35,710 --> 00:01:37,840 So let's flip back over to our code editor. 25 00:01:37,990 --> 00:01:42,190 We're going to create a new screen and we're going to use it to take a look at this a box object model 26 00:01:42,190 --> 00:01:46,640 system will then go through flex and then position all right. 27 00:01:46,640 --> 00:01:51,950 So back inside my code editor I'll find my source screens directory and inside there I'm going to make 28 00:01:51,950 --> 00:02:00,890 a new file called Box screen dot J.S. will then throw a little bit of boilerplate in here as usual so 29 00:02:00,890 --> 00:02:12,250 we'll get react from react we'll get text you style sheet from react native I'll create my component 30 00:02:12,490 --> 00:02:21,330 that I will call box screen and as usual right now I'll return a View element that shows a piece of 31 00:02:21,330 --> 00:02:29,430 text that just says a box screen and then underneath that we'll create our style sheet. 32 00:02:29,500 --> 00:02:32,800 This time we definitely do want to create our style sheet because we're going to be playing with these 33 00:02:32,800 --> 00:02:36,730 three different systems using some properties that we're going to add into a style sheet. 34 00:02:36,820 --> 00:02:42,970 So let's say con styles is style sheet create the empty object. 35 00:02:43,010 --> 00:02:44,980 Then finally we will export default. 36 00:02:45,170 --> 00:02:47,350 Box screen OK. 37 00:02:47,360 --> 00:02:49,870 So there's our little boilerplate all put together. 38 00:02:49,880 --> 00:02:54,850 So as usual what's now hook this thing up with the button to our home screen and our app dot J.S. file. 39 00:02:54,890 --> 00:02:57,180 Let's start first with the app file. 40 00:02:57,180 --> 00:03:05,700 So inside of app dot J.S. at the top we will add import box screen from 4 source screens box screen 41 00:03:08,580 --> 00:03:16,320 and they'll add that into my navigator object so I'll say box is box screen we can save that file. 42 00:03:16,330 --> 00:03:19,030 And then finally we'll go to our home screen. 43 00:03:19,210 --> 00:03:21,170 I'll go down to the very bottom. 44 00:03:21,430 --> 00:03:29,560 I'll copy paste the last button I'll update the titles so go to box demo and we'll change the navigate 45 00:03:29,560 --> 00:03:33,520 call to box as well get set looks good. 46 00:03:33,520 --> 00:03:36,240 I'm going to go back over to my simulator. 47 00:03:36,240 --> 00:03:37,020 There's the new button. 48 00:03:37,050 --> 00:03:40,610 I should go to tap on it and see box screen appear very good. 49 00:03:40,640 --> 00:03:41,850 Let's take a quick pause right here. 50 00:03:41,850 --> 00:03:45,840 When we come back the next video we can talk a little bit more about what the box object model is and 51 00:03:45,840 --> 00:03:48,570 start to play around with it inside of that new component we put together.