Proportioned text sizes

[burhanuday]

Setting text sizes with pixels causes the problem of text appearing small on large devices and large on smaller screens. This can be fixed by calculating the text size using screen width

import { Dimensions, PixelRatio } from "react-native";

const proportionedPixel = (designPixels) => {
  const screenProportion = Dimensions.get("window").width / 180;
  return PixelRatio.roundToNearestPixel(designPixels * screenProportion);
};

I then edited theme.js

export const SIZES = {
  // global sizes
  base: 8,
  font: 16,
  radius: 4,
  padding: 24,

  // font sizes
  h1: proportionedPixel(17),
  h2: proportionedPixel(12),
  h3: proportionedPixel(10),
  title: proportionedPixel(9),
  subtitle: proportionedPixel(7),
  caption: proportionedPixel(6),
  small: proportionedPixel(5),

  // app dimensions
  width,
  height,
};

I would like to take up this issue and create a pull request

[hetmann]

Setting text sizes with pixels causes the problem of text appearing small on large devices and large on smaller screens. This can be fixed by calculating the text size using screen width

import { Dimensions, PixelRatio } from "react-native";

const proportionedPixel = (designPixels) => {
  const screenProportion = Dimensions.get("window").width / 180;
  return PixelRatio.roundToNearestPixel(designPixels * screenProportion);
};

I then edited theme.js

export const SIZES = {
  // global sizes
  base: 8,
  font: 16,
  radius: 4,
  padding: 24,

  // font sizes
  h1: proportionedPixel(17),
  h2: proportionedPixel(12),
  h3: proportionedPixel(10),
  title: proportionedPixel(9),
  subtitle: proportionedPixel(7),
  caption: proportionedPixel(6),
  small: proportionedPixel(5),

  // app dimensions
  width,
  height,
};

I would like to take up this issue and create a pull request

I think this should be implemented in the Text.js component due to the fact theme.js SIZES is a static object.

For example: when changing h1 size you need to use the proportionedPixel in your app. So to fix this we should change the Text component and parse the fontSize and change it using proportionedPixel

[burhanuday]

Can you point me where i should do this in the Text.js file?

[hetmann]

Can you point me where i should do this in the Text.js file?

From this line Text.js#L153 to this line Text.js#L163

Everything that uses fontSize can be edited to use the proportionedPixel. We can rename proportionedPixel to usePixelRatio and add it to the utils/helpers.js

[burhanuday]

https://github.com/react-ui-kit/expo-ui-kit/pull/78

created a pull request

[hetmann]

78

created a pull request

I commented related to the dividing by 2 on the PR.

[burhanuday]

I commented related to the dividing by 2 on the PR.

I am unable to find your comment in both the conversation tab and files changed tab in the PR. Can you help me out?

[hetmann]

I commented related to the dividing by 2 on the PR.

I am unable to find your comment in both the conversation tab and files changed tab in the PR. Can you help me out?

Sorry, I forgot to publish the comment

[hetmann]

@burhanuday thank you. I just merged the PR.