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.
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.
Latest comments (2)
Amazing Work !
In the normalize repo you have the next sentence.. may i ask you why did you subtract 2?
return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;