react native 폰트 여백 없애기

발달

---

전반적인 앱 리뉴얼을 진행하면서 폰트 변경 요청이 들어왔다.
그리고 요청에 맞게 변경했더니 기존 UI가 깨지는 문제가 발생했다. (android에서만)

기존에 사용하던 폰트 : NanumGothic
변경 예정에 폰트 : NotoSansKR

NotoSansKR폰트 자체에 위아래 여백이 존재하는 것 같았다. (Ios에서는 자동으로 여백을 삭제하는 것인지 여백이 없었다.)

위 사진은 단순 <Text>태그에 123을 입력한 것인데, 위 123을 보면 위아래 여백이 있어 border과 글자 사이에 간격이 넓은 것을 볼 수 있다.

해결

---

react-native Style에 includeFontPadding라는게 있는데 이걸 false로 지정하면 여백을 지울 수 있다.

하지만 모든 font에 적용하는 것은 귀찮기 때문에 하나의 Custom Text 컴포넌트를 만들어서 import하여 사용했다.

import React, { ReactNode } from 'react';
import { Text, TextStyle } from 'react-native';

interface TextProps {
  children?: ReactNode;
  style?: TextStyle | TextStyle[];
  ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip';
  numberOfLines?: number;
}

const CustomText = (props: TextProps) => {
  if (!props?.children) return <></>;
  if (Array.isArray(props.style)) {
    return (
      <Text {...props} style={[...props?.style, { includeFontPadding: false }]}>
        {props?.children}
      </Text>
    );
  } else {
    return (
      <Text {...props} style={{ ...props?.style, includeFontPadding: false }}>
        {props?.children}
      </Text>
    );
  }
};

export default CustomText;

추가적으로...

안드로이드 코드를 직접 수정하여 Text에 기본 스타일에 적용하려는 시도를 했었는데, 찾지 못했다. 전체 색을 수정하는 방법은 있었으나. 해당 옵션에 폰트 여백은 없어 컴포넌트를 사용했다. 혹시 방법을 아신다면 공유를 부탁드립니다....