Create Responsive Design In React Native
Imagine implementing super complex functionalities and creating an excellent performing app with an elegant and engaging user interface! It would seem like your job is done, and now it’s time to celebrate. But wait! What if you test it out on another device and, all of a sudden, your UI breaks? It would hurt, right?
Today we have hundreds of devices with dozens of different dimensions, making it pretty difficult to calculate the comprehensive height and width of our components. As cross-platform app developers, things are even worse for us as we need to deal with Android as well as iOS devices 🥵.
“If you believe good design is expensive, you should look at the cost of bad design.”
If you’ve been in the IT industry for quite some time or in any other industry where user experience depends a lot on the user interface, then you can definitely agree with the statement above. Some of you might have even experienced it!
If you’re a newcomer to such an industry, then here’s a heads-up for you 💁♂:️ Don’t ever take UI for granted ⚠️.
So, to nail it with responsive design💥, here are a few points you can follow while developing your user interface:
1. Dimensions
2. Flexbox
3. Percentage
4. Aspect Ratio
5. Platform
1. Dimensions
This comes by default with React Native. All you need to do is import it. It has a method called get that will return the dimensions of the device on which the application is running. You can then size your components with respect to it.
For the ease of its understanding and application, we’ve created a helper file called Metrics.js📜 which goes as follows:
It gives us access to three functions called horizontalScale,verticalScale, and moderateScale, which takes a single argument of type number. To use them, all you need to do is pass the pixel value you wish to give to your component.
It will then return a number that is calculated by dividing the height and width of your device (which we get from the Dimensions API) by the guideline-based width and adding the pixel value you passed to the component. This calculation will ultimately return a number (pixel value) that is equivalent to the static pixel value we’ve given for that particular device.
Example:
- Here’s what our UI will look like on the different devices:
Just like the Dimensions, we also have a hook called useWindowDimensions to get the dimensions of our screen. And unlike Dimensions, it automatically updates width and height values whenever screen size changes, like on device rotation or opening/closing of the remaining screen in foldable devices.
2. Flexbox
It is the default layout type in React Native. It will automatically calculate the size of the device and adjust the component accordingly. It works in the same way as in CSS on the web, but here the default flex-direction is 'column'. Some of the major properties that’ll do your work most of the time are flex, flex-direction, justify-content, align-items, and align-self.
Example:
Suppose you want a container to take up the entire available space and place its child components horizontally in the center. Also, you want to give some arbitrary space around them so that the UI doesn’t look too congested.
You can achieve that by using Flexbox as follows:
- And this is what our UI will look like on the different devices:
3. Percentage
Another way you can make sure that your components look the same on each and every screen is by using percentages. Instead of hard-coding a component’s dimension in pixels, you can specify the percentage of the screen it should take.
Hence, on every screen, our component will look the same as it will always size itself with respect to the percentage of that particular screen.
Example:
Suppose you’ve got two components, and one of them should take one-fourth of the width of the screen, and the other should take the remaining width. Then you can provide width to those components like this:
- Here’s what our UI will look like on the different devices:
4. Aspect Ratio
An aspect ratio is — a proportional relationship between an image’s width and height.
Setting the aspect ratio of the component to something (say 1/2) is basically telling the component that it can grow or shrink as much as it wants according to the space available, but its width to height ratio should always be 1/2. In other words, the height should always be twice the width.
Example:
- And this is how our cat will appear on the different devices:
5. Platform
In most cases, our components look the same on Android and iOS devices, but there are a few exceptions where our styles look perfect on Android devices and may distort on iOS devices or vice-versa. To handle such cases, we can use the Platform API provided by React Native.
It comes by default with React Native and gives us access to information like the device’s OS, OS version, iPad, TV, etc.
Example:
Suppose a component, for some reason, works fine with a margin of 50px in Android but doesn’t fit as per the design in iOS 🤷♂️, then we can take the help of the Platform API like this.
- And this is how our UI will look on the different devices:
Conclusion:
Thus, using the above-mentioned tools/tips, you can always come up with new combinations to make your UI stand strong across different devices and OS. Eventually, you’ll find a combination that’ll work most of the time. I repeat ‘most of the time’, as there will always be that one notorious device to break your UI 😬.
