vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native
MIT License
2.93k stars 132 forks source link

Improve REM calculation #180

Open Crysp opened 1 year ago

Crysp commented 1 year ago

Goal

Apply PixelRatio.roundToNearestPixel() to all calculated values based on REM.

Motivation

I am using float values for basic $rem. So calculated values could be float too and sometimes it's producing issues like that

image

Example:

const Application = () => (
    <View style={styles.wrapper}>
      <View style={styles.circle} />
    </View>
);

EStyleSheet.build({
  // On iPhone Xr screen width is 414
  $rem: Dimensions.get('screen').width / 375, // 1.104
});

const styles = EStyleSheet.create({
  wrapper: {
    borderWidth: '2.5rem', // 2.7600000000000002
    borderColor: 'red',
    borderRadius: '20rem', // 22.080000000000002
  },
  circle: {
    width: '18rem', // 19.872
    height: '18rem', // 19.872
    borderRadius: '20rem', // 22.080000000000002
    backgroundColor: 'white',
  },
});

To fix this I should round each value to nearest pixel via PixelRatio.roundToNearestPixel(). Otherwise it produces bug like on picture above.

vitalets commented 1 year ago

@Crysp @rkayd22 does anybody of you ready to become a maintainer of react-native-extended-stylesheet to merge/test this and other PRs? Unfortunately I don't have time for it, but also don't want to just merge new things.