How To Make Your React Native Apps Responsive

#react #reactnative

A few weeks ago, I posted my first article on Dev.to to talk about my React Native Stack 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

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:

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

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

Instead I use % as much as I can:

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.

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

Without `normalize`

With `normalize`

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

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

Android Dimensions

On android Dimensions.get('window').height sometimes returns the wrong value.
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, 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.