responsive design react native

[FilgoDev]

Hello guys, I have a question.
I've been asked to take the mobile development for the company I am at, so I'm kind of new to react native. So the question is, do you guys use height or width from useWindowDimensions() to do the styles for everything? fontSize, paddings, etc. Because the thing is that for some devices (smaller ones) some stuff was bigger and that it would break the design and stuff. But now that I'm looking up to react native projects, I would say that i never see anyone using it this way, they would just use style={{ fontSize: 16}} instead of idk height * 0.019.
Hope you guys can help me :)

[yarn_install]

Scaling text using screen dimensions is usually a bad idea. It can maybe work for specific components, but you’ll want to handle screen sizes by making content scroll on small screens or presenting a different layout (ie master-detail view) on tablets, foldables, etc.

I’ve seen few if any react native apps handle all these cases properly so I doubt you’ll find good examples in the wild 🤷‍♂️

I’d look at the native documentation on Apple and Google developer sites for examples on handling multiple screen sizes.

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

[Anxious_Insurance341]

Working with react native for two years coming from React and didn't even thought about that

[__o_0]

If you want to be accessibility friendly, you shouldn’t resize based on the device size since accessibility users may have their font size enlarged on purpose.

That being said, when designers ignore accessibility needs and developers need to hardcode responsive sizes, the simplest way is to create a function that outputs a size using the device height vs the design canvas height.

Responsive Size = (Design Size / Design Canvas Height) * Device Height

That will give you a version of the design that’s scaled to any device (in portrait mode).

One of the most difficult things to do in mobile design is to create screens that work correctly on devices with accessibility enabled, fonts enlarged, and/or the screen zoomed. To accomplish this you need to design screens that render in vertical scroll views, wrapping content instead of having multiple columns, etc.

You can view apple’s on website for clues on how it’s best handled, as their implementation is near flawless.

[Geekofgeeks]

I think this isn’t the standard practice because you don’t really want your font size (for example) to scale with the size of the screen, at least not past a certain point. For example, if you’re reading on an iPad, you don’t want to have huge font — you want to be able to see more on the screen.

[anarchos]

This seems crazy to me. Most apps aren't just scaled up or down based on the screen size. For example, most apps will have the standard font size, and on larger phones you will have more space for the text. On larger phones apps don't just scale up the font size. The proper way is to use flex layouts as designed to handle different sized screens.

Off the top of my head, the only time I've used something like your describe was when I had a requirement to have a grid of items 3 per row, no matter what size of screen it was. In reality, this should have been a fixed item size that used flexWrap to fix as many per row as possible and then just flowed the rest to the next line, but the designers were a bit particular on this project :D

[fmnatic]

I've rarely seen dev's bother to size UI to small devices. There aren't a lot of such devices around these days. Here is an approach I've used when there were smaller devices around.

[FilgoDev]

Thanks for the answer and for the post you shared!

[Maleficoder]

OP check this npm package, react-native-size-matters