React Native — Responsive Layout

Photo by Aleks Dorohovich on Unsplash

We will create a responsive profile page using react native

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!

Let us create a profile page using flex in react native

Create a react native project using the following command

react-native init screenexample

Once all the packages are installed move to the directory.

we will create a container with a flex of 1

styles for the container

Step 2:

We will create the upper part of the profile page with a profile image

Styles:

Now the screen will look as

Step 3:

Bottom Part

Styles:

Now the screen would like this

Whole Code:

Flexbox Cheat Sheet

Click here for the cheat sheet of flexbox

To play with flex styles you can try flexbox froggy