Recommendations for REM value on different devices

[BANG88]

Hello. How can i set rem or scale make it display as expected on different screen. IOS 4S IOS 5 IOS 6 IOS 6S+

ANDROID etc

[vitalets]

Hi @bang88

currently not. I think it may depend on app itself but seems we can make a recommendation. It would be great if you share you experience!

[ibussieres]

Late for @bang88 perhaps, but for anyone who comes across this, here is a quick and dirty version I use. It uses iPhone breakpoints for dimensions, but renders just fine on Android the 5 or 6 different sized android devices I've tried.

"use strict";

import { Dimensions } from "react-native";

const width = Dimensions.get("window").width;

let rem = 14;

if (width > 768) {
  rem = 45;
} else if (width > 414) {
  rem = 26;
} else if (width > 375) {
  rem = 18;
} else if (width > 320) {
  rem = 16;
}

module.exports = rem;

[esutton]

Thanks for sharing.

What is definition of "rem" ?

[ibussieres]

I'm using it for font, padding and margin sizes.

https://github.com/vitalets/react-native-extended-stylesheet#rem-units

[esutton]

@ibussieres Thanks for explaining.

I was looking for solutions to help me understand how to make an app behave like a Master/Detail app when running on a tablet.

As well as to handle fonts getting too large because users enlarge their devices text size.

[ibussieres]

To be honest, I'm not sure how well this plays with accessibility settings. I would guess not so well.

[esutton]

@ibussieres Yes I am struggling for a solution. Labels, vector icons, and such get all wonky when user accessibility settings sets to a large font.

I feel I should not try to fight accessibility settings. My tab bar text gets giant and forces tab bar icons off tab bar. Maybe flexbox can solve.

[leggomuhgreggo]

@ibussieres @esutton re: accessibility & rem https://alastairc.ac/2017/11/is-text-sizing-dead/

[darekg11]

Bumping after long time but let's assume I use those:

import { Dimensions } from "react-native";

const width = Dimensions.get("window").width;

let rem = 14;

if (width > 768) {
  rem = 45;
} else if (width > 414) {
  rem = 26;
} else if (width > 375) {
  rem = 18;
} else if (width > 320) {
  rem = 16;
}

EStyleSheet.build({
    $rem: rem
})

Wouldn't it need to rebuild every time that orientation of device changes? How can I achieve that? Asking because you might launch app in landscape with a big width value and after rotation to portrait everything will be too big due to basic rem value not being changed. Or am I doing something wrong?

[vitalets]

Your concerns are ok. Dynamic orientation change is long story being discussed in #9. You can call EStyleSheet.build() with new $rem value after orientation change, but also you'l need to re-render the whole app to apply new styles.

[andreferi3]

@esutton you should set allowFontScalling: false on root of ur project, i set this in app.js.

render() { Text.defaultProps = { ...(Text.defaultProps || {}), allowFontScaling: false } return( .... ) }

[efoken]

rem values for Web should not be converted to pixels. React Native Web supports it 😄 #148