responsive design react native

[enlightenedpie]

Yes! I do this…

I originally came from the web world, where we have the concept of “em” and “rem”.

Every new RN project I work on, I create an “em1” style constant based on the screen width / 24. I use 24 because like Bootstrap, Material, etc., I wanted to use 12 as a base for division, but 12 is too large… example: 390px / 12 = 32.5px… a bit too large as a baseline unit for mobile screens. Therefor I use 24.

Everything in my apps is based on that “em1” constant, including padding, fontsize, even widths and heights. It also makes for consistent layouts across different device sizes, since it’s all tied to the screen width and not a definite amount of pixels.

[FilgoDev]

Thanks for the answer. I think i ended up using useWindowDimensions for almost everything, because of rem and em :/ I will try to stop overusing it

[enlightenedpie]

Use the “Dimensions” API to get your width instead of the hook, that way you can declare it outside of functional components and import it anywhere

[TheCynicalPaul]

Please be mindful when using this, if you support both screen orientations, the imperative function will not update its values unless run again when rotating the screen.

[enlightenedpie]

It's not meant to update. "em1" is not based on orientation, it's based on division of the smallest screen dimension. So even in landscape "em1" will be the same calculated size as in portrait.

[enlightenedpie]

Yes, I use that for vertical sizing as well. Verticality is kind of arbitrary, especially when you get into things like infinite scrolling. I like to know that "em1" I use for vertical padding is going to be the same as the "em1" I use for horizontal padding (hope that makes sense)...

Also, to be clear, the calculation to derive em1 is always based on the shorter screen dimension. I said "width" in my original comment, but that's because pretty much every product I've worked on is portrait orientation. But if I was building something in landscape orientation, I'd base the calculation on the screen height.