A guide to Flexbox properties in React Native

when you're going to build your layout in your react native app you're going to be using what's called flexbox to build that layout and this is a opt-in feature typically on the web but it's something we get by default and before we can really dive into it something we want to cover is differences in the defaults between the web and react native because there are some important differences you can see those here basically on the web you need to specify when you're using flexbox whereas with react native it just happens by default the default flex direction is going to be row on the web and column in react native align content on the web is stretch on react native it's flex start and then finally flex shrink on the web is one and flex shrink on react native is zero so basically these defaults that you see down here that i've specified there's no need to specify those beyond just being very clear in your styles that's what you're going to get for free so with that said let's go over a few of the key properties within flexbox when building a react native app okay so first thing is the flex property and the flex property determines how much of the view a component actually takes up so in this case we've specified flex one and because there's only one thing that specifies the flex there's only one segment we need to factor in so one out of one is one hundred percent now if we go ahead and add another view that also has a flex property on it let's just go ahead and copy this one and we'll give it a different background color so we can see the difference you can see we've got two segments one plus one is going to equal two and each one of these segments is going to take up one half of the screen now if i bump up the flex property of this blue segment to a three that's going to give us basically four units we need to factor in and then we can use that flex to determine three out of four it's three quarters so it's going to dynamically update that and then flex one will take up one quarter of that so we can kind of build dynamic layouts by using the flex property okay and now moving forward i've added a bit of code here basically it's just four squares that are being rendered and the big thing here we've got our flex directions is the property we're actually talking about and that determines the direction the children should render if we remember back to the default we know our default is going to be a flex directional column which means they're going to be rendered vertically in a column as we can see here now ignore the align items and justify content we'll get to that in a moment but with flex direction if we want to change it from rendering in a column to in a horizontal row all we need to do is go ahead and switch that over and i'll go ahead and update the direction our items within this container are actually being rendered alternatively and this is hard to visualize because each one of these squares is exactly the same actually here let's go ahead add another background color of red to one of these so we can see we've got our three squares in a row here we can actually go ahead and specify the flex direction of row reverse and then i'll go ahead and render those in the opposite direction so you got a handful of different options on how you want to render things using the flex direction property okay next thing we have is justify content we've got the same example just changing up our styles for our container a little bit here now justify content is going to determine the content along the primary axis where that's aligned so the primary axis axis is determined by the flex direction so right now we've got justify content center along the flex direction of column which means it's going to be centered vertically if i were to change the flex direction to row we're going to see it's horizontally centered so justify content works around that primary axis which is determined by flex direction now we've got different options so we've got center here let's go ahead and save this back to flex direction you could also set this to space around which is going to maximize space around each element so between the elements and their boundaries or we could maximize the space between the elements if i type that right so you can see we're bumped all the way up to the top and bottom but we've got as much space between the elements as we possibly can alternatively you could set it to flex start which is the default that's going to put everything at the top or flex end which will put everything down at the bottom okay next let's go ahead and take a look at align items and align items determines how an item should be rendered along the secondary axis and that is also determined by the flex direction so say you want to vertically and horizontally center something you're going to use justify content and align items in combination because one justify content works along the primary axis and one works around the secondary axis so just like flex or justify content we've got the same properties for our line items we could say flex end and we can say that's going to put those over to the right we could say flex start that's going to put it to the left again along the secondary axis so if i go ahead and switch our flex direction and set this to row you can see it's going to flip it align items is now affecting our vertical our column whereas justify content is affecting our flex direction of row so we've got it centered horizontally and it started at the top here so it can get a little tricky but basically if you want to horizontally and vertically center something you're going to need to use this justify content and align items okay so we've determined we've got justify content and align items those are going to center things for us what if we want to affect just a single element well we could go ahead and use the align self property which rather than being on the container is going to be on an individual element to determine where it should be laid out so if i go ahead and use an array here of an array of styles i can go ahead and add an align self these are going to take the same properties as align items we could say we want by default everything to be centered but we want the second element i want this to be at the flex star so you can see that that's going to override our align items and bump that content to the left likewise i could go ahead and add a line self of flex end to the last element and that will bump it over to the right okay so that was a lot of talk about individual properties on their own what about actually building a layout with flexbox well let's go ahead and build this basic grid using flexbox so if we take a look at this we can see we've got nine squares each one having a letter inside of it so i'm going to create a square component to render these and that's going to take a text prop in which we'll go ahead and render a view and we'll put text in there with our actual text content so now i can render my nine squares a b c d e f g is that all of them no we need h and i okay so we've got all of our squares well we've got the components so we've got these defined let's go ahead and actually add styles to our square now so we need to add a style property to our view i'm going to say styles.square then our square is going to have a width of 100 height of 100 going to give it a border width of one border color of white and then we want to justify the content inside of there to be vertically and horizontally centered so that our text is centered okay so we're seeing all of these let's go ahead and add a style in here as well and say the color of the text is going to be white as well okay so we can see this is we've got all of our squares running but it's not in a grid well first thing we know is we need to break our view our column into multiple rows so let's go ahead and break these into sections of three we'll just go ahead and wrap those abc in a view let's add a style equal to styles.row here and we can do the same around d e f and g h i as well now let's add styles to our row and if we remember we can specify our flex direction which will change the default from column to row and then we've got things set up in our rows and with just a few properties we've gone ahead and determined okay we've got a container we want all of our items to be vertically and horizontally centered by using align items and justify content center we also specified our container should take up the whole view by using a flex one then we've gone ahead and specified with our rows that we have elements in and inside of those rows they should be rendered horizontally using flex direction row and then finally within our squares once again we used justify content center and align item center to vertically and horizontally the text inside of it and that's a quick intro to using different flexbox properties these there's a lot more flexbox properties and i'll have a link to the flexbox docs from react native on more that you can do with them but really this is going to cover 80 percent of your layout needs using flexbox

Channel: React Native School

Views: 7,888

Keywords:

Id: NFS2m6vl-VQ

Length: 9min 28sec (568 seconds)

Published: Tue Jun 15 2021