Build responsive React Native views for any device and support orientation change

Tasos Maroudas
React Native Training
7 min readJun 12, 2018

--

Image 1: The multiple screen sizes that a responsive design should cover

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 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.

Let’s come up with a solution — let’s introduce package…

--

--

Tasos Maroudas
React Native Training

❤ React Native. Part time blogger. CTO & Founder of Coded Lines Ltd