Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve REM calculation #180

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Improve REM calculation #180

wants to merge 2 commits into from

Conversation

Crysp
Copy link

@Crysp Crysp commented Feb 19, 2023

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants