How to Create Responsive Layouts in React Native

hello welcome to cheetah coding so i wanted to create a video to show you how easy it is to create responsive layouts in your apps sometimes you want different layouts in both portrait mode and landscape mode so as you can see with the app that i have here i created a very simple app that has a list view here and two buttons the buttons don't do anything so the focus of the video is just to get this looking a little bit better in the landscape mode so as you can see here if we turn to landscape we have the same layout being shown here two buttons a title and a list here okay so eventually i want to have the text buttons and list looking better in this landscape view here okay so let's go back to the app and real quick i will show you what we're doing i have the theme here for the colors and i have the stack screen with a responsive layout title here in the home screen i have container title so i created all these in style components i'll be showing you how to pass certain variables to your style component too so we have button container cheetah button if you look here we have button container cheetah button down here okay we have our wrapper here for our container and text here too okay so back to the home screen we have cheater button so the button width is one third of the screen width here for each button and you can see here i'm passing in the width and then i am passing that into the actual styling for that component okay so i hope that makes sense uh if you don't know much about style components i did a video about it on my channel and the link to that should be at the top of the screen now so let's go back to the home again so i have the list which is a flat list i'm adding some random languages here and that's it so the first thing i want to do is i want to create a new hook so a hook is a great way for you to so a hook is a great way for you to add more functionality to your app that you can import in and use in different classes okay so first i'm going to create a new folder here and name it hooks so in here i want to create a new file and i'm going to call it use orientation dot js okay so this will be our hook and i always start the hooks with use just because that's the convention for the react library okay then i'm going to say export default use orientation and then we're going to return first i'm going to create a use state hook and this u state hook will listen for our dimension change so as we switch from landscape to portrait and back and forth then this use date hook will get updated okay so let's create it so i'm going to say constant and i'm just going to call it a screen info and then i'm gonna say set screen info okay so that's our tuple here for the use date and equals use state okay and then here we're gonna get these green dimensions so i'm gonna say dimensions dot get and then the keyword for this is screen okay so there's screen and window for your dimensions that you can get okay so this will get the screen dimensions okay so let's go down here and now i want to create a use effect hook so i'm assuming already that you kind of already understand uh use state use effect and so on for hooks but if you don't feel free to ask questions in the comments so i'm going to say use effect then return our data here let's do our constant one change so this will be our callback when the orientation gets changed so equals and then we get back a result i'll call it result result and then i'm going to set our state information here so with so set screen info here so set screen info and then result so the actual field will be screen dot screen so i will explain more about what this is all doing after i'm finished but so down here now i'm going to add the event listener so we can listen for different events in react and this one will be dimensions dot add event listener so this class dot add event listener and then the event name is change as you can see here we have add event listener type change here okay and we can use our handler for window or screen and our handler is this function here the one change okay so change and then pass in or on change callback and then i want to do the return here for our use effect so return a function dimensions dot remove event listener so we're adding it here and then i want to remove it here and remove the same listener make sure these are the same here and then i also pass in the one change okay so that's our use effect hook so real quick to go over this the use effect hook takes care of different lifecycle methods in your react app so when our component is unmounted we will remove the listener when it's added we will add the event listener here and then the event callback here is this function so when this event fires the change event then we call this function here to set the screen info in our use date based on the result.screen and when we set this screen info our component will get rebuilt okay and that's what we want we want the actual component to get rebuilt when you turn the screen so down here to finish off our component or hook i should say uh then i want to return whatever info we want to use for the hook so i'm going to say return and then here you can return whatever you want to so if you just want to know whether for example like the height is bigger than the width then you can return screen info so that's from our you state here you can say if that height is greater than screen info dot width and that could be enough for you but for this video i want to return an object and first i'm going to return the actual screen for itself so i'm going to do a spread operator and say screen info return whatever all this data is so you will see what we get back from the result that screen here but it's kind of a lot of information and i'm just going to do a spread operator so we can see that in the log and see what we actually returned okay and then after this i want to return the actual flag that we'll pay attention to and that would be the is portrait is portrait so i'm gonna call it it's portrait and then there i'm going to actually do my condition saying screen info height is greater than screen info dot with okay so it's pretty safe to say that if the height of the window or the screen is greater than the width then we are in portrait mode and that's all i really care about for this flag here so that is actually the hard part of the video everything else is actually pretty easy because everything else just involves us actually using the hook okay so let's go back to the home screen and first i'm actually going to change this to a normal function so i'm going to do export default and say function let's get rid of this navigation too i don't need that and brackets okay and then i want to return this here and up here i want to actually use our hook so constant let's call it orientation it really is more than that but we'll just say orientation equals use orientation so we need to go back to the hook and import use effect here okay so back to the home screen so use orientation and the first thing i want to use it for is the width of these buttons so before we were just saying width divided by three but now we're just going to do orientation that width divided by three which is actually the same thing but since we already have the width defining the hook we might as well use it here okay so save reload okay i think we're good so let's rotate the screen and it says can't find variable on change so let's go back to this and i forgot to capitalize the the own change here okay but actually that was good to see because you saw when we tried to rotate the screen then the component was actually dismounted which invoked this return statement here so that's why we got that error on this line here so let's reload now let's rotate let's put in a bracket here okay so now you can see that it is taking up one third of the space here so this is actually pretty important because it tells you to only run this one time so that's why we were getting that error when it rotates one reason was because this handler was not defined correctly and the other reason is because we were calling this use effect multiple times and this ensures that it's only called one time and now you can see that the buttons are always one third of the screen no matter what orientation you are in okay so let's go back to the home screen again and you see we have our orientation.width divided by three here so let's say i want to have the buttons be vertical in landscape and horizontal and portrait and you'll see why i want to do that later but for now i'm going to have that be the case so i'm going to create a new prop and i'm going to play inside of the button container here so i'm going to say is portrait equals that orientation so orientation dot width or sorry not orientation with orientation dot is that is portrait okay because we have that defined here and you'll see that we have width height and other stuff here too um okay so let's save and let's log that now so console.log orientation just to see what that is and you can see here for the return object for our user orientation we have font scale height width scale and we added the as portrait here too okay so it all creates one object by doing it this way so that's why we could do orientation.with here okay we can get rid of that so we have orientation. is portrait and we're passing that into the button container so let's go to the button we have flex direction row here so instead of just saying row i'm going to pass in the props and again this is only something that you can do with starter components it's a little bit harder to do this kind of stuff with the normal style sheet but you can do it but i'm going to focus on these stock components in this video because i love style components so we have props if props is portrait remember to spell this right then bro else so it's a ternary operation do column and this has to be in quotes here so save let's rotate and now you can see we have column here so already our app is showing a different layout for landscape in portrait okay so you can also see that the buttons are aligned left here but i want them in the center so doing that is pretty easy with stock opponents you can say align items center and if you're using style sheets you would have a line items like this i think yeah okay so align items dot center so now you can see we have center buttons and both portrait and landscape mode so already looking pretty good now the biggest ui change i want is i want to have all this stuff here the title and two buttons on the left side here and i want the list on the right side so doing that is actually pretty easy i want to create some new styles because going back to our home screen as you can see here we have everything instead of our container here so we have title button container and flat list so this is all kind of in a column here but i want to group the title and the two buttons together because i want those to all be in one place on the left here so i'm going to create a new component around the title and the button container so let's go to the wrapper class here the style here and i will create a new style component here and i will call it export constant i'll call it header container because this is kind of like a header part i guess header container equals styled dot view and inside of here i want the flex direction to be a column because we have this and we have this so it'll be flex direction column and first we'll see how this looks so i'll save this and then back in our home i want to wrap that around our title in our button container so header container wrapped around here okay and i need to import that from our wrapper so header container okay so as you can see nothing has really changed visually but you'll see why i did that in a bit so now i want to create a styling for our container here so we have our container style here and i'm going to rename this to uh let's do home container just to be consistent with the naming here so home container on container [Music] container okay and i missed something oh i forgot to save it so let's save there we go now i want to add some flex direction to this so let's go up here and i want to say flex oops flex direction and this will be based on the props that is portrait so i'm going to say dollar sign props props dot is portrait so we still need to pass that in here too but for now we'll do portrait column because this and the list is all in the column so column else bro save and now you can see that this is a row because its portrait is false okay so let's go back to the home screen and pass in our is portrait is portrait equals orientation is portrait okay so now you see we have a column here for portrait and in landscape we have this part here and this part here so we are very close to how i want this to look so let's go back and now in the header container let's say i want this to take up 50 of the screen so half this half the list that's pretty easy we'll pass in the is portrait here too and now i want to set the width of this to be half of the screen in landscape mode so i can say with and we can pass in our props here again so props oops props props dot is portrait and if it's portrait mode it could just take up the entire width of the screen that's not a big deal like this here so i can say 100 percent else i will say 50 and i think i'm missing something here oh yeah okay let's go back to home so save and now you can see it looks the same in portrait let's go to landscape mode and i can see 50 we have our list here working the same as before okay so that looks a lot better now the rest will just be making it look a little bit prettier so in landscape mode i want to add a divider here too but only in landscape mode so down here between the flat list and the header container i want to create a divider so creating a divider is just a view that has some width or height only so down here i want to create some brackets because i want to have a condition for the component i want to say if we are not if we are not in portrait mode let's put through it then i want to show a view and then instead of creating a style component for the view i'm kind of lazy right now and i want to save time by just creating the style here so i'll create the view with a style prop and i'm going to say background color for this will be white and i want the height to be the entire height of the screen here so i want the height to be 100 and for the width one for now so width could be one terminate our component here then i want to say if it's not portrait mode or sorry if it's not a landscape mode then i would just have null here so we'll just not show anything okay and we have an error i need to import the view for react native so we'll do view and you can see for landscape we have the divider for portrait no divider and as you can see here the divider really doesn't look quite right because it has a margin here and that is because our home container has a margin so the entire container has a margin at the top so i want to get rid of this margin let's see how this looks so the divider is there um this doesn't look quite right so let's just add some margin here too so i want to say margin top and let's add maybe like 30 i don't know 36 px see how this looks okay that looks a lot better let's try 40 yeah that's fine so 40 but keep in mind this will show this margin will show on the portrait mode too so let's see how that looks there yeah that looks good yeah oh uh one more thing if you want to see how to do this without stock opponents then like for example in the view here you could say if orientation dot is portrait then you could say one or two so if you want to style your components based on the field without style components then you need to do inline styles that's why i don't really like inline styles in general style components is definitely a very nice tool to have in your toolbox so one more thing before i finish i wanted to import the use orientation into the list item here where is it at the list item i want to change this to a function so export function and return the list item container so return and i want to import the constant orientation equals use orientation and i want to make the list size a little bit bigger in portrait mode so let's pass in the is portrait is portrait you can call this whatever you want to but i'm just naming it as portrait in all of these style components so it's portrait equals orientation dot is portrait and then inside of the list item text component here i want the font size to be based on the its portrait flag so props and then props that is portrait if it is portrait i want to have the font be bigger like 30 px i guess and then for landscape let's make it smaller maybe 22px like it was before save now you can see the text is bigger now and then it's smaller in landscape mode okay and if you're not sure that it's bigger let's make it really big let's do 40 and that should be px and i can see the text is really big in portrait and 22 in landscape so you can see how easy it is to create very responsive layouts if you use a combination of hooks and style components if you want to see more of these types of videos where i show how to create different responsive layouts let me know leave a comment message me on facebook etc so stay tuned for the next video and happy coding bye

Channel: The Flutter Factory

Views: 5,185

Rating: 4.964602 out of 5

Keywords: cross-platform app tutorials, cheetah coding, react native responsive layout, react native useEffect, react native orientation change, react native addListener, react native landscape UI

Id: 1dpyHY--bVQ

Length: 23min 52sec (1432 seconds)

Published: Sun Mar 28 2021