Build responsive React Native views for any device and support orientation change
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
Percentage is what we know from “normal” web development. The problem with it, is that not all RN style properties accept it. In example: margin, border-width, 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
Independent pixels (dp) on the other hand, are not the classic screen pixels (px) that we become accustomed to as web developers. They mathematically…
