[RN] react native - fontSize / width / height 반응형

📱테스트 환경

"react": "19.0.0",
"react-native": "0.79.2"

---

요즘 너무 바쁘고 정신이 없어서 몇달간 정리를 못했는데 ..

이건 내가 React Native 개발을 할때마다 가지고 다니는 resize 함수이다.

RN 이 크로스플랫폼을 만들지만 이게 이상하게도

넓이 / 높이 / 폰트사이즈가 반응형이 안돼서 너무 불편했다.

그렇다고 @media 처럼 할수도 없는 노릇이도 비율로 조정할 수 있게끔 만들어서 사용한다.

먼저 width / height 조정 하는 방법이다.

export default function responsive(baseDesignElementSize?: ResponsiveInput): number | string {
  const screenRatio = SCREEN_WIDTH / BASE_DESIGN_WIDTH;
  if (baseDesignElementSize == null) {
    return 0;
  }

  if (typeof baseDesignElementSize === 'string') {
    const parsed = Number(baseDesignElementSize);
    return isNaN(parsed) ? baseDesignElementSize : parsed * screenRatio;
  }

  if (typeof baseDesignElementSize === 'number') {
    return baseDesignElementSize * screenRatio;
  }

  return 0;
}

export const BASE_DESIGN_WIDTH = 375;
export const BASE_DESIGN_HEIGHT = 812;
export const SCREEN_WIDTH = Dimensions.get('window').width;
export const SCREEN_HEIGHT = Dimensions.get('window').height;

BASE_DESIGN_WIDTH 는 피그마 디자인에서

설정되어있는 WIDTH 값을 설정해준다.

폰트크기를 설정하는 방법은 다음과 같다.

export const scaleFont = (size: number) => {
  const screenRatio = SCREEN_WIDTH / BASE_DESIGN_WIDTH;
  return Math.round(size * screenRatio);
};

Math.round 를 설정해준 이유는

미묘하게 텍스트 크기가 차이나는 경우가 있다.

그런 경우를 방지하기 위해서 설정해주면 그래도 훨 ~ 씬 낫다.