Master Responsive Design in React Native: Harness Media Queries for Seamless UIs

in today's tutorial we are diving into the world of react native to explore the concept of response unas we will start by looking at a basic component set up on the screen so in here we need the full area so Flex one so let's add background color red and you can add a safe area view is a component that renders nested content and automatically applies padding to reflect the safe area ins sets the device and this is especially important for devices with notches rounded corners or camera cutouts we can wrap our elements from that and we have to add a style and we have to give the full area for that as well add Flex one for that all right let me change the color you can clearly see what's the safe area is let's create another view add a style change that to box and you have to give it a style at a width of 100% for now and a height increase the height for now we can give a margin from Top let me quickly duplicate this so you can see the scrolling effect you can wrap this in a scroll view okay so scroll View add a scroll view Style we have to import this from react n change this to light blue so we can add a padding here we have to remove the margin top because it's getting double and we can add margin bottom let's make it 20 add a border width if you want so you can clearly you see the edges so you can get Dimensions from react native so you have to create a state variable a new state variable screen width all right using the UST State hook to hold the width of the device screen this is gathered by calling dimensions. getet windowwidth from the dimensions API and this API gives us the screen width according to the device current orientation let's add this to the style you can override the width from here screen withd you can remove the width and check okay let's reduce that by 40 that means the margin and now you can bring this to the center using a line self we change this to top okay and I should have to give a width to other boxes as well can use multi cursor to paste this now take a look at this view right inside our scroll view by setting its width to screen width minus 40 we are ensuring that this view is always centered with a 20 pixel margin on each side regardless of the device width this kind of dynamic sizing is what makes our app look great on any device from the smallest phone to the largest app all right so you can add this to a variable let's say margin all right so in the margin variable we have 40 and margin side variable we have 20 all right let's apply that all right so this is not what we want so it means we have to increase that to 80 change it to 80 this should be 40 there so increase the the height of this box at a B radius and now I'm going to go to the next level of this lesson so let's add some style to our app I'm installing react native media C with Yan this package will help us create responsive layouts that adapt to different device sizes just a simple yarn add react native media cing there we go it's installed and ready for action all right let's import that and you have to remove style sheet from react native because we are currently using the stylesheet from from our new package we can fetch IDs and styles and you can add your break points here the media queries let's add that to the box at media Min width or Max width you can add your rules here so let's add a background color a different background color so it's easy to understand and I'm going to check the screen width of this device and if you want to check that you can console log that let's type text screen width okay 430 take a look at this let me pick a color let me remove this part we can remove this as well for now we can keep only one box all right let's set a view here you can add inner box one let me remove this right okay so we have to style this add a small padding to the Box add a background color at a width and height align the text to the center let's give a small style to the text as well make it bold oneone size should be 20 change it to 25 I'm going to change the color again all right that's okay you can increase the size a bit okay now duplicate that all right now remove the height from the main box so change this to two two give this style number that correctly change the color so take a look at this I'm going to wrap this from another view make it box one two Flex Direction column we can add another one change the style name and the color okay okay let's go and check up a little bit so now what I'm going to do is I'm going to duplicate this you have to remove the third element from the second element set like that and I'm going to wrap this all from another view so this is the first one of the second element set so I'm going to change it to value you can type capital x for that so change the style names this should be five Okay add the fourth one and the fifth one make it white and change the font color to Black so Define a main style for the box next add the 4 five as well change this to 1 2 3 4 5 add a style to that okay now we are going to go to the next level of this lesson you have to add the flex Direction row so you can see that we have to remove the margin all right and we have to add a margin from the left as well we have to make it smaller add Al line self Flex end and a small margin from Top okay now here we have two screens left hand side there's a mobile and the right hand side we have a tablet right so the Mobile screen is okay but we have to fix some issues on the uh tablet screen right so we are going to do that now you can remember we added our state variable screen width recently and it's okay on this device as well so I'm going to copy and paste this here and change this to Max so we need columns only for the mobiles so other devices we have to keep as rows and we have some styling issues as well in the tablet but we can fix that so we have to remove the top margin from the iPad from the tablet I can remove that from here but I have to keep it for the mobile so this is also same and still there have a margin issues if we try we can do something for that as well so add this to the four five box as well okay now I'm going to reduce the width only on the iPad there's a big issue on the close button close button is the inner box five so here we adding the margin top only for the mobile displays so we have a problem in the mobile device let's fix that okay so we can remove this margin top from the first element all right now that should be fine and we have to add a margin only for the iPad we can add a margin here but we have to make sure we are not adding that to the mobile so you can do the same and you can see there's a small space in the right side of the tab of the iPad so we can remove that by increasing the width of the fourth element but we can change the size in the mobile right that should be fine now and there you have it a Nifty trick with Rea native media Cy to keep your layouts adaptive and Polished it's all about practicing these techniques to make your apps UI responsive and seamless on any device and if you found this tutorial helpful hit the Subscribe button we have got plenty more tips and tricks to share and thank you for coding along with me until next time happy coding

Channel: Coder

Views: 1,685

Keywords:

Id: BvZwXYgGCFQ

Length: 42min 13sec (2533 seconds)

Published: Thu Nov 30 2023