7 Tips to Develop React Native UIs For All Screen Sizes
So your team decided to move the mobile stack to React-Native and your designer have gave you a piece of UI. Left you ponder how to made that UI fit for all the devices available on Android and iOS 🤔. Look no further, in this article, I’ll share 7 tips to make you fall in love with the amazing UI designing style in React Native!
Proportion is the key
Human eyes are automatically capture things that stands out and our poor designers spend their days and nights making sure important information catches users attention. We as a developer, wanted to make sure we conveys that information regardless the Screen Sizes and Resolutions.
Ruler!
Before anything, make sure you get a ruler. It’ll help you measure the proportion along the way.
Tip 1: Percentage (%)
We want to use percentage whenever possible, because it is the most scalable element. In this case we want the entire box to match the whole width of the screen.
Some might ask, why not use flex. Two reasons. First, use % you are being explicit that you want the width to match 100% of the parent. Second, depends on the flexDirection, flex can span full width or full height.
Tip 2: AspectRatio
Remember the keyword Proportion. Now we know the width, we gonna use aspectRatio to set the height, or vice versa. (Note: aspectRatio is ONLY in React-Native, NOT a css standard).
Tip 3: Flex
Flex should be your third choice when developing your width and height, which means use flex only for the jobs percentage(%) can’t do. For example, we want to make each rankRow has the same height, regardless the number of rows. Percentage is impossible to do the job because we don’t know the number of rows before-hand.
Another example is when division is an infinite decimal. In our case, the proportion between left and right box is 11:17. If we were using percentage, left container would be 11/(11 + 17) = 0.392857143% 🤔.
In this case, we have to use Flex (Note: I’m not sure if react-native will rounded to nearest value or not 😝).
Tip 4: REM
Finally, we come to the core of this tutorial!!! So stop snoo💤!!!
We now know how to scale the width and height, but how about texts 🤔? The core react-native StyleSheet doesn’t support any kind of fontSize scales.
Good news is we have an open source project Extended StyleSheet that has the support for rem, which can be used as fontSize: “11rem”.
So what is rem 🤔? REM is a scale factor. For example, if your rem is 2 and your “11rem” will become “11*2” = “22” . Why is this important 🤔? Well, remember Proportion? If we make the scale factor relative to the screen size, it’ll make all our elements that used rem scaled proportionally!
In this project, we first define our rem scale factor relative to the entire screen width EStyleSheet.build({$rem: entireScreenWidth / 380}); . Of course, 380 is a magic number, it works well for this tutorial. In production though, you might want to do more calculation or even exposed it as an option for users, because some people who have bad vision might prefer to read bigger texts!
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});Now everything is straight forward. Just apply every rem to all your pixels numbers. Make it look good in one screen and it’ll look good on all screens 😄.
Moreover, rem not only works for fontSize, every pixel you used can leverage the power of rem . For example, padding, margin, width, height and more. one more time! Make it look good in one screen and it’ll look good on all screens 😄.
rem and not using rem when running on iPad Pro 2. ❌Once again, here is how rem looks looks on different screen sizes in android and iOS.
Tip 5: ScrollView
ScrollView is your friend when dealing with texts, because your text’s length could be vary. So, embedded your text inside a ScrollView is always a good idea, in case your text is longer than its container box.
Tip 6: Pixels
I put pixels last because it should be the Absolute Least element you consider! I would say 99% of the time, you want to use the techniques above for scalability. Of course there are things like, all I want to do is to add 2 pixel paddings for the scrollBar or the shadows.
Tip 7: Let me know other great tricks PLEASE😜
Thank you for making to the end of this blog. I hope you learned something useful. Please leave a comment if you have any suggestions or point out if I made any mistakes. I will be very grateful for that.
As always, here is the full working code https://github.com/shanerudolfworktive/ScalableLayoutTutorial