Responsive Design in React Native // Mobile App Development

in this tutorial mobile development we will take a look at how we can create responsive designs in react native so let's go Now by default the flexbox layout that we have looked at in react native does a great job tackling some of the challenges with responsive design for example if you were to create a two column layout with the fixed width item on the left and a flexible item on the right we can do that quite easily by giving the left item a fixed width for example a width of 100 and giving the right a flex of 1 so that it flexes into the remaining space now when we bind these styles to two views you can see that it works as you would expect we have a pink left of 100 and a blue right taking up the remaining space and thanks to the nature of flexbox this layout is a bit responsive for example if we swap from portrait to landscape you can see that blue expands to fill up the newly provided extra space however the challenges for that fixed width item what if you want to increase it from 100 to 200 if you notice that the screen is really wide for this we would need the window dimensions at any point in time we can actually get the space that is available for app for rendering by using the react native provided built-in Dimensions module so we can import Dimensions from react native and then instead of providing a fixed width we can get the dimensions for the window get its width see if it is too big for example greater than 500 and if so provide the width of 200 otherwise to fall to the previous value of 100 and indeed it does increase the width of the sidebar however there is a minor issue if we swap back to Portrait the dimension for the left section does not go to 100 unless we refresh the app to render it again this is because we are not subscribing to the changes only reading them on initial render of our app in addition to swapping between landscape and portrait subscribing to layout shift has become even more important with the Advent of foldable devices now there is an event listener that we can attach to provided by the dimensions module but for react developers there's a better way in the form of a hook that takes care of the subscribing and the unsubscribing for us this Hook is called use window dimensions and it is a core export from the react native module now instead of creating a Styles only once at the root of the module you will actually create them within a custom hook call called you Styles and you are free to call it whatever you want but within this custom hook we are going to use this use window dimensions hook and this hook returns width and height and now we can use this to create our own style sheet and customize it based on the available width and height for our use case we are only using the width property to see if it is more than 500 and if so we give the left section A width of 200 otherwise we give it the width of 100 so with this custom hook in place whenever we want to use tiles we have to invoke this EQ Styles hook to get the Styles and these Styles will automatically change thanks to that use window dimensions hook Whenever there is a layout shift in the window dimensions and we can see it in action as we toggle between landscape and portrait mode notice that while we are in landscape mode the pink portion is looking bigger than it does in the portrait mode as always thank you for joining me smash that like And subscribe for more developer tips and I will see you in the next one

Channel: basarat

Views: 18,773

Keywords: basarat, typescript, javascript

Id: UT_X6P_tUAk

Length: 3min 20sec (200 seconds)

Published: Wed Feb 01 2023