How To Make Your React Native Apps Responsive
Tags: react, reactnative
Published: 2019-08-09 00:46:35


A few weeks ago, I posted my first article on Dev.to to talk about [my React Native Stack](https://dev.to/newbiebr/my-react-native-stack-after-1-year-37j) and another developer asked me how do I ensure the consistency of my apps across different screen sizes.

I wrote a quick reply but today I decide to talk more about it as responsiveness is one of the first things every React Native developer
has to deal with.

## **Use flexbox**

React Native's flexbox is one of the reasons why I love React Native.

You can make any kind of layouts you want easily with 2 simple attributs `flex` and `flexDirection`.

In the end, the layout adapt perfectly to screen sizes. Quote from [React Native documentation](https://facebook.github.io/react-native/docs/flexbox)
> Flexbox is designed to provide a consistent layout on different screen sizes.

So just use **flexbox** everywhere, avoid *absolute* position

## **Avoid hard values**

By *hard values* I means:

```js
const container = {
    width: 100,
    height: 300,
};
```


And most of the times, *hard values* (especially big ones) will lead to this

![](https://i.imgur.com/bLbnjsC.jpg)


Instead I use **%** as much as I can:
```js
const container = {
    width: "10%",
    height: "30%",
};
```

## **Adapt hard values**

Sometimes I can't avoid hard values so when I have to use them, I adapt them accordingly to the screen sizes using this function that I shared on my [last post](https://dev.to/newbiebr/my-react-native-stack-after-1-year-37j).

And I promised, I've created a package on npm so you can easily install and use it in your projects. 

### Without `normalize`
![](https://i.imgur.com/bLbnjsC.jpg)

### With `normalize`
![](https://i.imgur.com/4IqqAR2.jpg)

[react-native-normalize](https://github.com/NewBieBR/react-native-normalize) is a small and simple package that helps make your React Native app responsive easily.

It comes with a function `normalize` that will adapt a value depending on the screen's width or height so you can use it for `width, height, top, bottom, fontSize, borderRadius,...`


```javascript
// on iPhone 8
normalize(100)          // = 100
normalize(50, 'height') // = 50

// on iPhone 5s
normalize(100)          // = 86
normalize(50, 'height') // = 43

// on iPhoneXs Max
normalize(100)          // = 110
normalize(50, 'height') // = 67
```

## **Dealing with notch (iOS)**

React Native has the `SafeAreaView` component that avoids automatically the notch and the bottom area on iPhone X, Xs... but sometimes for various reasons (layout, animation,...), I can't use `SafeAreaView`.

That when I use [react-native-iphone-x-helper](https://github.com/ptelad/react-native-iphone-x-helper), a library that comes with some useful functions that help me to deal with iPhoneX, Xs,... notch and bottom area. There are 2 of its functions that I use the most: `getStatusBarHeight` and `getBottomSpace`.

![](https://miro.medium.com/max/2000/1*ToLKb6NYZWtBmdOD-jA0jQ.png)

## **Android Dimensions**


On android `Dimensions.get('window').height` [sometimes returns the wrong value](https://github.com/facebook/react-native/issues/4934).
And when you use that returned height to do the calculations for your layout, that can create some problems.

So I use [react-native-extra-dimensions-android](https://github.com/Sunhat/react-native-extra-dimensions-android), a package that give you the actual width and height of the screen (including elements such as soft menu bar), the soft menu height and the status bar height.

![](https://github.com/Sunhat/react-native-extra-dimensions-android/raw/master/demo.png)

## **Test on different screens**

I normally test my app on the iPhone 8 Emulator but when I've done the implementation, I will test it on 3 differents screen sizes:
- iPhone5s (small)
- iPhone8 (medium)
- iPhoneXs Max (big)
  
So if your app looks great on these 3 screen sizes, you can be pretty sure that it will look just fine on most of the phones today.