[React Native] 기기에 맞게 폰트 사이즈 대응하는 방법!

React Native에서 폰트 사이즈는 어떻게 관리할까?

그냥 피그마에서 본 폰트크기가 10이라면, fontSize: 10 으로 하면 될까?

기기에 맞게 대응해주는 방법이 있다.

 

물론 더 세세하게 나누자면,

디바이스의 가로가 (a~b)px: 8, (b~c)px: 10, (c~d)px: 12

이런식으로 나눌 수도 있겠다. 그러나 그렇게까지는 세세하게 나눈 상황은 아니라서,

우리는 폰트사이즈르 계산할 때 하나의 함수를 통하고, 그 안에서 PixelRatio를 이용하기로 한다.

 

PixelRatio란?

글꼴 크기에 대한 축척 비율을 반환합니다.
이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다.

• 안드로이드: Settings > Display > Font Size 에서 설정된 사용자 기본 설정을 반영합니다.
• iOS: Settings > Display & Brightness > Text Size 에서 설정된 사용자 기본 설정을 반영하며, Settings > Accessibility > Display & Font Size > Large Text에서도 값을 업데이트할 수 있습니다.

만약 글꼴 축척이 설정되지 않은 경우, 디바이스의 pixel ratio가 반환됩니다.

 

import { PixelRatio } from 'react-native';

export const font = (size: number) => {
  /*
  - 230720: `pixel(size)` 말고, size를 fontScale로 나눈다.
  - 폰트사이즈 참고 아티클: https://muhammadrafeh.medium.com/make-responsive-react-native-text-for-any-device-f8301b006694
  */
  return size / PixelRatio.getFontScale();
};

 

 

 

참고

https://muhammadrafeh.medium.com/make-responsive-react-native-text-for-any-device-f8301b006694

Make Responsive React Native Text for any device

https://reactnative.dev/docs/pixelratio