[React Native ] react-native-vector-icons ios에서 사용하기(에러 해결)

https://www.npmjs.com/package/react-native-vector-icons

react-native-vector-icons

 

여기 공식 문서를 보면 어떻게 사용할 수 있는지 잘 나와있다.

1. react native 프로젝트 폴더 > node_modules 폴더 > react-native-vector-icons > Fonts에서 원하는 .ttf를 복사한다.

2. xcode로 react native 프로젝트 폴더 > ios 폴더를 연다.

3.

ios 폴더를 열고 프로젝트 명 폴더를 오른쪽 클릭하여 New Group을 눌러 Fonts 라는 폴더를 생성해준다.(사진은 이미 생성한 모습)

 

4. 그리고 이 Fonts 폴더에 아까 선택한 .ttf 파일들을 넣어준다. 그러면 아래와 같은 창이 뜬다.

공식 문서에는 만약 node_modules>react-native-vector-icons>Fonts에 있던모든 ttf를 넣는다면 Create groups을 선택하라고 하는데 이건 상관없이 Create folder references를 선택해도 될것 같다. (다른 사이트들은 Create folder references를 선택한다)

그리고 Add to targets에서 프로젝트명을 선택한다.

 

5. xcode에서 프로젝트명 하위의 info.plist를 열고 Fonts provided by application이라는 키에 Fonts폴더에 추가한 .ttf 파일들을 String으로 추가한다. 일일이 입력하기 힘들면 vscode를 열고 아래 코드를 넣어주어도 된다.

<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>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

이제 cmd+shift+k 를 눌러 clean build를 해준다. 그리고 vs code에서 pod install을 실행한다.

 

이러면 실행이 된다고 한다.

 

 

근데 에러가 났다....

 

Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

Detailed response:

Build system information
error: Multiple commands produce '/path/of/the/project/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/Zocial.ttf':

1) Target 'NameOfTheProject' (project 'NameOfTheProject') has copy command from '/path/of/the/project/NameOfTheProject/node_modules/react-native-vector-icons/Fonts/Zocial.ttf' to '/path/of/the/project/NameOfTheProject/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/Zocial.ttf'

2) That command depends on command in Target 'NameOfTheProject' (project 'NameOfTheProject'): script phase “[CP] Copy Pods Resources”

Build system information
error: Multiple commands produce '/path/of/the/project/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/SimpleLineIcons.ttf':

1) Target 'NameOfTheProject' (project 'NameOfTheProject') has copy command from '/path/of/the/project/NameOfTheProject/node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf' to '/path/of/the/project/NameOfTheProject/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/SimpleLineIcons.ttf'

2) That command depends on command in Target 'NameOfTheProject' (project 'NameOfTheProject'): script phase “[CP] Copy Pods Resources”

 

 

........

영어로 열심히 검색하니 문제는 build에서 폰트 파일이 중복되어서 빌드되었다고 한다.  ios 파일에서 [CP] Copy Pods Resources도 .ttf를 가지고 있고

Copy Bundle Resources도 같은 폴더를 가지고있어서 에러가 나기 때문에 Copy Bundle Resources에 있는 .ttf를 지워주면 된다고 한다.

최종적으로 나같은 에러가 나면 다음처럼 해결하면 된다.

 

xcode에서 Build Phases의 Copy Bundle Resources에 있는 .ttf들을 삭제한다. (사진은 이미 삭제한 모습이다.) 그리고 다시 npx react-native run-ios를 실행하면 잘 돌아가는 것을 볼 수 있다.

 

참고한 링크: 

https://github.com/oblador/react-native-vector-icons/issues/1074

[Xcode 11] 'Multiple commands produce' error when building with new Xcode build system · Issue #1074 · oblador/react-native-ve