안드로이드만 <Text>를 사용할때 윗 부분에 무슨짓을 해도 여백이 생기고 있다.

https://github.com/facebook/react-native/issues/29232

관련이슈를 보니 안드로이드의 기본 폰트도 사진과 같이 윗쪽 여백이 있는 폰트인 것 같다.

이번 기회에 새로운 폰트를 사용하여 여백 문제도 해결하고 두 플렛폼의 통일감을 주는 작업을 진행하도록 하겠다.

사용하는 폰트: Pretendard https://noonnu.cc/font_page/694

미적 감각이 없기에 추천받은 프리텐다드라는 폰트를 사용하기로 했다.

글꼴 굵기도 9기나 되고, 글꼴 단독 판매 또는 글꼴 라이선스 변경을 제외한 모든 상업적 행위 및 수정, 재배포가 가능하며 상하 공백도 동일하다.

적용 방법

폰트를 src>assets>fonts에 넣어준다.

최상단에 react-native.config.js 파일을 생성후 아래 코드를 넣어준다.

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['src/assets/fonts'],
};