Responsive UI is definitely an important part of web and mobile development. When I started working with React Native more than a year ago, I discovered the hard way that there is no functionality out of the box to support responsiveness.
The goal of this article is to show a complete solution that scales RN UI to all sizes and types of screens (phones, tablets etc) and also supports UI scaling even when the app changes orientation.
How React Native works and what are the problems
React Native style properties accept either percentage or independent pixel (dp) values.
Percentage is what we know from “normal” web development. The problem with it, is that not all RN style properties accept it. In example:
border-radius and many properties do not accept it as value.
That being said, there is no option for a developer to make their app responsive by coding everything in percentage…
Independent pixels (dp) on the other hand, are not the classic screen pixels (px) that we become accustomed to as web developers. They mathematically connect to screen pixels and the screen’s scale factor through the following equation:
px = dp * scaleFactor
DP can not be used for responsive UI development as someone might think at this point. That is because
scaleFactor actually depends on screen’s pixel density, meaning the number of pixels per inch (ppi). What RN can do though, is that it can scale dp values to screen of different sizes only if they have the same number of ppi. But if you think of Android phones — there are thousands out there and most of them have screens with different ppi even if they come from the same manufacturer!
For more info regarding screens and UI factors, you can have a look at Android’s guide for pixel densities here, Android’s screen compatibility overview and paintcodeapp’s guide for iPhone resolutions.