[trouble shooting] react native font 적용 에러

huiinny·2024년 11월 19일

font를 가져와도 적용을 하지못하는 이슈 발생

커스텀 폰트를 사용할 때:
fontWeight와 fontStyle은 무시되고 폰트의 가중치(Bold, Light 등)와 스타일(Italic 등)을 fontFamily로 관리해서 저값만 줬는데도 폰트적용이 안된다!!

그래서 이 방법은 패스하고

  • Android
    android/app/build.gradle 에 이걸 추가하면 된다길래 했더니 여전히 안되었음
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

당연함. 저 경로가 아님.


난 android/build.gradle에 저 코드를 추가했던 것이다.. 바부
다시 올바른 경로인 andrioid/app/build.gradle에 추가하니까 성공적으로 빌드됨

feather icon도 적용이 안돼서 font가 안되는 이유랑 연관있겠거니 했는데 이 코드를 추가하자마자 렌더링됐다 야호!

이유는 react-native-vector-icons는 각 아이콘 세트(Feather, FontAwesome, MaterialIcons 등)를 폰트 파일로 관리한다. 예를 들어, Feather 아이콘 세트는 Feather.ttf 파일을 사용하며, 이 파일이 제대로 로드되지 않으면 아이콘이 표시되지 않고 사각형 박스 또는 아무것도 나타나지 않을 수 있다.

추가로, react-native.config.js 에 폰트파일이 있는 경로를 제대로 적어줘야한다..!

profile
Belle Epoqe

0개의 댓글