# React Native — Responsive Layout

Photo by [Aleks Dorohovich](https://unsplash.com/@aleksdorohovich?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055619858/d381d697-1ebd-41c9-a8f9-bc383299374d.png)

styles for the container

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055621692/abedf573-d8f4-4103-af4e-61d20abdf720.png)

Step 2:

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055623244/90ecdda2-2052-4f9c-a188-03191c7f0473.png)

Styles:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055624969/758ed04b-2df0-4ef3-b2e9-05e66cc9ce6c.png)

Now the screen will look as

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055626565/45cfa5a5-0e50-4894-9dc3-4c029dcd780a.jpeg)

Step 3:

Bottom Part

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055628306/a0c7bc31-d8ca-43e5-b5e9-f336bdd642c8.png)

Styles:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055630094/1f2495d2-8c59-40e5-ac0c-d178b1c9c781.png)

Now the screen would like this

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055631773/ed57c84a-138b-441f-a642-50dac1806036.jpeg)

Whole Code:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055633832/cf0b2104-b13e-4edd-9d39-b74a6c230f1c.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055635847/7d91010c-35f6-4174-89c3-2c78876ed473.png)

#### Flexbox Cheat Sheet

Click here for the [cheat sheet of flexbox](https://github.com/vhpoet/react-native-styling-cheat-sheet#flexbox)

To play with flex styles you can try f[lexbox froggy](https://flexboxfroggy.com/)