[React Native] FontPadding

나는 React Native로 앱을 개발하던 도중 UI를 만들고 아래와 같이notoSans fontFamily를 적용했다.

vehicleInfoContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  
vehicleText: {
    fontFamily: FontFamily.notoSansRegular,
    fontSize: FONT_SIZES.HEADLINE_3,
    fontWeight: 'normal',
    fontStyle: 'normal',
    letterSpacing: -0.5,
    color: COLOR_PALETTE.BLACK,
  },

가령 render 부분의 style을 먹이는데 버튼의 container를 정의하고 버튼 안에 Text를 넣는 형식으로 진행했다.
container에 padding을 두어 버튼과 버튼안 Text의 간격을 조정하고 Text에 fontFamily로 notoSans의 Regular를 적용했는데...
내가 원래 원했던 버튼 Text의 padding보다 더 많은 padding이 먹어있었다.

폭풍 구글링의 결과...
notoSans font 자체적으로 padding이 적용되어있었고, 이를 적용하지 않아야 내가 원하는 값 만큼 padding이 적용됐다.

react native 의 <Text> 테그 안에 includeFontPadding 옵션을 false 로 절정하면 font의 padding 값들이 제거되는것을 볼 수 있다.

vehicleText: {
    fontFamily: FontFamily.notoSansRegular,
    fontSize: FONT_SIZES.HEADLINE_3,
    fontWeight: 'normal',
    fontStyle: 'normal',
    letterSpacing: -0.5,
    color: COLOR_PALETTE.BLACK,
    includeFontPadding: false,
  },