Responsive Design in React Native | Responsive UI | React Native Tutorial

hello everyone welcome back to another react native video and today I'm going to teach you guys how you can make your react native apps responsive this topic is very important because if you want others to use your apps or if you want to build apps for your clients then they might have design issues on their devices so you need to make sure that you make your apps responsive so that design looks the same for all of the devices so let's get started go to react native website and hit get started then we have two types of configuration but we'll be using Expo because the process is same for the CLI as well so we need to copy this command and paste it into the terminal right here and let's just change the project name to responsive layouts and hit enter this is going to take a couple of seconds to load all the library files this basically depends on your internet speed so let's wait a second okay it's finished now we can close the terminal and open the project into our vs code so let me just drag that here this is a project that we just created so let me just make the window bigger and make room for the simulator so first thing we need to do is run our project and that we can do using npm run IOS command this will create an iOS build and send it to Expo and that will run on our simulator okay our simulator is running let's wait a second okay the app is running and you can see the app component here this is the default component so let me just make it a little bigger okay so this is our app component and if you make any change here this will hard preload and update all the changes in the simulator so if I remove this and type here code with Nomi and save it you can see the changes in the simulator so we are going to have a responsive layout here and for that let's create a mock-up first first we're going to have a header so let's add a comment then we're going to add a view with the styles of header don't worry about the style we will create it later then let's add a main View let's add a view and give it a style of styles dot Main and inside this we're going to have two sections for the content so let's add a view and give it a style of section one and we're going to copy this one for the section two let's change the style to section 2. then we're gonna need a footer as well so let's add a comment for the footer and let's add a view with the style of footer buddy like this okay so our mock-up is complete but you won't be able to see it because we need to style it I'm going to design it very badly to show you that why you need to make your apps responsive so let's give our container a height of 500 and let's add tiles for our header and give it a height of 180 pixels and a background color of tomato so that we can see it okay so you can see the header style and this is looking good now we're gonna add styles for the main section so let's add styles for the main and let's give it a height of 500 as well and we're going to display it flux and flux traction is going to be in a row because inside this we have two sections and we need to show them side by side so let's add styles for this section let's add a section one style and let's give it a width of 200 pixels and a background color of orange okay so you can see the section one and it has a orange color and we have designed this view that has the section one style now similarly we're going to add the styles for the section 2 and section 2 is also going to have a width of 200 pixels and a different background color of sky blue okay the main section is looking good now we're gonna add a style for the footer so let's add footer and give it a height of 180 pixels same as the header and let's add a background color of light green okay so design is complete now let's discuss why this approach is really bad let's say you build this application for your client and you it's working perfectly on your device which is iPhone 14 pro but your client has a different device which is let's say iPhone 14 pro Max and iPhone 14 pro Max is a bigger device so let's run this application on this phone and let's reload let's just copy this address and run this manually just open the Expo app and paste the address here and hit connect okay now you can see the design difference and your client will be complaining while your design is looking so bad so let's say another client of yours has an iPad Pro and let's run this application on iPad Pro and this iPad is a lot bigger than the 14 pro and 14 pro Max so let's see how this application runs on this device let's open Expo and paste the address here so now you can see the design on iPad Pro and it's looking a lot worse than the iPhone 14 pro and pro Max now we need a way to make this responsive so that the design looks the same on all of the devices and for that we're going to use a library and this library is called react native responsive screen this is the library and we can install this Library using this command so let's just copy this command and open a terminal let me just make it a little bigger open a terminal and paste the command here okay this is installing now let's see how we can use this library and this is the example of how we can use it with style sheets so first we're gonna import WP and HP method that stands for the Which percentage and the height percentage of the current device and we can use it like this if we give HP of 70 that will mean the 70 height of the current device and same goes for the wp method and we can even use it for the font size as well if we give HP of five percent that will calculate the five percent height of the current device and then we will have a design just like this example so let's use this Library into our component first let's copy this import statement this Library uses the dimensions object from react native which is also used to make our app responsive this gives us the height and width of the current device so let me show you what I mean we can get the height and width from the dimensions object and we can call the method get using Windows and this will give us the height and width of the current device in this case we have iPhone 14 pro and we can use this height and width to make this responsive like if I give the height multiplied by 1 this will mean the total height of this device and if you are using this method then you're already on the right path because this will also make our app responsive but I'm going to show you how you can use this Library this Library also uses the dimensions but I don't want to confuse you guys with all these calculations so let's use our HP method that stands for the height percentage and give it a value of 100 and that will mean 100 height of the current device if you have another device like 14 pro Max then it will take the full device height so let's change the height for the header to HP 15 and that will mean the 15 height of the current device you won't see a lot of differences because the header is looking the same on both the devices but when we style this main section then you will see the real difference so let's give height of 70 to the main section now the main section is responsive on both of these devices and have a 70 height now we need to style our Section 1 and section 2 and we need to make them both the same width so let's use our WP method and give it a value of 50 so that it has the total width of 50 percent and same goes for the section 2 as well let's give it a 50 value of WP now we have made our header section and the main section responsive and that's because we are no longer using static height and width properties now we're using the height percentage and width percentage of the current device and that you can see on all of the devices now one last thing left to do is make our footer responsive because it's still using the fixed height so let's give it a value of HP 15 so that it takes a 15 height of the current device now we have made our application responsive for all of the devices and this will work on all of the devices no matter what device you are using so now you've learned how you can make your react native apps response using height and weight percentages but this is not the only way you can make your apps responsive you can use flexbox to make responsive layouts so next I'm gonna show you how you can create a responsive layers using flexbox and using flux is very simple you just need to know some of the basics and then you can create very complex layouts with it so now let's remove our height and width and add flux values so let's add Flex 1 for the container and that will mean it can take all the space that it can have and if I add flux 1 for all of the containers then it will mean that all of the container will look the same so let's add Flex one for the header and the footer you're not going to see a change because our main section still has a height of 70 percent so let's change this to flux 1 and when I save this you will see all of our section will have the same height and that's because they all have the flex one value and if you increase the flux value for the main section then it will take more space than the other such so let's make it do now it has more space so the idea is if you want to make a section bigger then just give it a value of flex higher than the other sections I'm going to make it 4 and see if our application is still responsive on all the other devices as well so the iPad is looking good and the 14 pro Max is looking good and our application is responsive now our section one is section 2 are still using WP method so let's change them and add flux value of 1 here and flux value of 1 for the section 2 as well now let's say I want to make our section to a sidebar and section 1 the main content so I will increase the value flux to 2 and now it's taking more space so let's make it three now the main section is our section one and the section 2 is like a sidebar and that will follow on all of the other devices and it will look responsive if you want to have a gap between all of these sections then you can do that easily by using the Gap property so let's add gap of 4 pixels and it will add a gap between the components that you can see here but this is the main component and we need to add the Gap property for the main style so let's add cap and give it a value of 4. now we can see the gap between all of the components now the sections are in a row because we're using Flex Direction row property so if I comment this they will be converted into a column format now let's say if I want to increase the size for the section section 2 and decrease for the section 1 so I'll give the flex 1 to the section 1 and Flex 3 to section two now they both have the opposite sizes for both of them and it's looking responsive on all the other devices as well so this was how you can make responsive layers but now I'm going to show you how you can make your content responsive so in the section 2 I'm going to add a text View and add some dummy content now we're going to style this content so let's add a style property now let's give it a style value of styles content let's add it here in the style sheet and before I style it I need to show you how the content is currently looking on all of the devices and for the smaller devices it's looking almost good but for the bigger devices like iPad you can't see it clearly and even if I make the device little bigger like this are you still can't able to see it and it's very readable so we need to fix that and for that we're going to style it responsibly using this library but before that let me add a static style to see how it looks on all the devices so let's add a value of 30 pixels now it's going to be readable on the large devices but for the smaller devices as you can see the text size is very large so this is not the correct solution so we're going to use our library to make it responsive so let's use our WP method from this library and let's see how this goes and let's give it a value of 5. now the text is looking good on the smaller devices but on the bigger devices it's a lot bigger so this is not the correct solution as well because the bigger devices has a large width so the final solution is to use our HP method from this library and this will utilize the height percentage of the current device so let's use HP of value 2. now the text size is looking good on the smaller devices so let's see 14 pro Max okay it's looking good now let's see the bigger devices and the content is readable and it's not too large or too small so this was how you can create responsive layouts and responsive contents if you find this video helpful do like the video and subscribe the channel this will help me a lot and if you still have any questions about anything you can ask them into the comment section and I'll try to answer them as soon as possible I'll leave the link of the GitHub repo for this project into the video description so you can check out the code and give it a start so this is it for this video see you in the next one

Channel: Code With Nomi

Views: 17,297

Keywords: react native tutorial, react native ui design, react native tutorial for beginners, react native app, react tutorial, react native project, react native crash course, learn react native, react native ui, react vs react native, react native, react native expo, react native for beginners, javascript, react native animations, react native vs flutter, build a react native app, react native full course, react native responsive ui, responsive design, ux design, react js, react ui

Id: GnhbZbPb6uo

Length: 14min 3sec (843 seconds)

Published: Wed Aug 09 2023