React Native 버전 0.60 이상 react-native-vector-icons 설치방법

라이브러리 설치

$ npm install react-native-vector-icons
// for TypeScript
$ npm install --save-dev @types/react-native-vector-icons

라이브러리 연결

React Native 0.59 버전 이하에서는 아래 명령어로 바로 연결을 해줄 수 있었으나,

$ react-native link react-native-vector-icons

0.60 버전 이상부터는 수동으로 연결을 해주어야 한다.

- iOS

react-native CLI로 프로젝트를 시작했다는 가정하에 진행한다. (Expo CLI로 시작했을 경우, Expo 패키지에 기본적으로 포함되어 있다.)

react-native CLI로 프로젝트를 시작하려면, 기본적으로 Xcode가 깔려있어야 한다. Xcode를 실행하여, 프로젝트 폴더 안의 ios/[프로젝트명].xcworkspace 파일을 연다.

그런 다음, 해당 프로젝트에서 우클릭을 하여 New Group 을 눌러 Fonts 라는 폴더를 생성한다.

그 다음, node_modules/react-native-vector-icons/Fonts 폴더 안에 있는 .ttf 파일 전부를 아까 만들었던 Fonts 폴더로 드래그 한다.

파일들을 드래그하면 아래와 같은 모달 창이 뜨는데, Copy items if needed에 체크를 하고, Finish 버튼을 누른다.

그 다음, ios/[프로젝트명]/Info.plist 파일 안에 아래 내용을 추가한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
  <key>UIViewControllerBasedStatusBarAppearance</key>
  <false/>
  <key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
  </array>
</dict>

마지막으로 Xcode에서 cmd + shift + k를 눌러 Clean Build Folder를 해준다.

- android

안드로이드 설정은 iOS 보다 간단하다. 프로젝트 내의 android/app/build.gradle 파일을 열고 아래 내용을 추가해준다.

...
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" // add this line
...

그리고 node_modules/react-native-vector-icons/Fonts 폴더 안에 있는 파일들을 android/app/src/main/assets/fonts 폴더로 복사한다. (assets/fonts 폴더가 없다면 생성한다.)

마지막으로, 안드로이드 프로젝트를 안드로이드 스튜디오로 열어 자동적으로 Gradle sync가 이루어질 수 있도록 한다.