React-native 에 custom font 추가하기(no expo)

1. 개요

expo를 사용한다면 custom font를 추가하는게 쉽지만, 기존 react-native project에서는 font추가하는게 만만치가 않았다. 그러나 최근 react-native 버전이 version > 0.60이 되면서 custom font 추가하는 방법이 엄청 쉬워졌다.

2. custom font 추가방법

2.1. config 파일 생성

커스텀 폰트를 추가하기 위해서는 다음의 파일을 먼저 root 폴더에 생성하자.

• react-native.config.js

2.2. config 설정

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

방금 생성한 config 파일에 위와 같이 설정한다.

assets 부분에 array로 폰트가 담겨있는 폴더의 path를 지정해주면 된다.

2.3. link

마지막으로 다음과 같이 link 시키고 나면 끝이다.

$ react-native link

link후 별다른 custom font를 추가하는 css코드 등은 적을 필요 없다. 그저 파일이름을 그대로 font명으로 사용하면 된다.