React Native Tutorial #14 - Flexbox Basics

or rather than gang so this up is looking okay so far but the layout is pretty basic now I know for it to do up you don't really need a complex layout but you might make apps in the future which do need more complex layouts for example a row of content in the top like icons or a grid of pictures or something like that now the techniques we've used so far don't really enable us to do that they just enable us to stop things one on top of the other also we have another problem in this app that we've seen in the past when we add too many to Do's they go off the screen and that's because this flat list down here this is being pushed off the screen by this content at the top now in order for us to fix this and also to create some better layouts more flexible layouts we're going to look at flexbox in react native now if you're from a web background and you understand the CSS then you might already know a lot about flexbox and that's going to serve you very well in react native because it's very similar if you don't know about it already then don't worry I'm going to teach you all the basics now now the best way to do this I think is to create a sandbox component which I've already done inside components just so it can mess around with it and all we've done here is import a few things at the top then we've created a functional component with a text widget right here and an empty stylesheet at the bottom now we need to embed this sandbox inside app jas instead of all of this content over here so what I'm going to do is comment out all of this stuff by pressing ctrl and /and you can see I've already created this sandbox component right here and I've imported that at the top so that's importing the component from sandbox over here okay alright then so over in sandbox now we can start to play around with flexbox I'll tell you what let me first just save app KS so we can actually see this component over here and we should see this sandbox text at the top somewhere there it is hidden underneath this little bar okay so to demo this let me first of all get rid of this text widget and instead we'll replace that with a view widget instead or component if you like I've been spending too much time using flutter and flutter calls them widgets react native cause some components so I sometimes mix those two up but anyway this view will give a style equal to Styles dot container and down here we'll need to create this container style as well so all we're gonna do is give this a padding top first of all of 40 pixels and then also a background color or some kind of grey color will say ddd which is a light gray now when I hit save you're gonna see this over here appear as a strip at the top which is going to be 40 pixels in height and that's because of the padding right here now if I change this to something like 100 it's going to get taller because the space that's being taken up here is just the padding there's nothing inside the view yet okay so let's change that back to 40 now views remember they're a bit like wrapper components right they wrap all the components a bit like a div tag in HTML now out of the box automatically they use flexbox under the hood now what does that mean well it means two things first of all it means I can add a flex property to this and if I set this to one watch what happens over here I'm gonna save it and watch what happens to the gray bar it should take up the whole height of the page and it does and if you can't really tell that because it is a light gray let me change this to a dark one three three three and then save and now we can see we get a dark background all the way down so just adding that's one property flex and set that equal to one what that does is say okay I want you to become a flexible component and flex all the way down to the bottom okay so take up all the available room available to you on this screen and that's what it does okay then so what I'm going to do now is missed a few different things inside this of you over here so these are just gonna be text widgets now instead of me writing out these from scratch boring you let me just paste those in so we can see we have four texts which hits account talent four one two three four and each of those has a style prop now we have style stop box one box two box three and box four so we'll create notes in a minute also we have one two three and four as the text now if I save this at the minute all you're gonna see is one two three four on top of each other right that's normal now what I'm gonna do is come down here and give these some different styles some simple styles to begin with so first of all I'm gonna do box one and all we'll say is this is gonna have a background color and that background color is gonna be violet and I'm also going to give this some padding so padding is going to be ten pixels now I'm going to do the same thing for each box so let me just copy this because I'm pretty lazy and change this to two and the background color of this one is not going to be violet we'll give this a background color of gold and then the next one down here we'll paste this in again this time box three and we'll give this a background color of coral and then finally we'll do box for like so and kind of spell that noop and this will have a background color of sky blue okay so we have these four boxes if I press save we should see the background colors of those now and they should just stack on top of each other no they don't because I've made an error somewhere and that's because there's no such color as caller don't know what I was doing there coral okay so save that and hopefully now we should see these four boxes all with a different background color okay now by default they're all taking up the full width that's the default normal behavior of these things and they stack one on top of the other right and they have ten pixels of padding top and bottom and left and right but you just can't see the right cutting okay so that's the default behavior right here now I said that two things happen when we have flex enabled in views which they are automatically said the first thing is that we can add a flex property right here to make it stretch all the way down the second thing is that everything inside that Flex container now becomes a flex item okay automatically and what we can do now is change the display of these inside this Flex container now the first way we can do that is by adding a flex direction to the container now by default this value is column and that's why we have a column of content stacking on top of each other if I save this then nothing's actually going to change because this is the default value but what I can do is change this to row now instead of column and what that says is look I want these to be in a row not in a column so they should sit side by side instead of on top of each other so if I save this now hopefully we'll see these sitting next to each other and they do one two three four and by default they stretch to take up all the available space now remember before I give this a flex of one if I take that away and save it now then it's only going to take up the amount of space that this container takes up right here okay so adding flex one means that this takes up all the available space and then automatically these will take up the full height of that okay I hope that makes sense so we have these two properties now row and column that we can supply to flex direction and that's going to basically decide in what direction flexbox is going to work is it going to work in a row or a column and remember the default behavior is a column so you can think of these as two axes a main axis and a cross axis now the main axis is whatever we supply to flex direction so in our case it's a row but by default is column and if we changed this to column the main axis would then be : going down and the cross axis would be a row but because we've specified right here the flex direction is ro then the main axis is ro and the cross axis is the opposite axis the column okay now we can add a second property down here and that property is going to be justify contents and justify content kind of determines how these different elements should be spread out in the main axis so in our case along the row at the minute they're bunched up to each other over on the left but what I could do is add a value in here one of these values in fact for example if I go to Center and save that then it's going to move all of these into the center so that's a nice way we can Center these things now if I change this from Center into something else I'm going to say flex and and save then they all go to the end of the row this by default was flex starts so if I save this now they're all going to go back to the left to the start of the row now I can do other things I can do space between and you can probably guess what that does it adds space in between each one of these elements and also I could do space around which is similar but it also adds space on the very left one and the very right one at the sides so if I save this now then we should see that in action and there we go so just using these two different properties we can already create a nice layout with these different boxes so justified content determines how we display the different components on the main axis but remember we also have a cross axis as well so what I could do now is come down here and say align items and this second property determines how we spread things out in the cross axis so I could say sensor here if I save this now check it out over here nothing actually changes okay and that's because the row has elements which are all the same height but what I'm going to do now change the padding of each one of these so 20 30 and 40 so if I save this now then we should see that all the elements have different sizes bought they're all in the center so this one is in the middle of this is in the middle of this is in the middle of this they're centrally aligned in the cross axis now if I change this to the default one which is flex - starts then they're all going to go to the top of the row which is the flex start you can see they're all aligned to the top of the row I can do flex end over here as well like so and they should all now go to the end at the bottom so hopefully you can see how these different properties give us a lot of different control over how to display our different components in rows and columns now like we could have a flex property on the container we can also have the Flex property on each one of these different boxes as well and the Flex property is going to determine how much space this item takes up so for example let me give this a flex of one and let me give the next one of Flex have one as well let me just paste that in and the next one and the next one as well now what this means is that each one of these boxes is going to take up an equal share of the whole space they're all going to be flexible they're all going to flex up to take up all the available room to them because currently there are spaces between these and they're all going to grow at the same rate because they all have the Flex of one and they're all going to grow to that rate imagine we had a piece of pie or cake and we're splitting it up into four pieces and each one has a share of one that's exactly what is happening to the space available they're all going to be able to flex to the same amount of space so if we save this we should see this in action over here and we can see now they all take up the same amount of space in the row horizontally now if I change one of them to flex 2 that means that this one is going to take up twice as much room the rest of them so now if we had say a pie then this is getting two slices this one this one and this one does that make sense it's the same in a flex row we're now splitting this up into five sections because we have two three four five this is getting two of them the rest of them are getting one so if I save that now then box one should be twice as long as the rest of them and we can see that and I can go to an extreme and change this to five save that and now this is five times as big now I can make these all different from one another so I could say the first one has a flex of one then a flex of two for the second one then a flex of one then a flex of three for example save that and they should all have different sizes except these two box one and three which should be the same as each other okay so all of this stuff gives us a lot of flexibility no pun intended when it comes to laying out our content now a lot of this if you've never used flex box before might seem overly complex but really it's not just have a play around with this a little bit and it will all click into place but anyway now we know a little bit about flex box what I'm gonna do is go back to app KS and I'm going to comment out where we have sandbox we don't want that anymore and uncomment all of this stuff here so we can see the original project again and what I'm going to do now is address the issue of this thing down here where these get pushed off the page let me just add in a load of random to do so we can see this in action so that should be enough now if I try to scroll to the bottom I can't and that's because the flat list is being pushed right down off the screen down here by these things at the top now flexbox can help us sort this out so first of all notice we have these three views we have a view up here container inside that we have content inside that we have lists so what I'm going to do is first of all apply a flex of one to contain it in fact it already has that flex of one right so we know that this container right here it's taken up the whole space of the screen is stretching to fill it now the content right here which is this stuff this doesn't have a flex of one what I'm going to do is give this a background color of red just so we can see where this is on the screen okay so we can see at the minute the content goes up to here right it starts here and goes down to here now if I add a new to do then the content is going to stretch to wherever the content goes up to okay and if I add enough then it's eventually going to go off the screen and it's going to go off the screen because this bit up here is pushing it down off the screen make sense now if I apply a flex of one to this then it's only if we're going to take up the available space so it'll go down to here but not beyond it so if I save it now then by default it should automatically go to the bottom of the screen here okay now then what I'm gonna do is give this a slightly better color because red looks horrible to look at and then save it I'm also gonna do the same thing for the list now if I give this a background color or say yellow then we should see where this goes up to this list and remember the list is the thing that surrounds the flat list right here okay so this is the flat list now it doesn't have a flex of one so it's not automatically going down to take up all the room and again if I add loads of different to dues then eventually it's gonna go off the screen now if I move this down we can see it goes off the screen we can scroll a little bit but not all the way to the bottom we can still see another one is being pushed off the screen at the bottom and again that's because it's going off the screen but if we apply a flex of one to this it means okay well take this list container this view and just make an expand to take up what's available in the screen what's left for me to use don't go off the screen so if I save this now hopefully every should work so let me start adding new to Do's and hopefully that should be enough so now we can see it doesn't go off the screen even though I've added loads of them it doesn't go off the screen and now we can scroll all the way to the bottom and they're all contained on the screen so hopefully now you can see the benefit of using flexbox and it is one of those things that you probably do need to learn if you're serious about react native now I'm just gonna get rid of these background colors because I really don't think they do anything for the app and then save it and then we should be back to how it looked originally however now we have these flex items or rather these flex properties controlling how it's being displayed on the screen and it won't ever be pushed off the screen at the bottom

Channel: The Net Ninja

Views: 74,323

Keywords: react native, react, react native tutorial, tutorial, react native for beginners, react tutorial, react native tutorial for beginners, beginners, react vs react native, flexbox, native flexbox, flex, react flexbox, react native flexbox, react native flex

Id: R2eqAgR_KlU

Length: 18min 43sec (1123 seconds)

Published: Mon Dec 09 2019