React Native: build fail on iOS using 'react-native-vector-icons'

Xcode에서 react-native-vector-icons을 등록하는 과정에서 다중의 Fonts path로 인한 오류로 짐작된다. pod install에서 등록되는 [CP] Copy Pods Resources와 Copy Bundle Resources에 충돌인데 Copy Bundle Resources 안의 Fonts를 지워주는 것으로 오류를 해결 할 수 있다.

Error Message

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening MyApp.xcworkspace.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace MyApp.xcworkspace -configuration Debug -scheme MyApp -destination id=MyApp_id

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES

Prepare packages

Computing target dependency graph and provisioning inputs

Create build description
Build description signature: <build-description-signature>
Build description path: /Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Intermediates.noindex/XCBuildData/<build-description-signature>-desc.xcbuild

note: Building targets in dependency order
error: Multiple commands produce '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/AntDesign.ttf'
    note: Target 'MyApp' (project 'MyApp') has copy command from '/Users/username/Documents/workspace/MyApp/node_modules/react-native-vector-icons/Fonts/AntDesign.ttf' to '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/AntDesign.ttf'
    note: That command depends on command in Target 'MyApp' (project 'MyApp'): script phase “[CP] Copy Pods Resources”
error: Multiple commands produce '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/Entypo.ttf'
    note: Target 'MyApp' (project 'MyApp') has copy command from '/Users/username/Documents/workspace/MyApp/node_modules/react-native-vector-icons/Fonts/Entypo.ttf' to '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/Entypo.ttf'
    note: That command depends on command in Target 'MyApp' (project 'MyApp'): script phase “[CP] Copy Pods Resources”
error: Multiple commands produce '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/EvilIcons.ttf'
    note: Target 'MyApp' (project 'MyApp') has copy command from '/Users/username/Documents/workspace/MyApp/node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf' to '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/EvilIcons.ttf'
    note: That command depends on command in Target 'MyApp' (project 'MyApp'): script phase “[CP] Copy Pods Resources”
error: Multiple commands produce '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/Feather.ttf'
    note: Target 'MyApp' (project 'MyApp') has copy command from '/Users/username/Documents/workspace/MyApp/node_modules/react-native-vector-icons/Fonts/Feather.ttf' to '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/Feather.ttf'
    note: That command depends on command in Target 'MyApp' (project 'MyApp'): script phase “[CP] Copy Pods Resources”
error: Multiple commands produce '/Users/username/Library/Developer/Xcode/DerivedData/MyApp/Build/Products/Debug-iphonesimulator/MyApp.app/FontAwesome.ttf'
 

Solution

1. react-native-vector-icons를 설치한다.

2. Xcode 를 열어 MyApp project 에서 New Group: Fonts를 만들고 Add files to 'MyApp'으로 사용할 Fonts(.ttf)를 선택한다.

   MyApp
   ├── MyApp
   │   ├── Fonts <- create new group: Fonts and add fonts here
   │   ├── AppDelegate.h
   │   ├── AppDelegate.mm
   │   ├── Images
   │   ├── Info
   │   ├── LaunchScreen
   │   └── main
   ├── Libraries
   ├── MyAppTests
   ├── Products
   ├── Frameworks
   └── Pod
   

3. MyApp > Build Phase > Copy Bundle Resources로 이동하여 Fonts에 이전 Step에서 넣었던 Fonts들을 지워준다.

4. react-native.config.js 안에 react-native-vector-icons dependencies settings 한다

   module.exports = {
     dependencies: {
       "react-native-vector-icons": {
         platforms: {
           ios: null,
         },
       },
     },
   };
   

Reference

• Solution: Multiple commands produce