【ReactNative】react-native-vector-iconの使用手順

ReactNativeのアイコン用ライブラリはreact-native-vector-icon1択な気がするんですけど、使用法がやたらとめんどくさいです。
なので、導入までのロードマップを残しておきます。

1. install

yarn add react-native-vector-icons

2. pod install
   iosディレクトリでpod install

cd ios && pod install && cd ..

3. vscodeプロジェクトのnode_modules/react-native-vector-icon/fonts配下にあるttfファイルを、xcodeプロジェクトに作成したFontsディレクトリにD&D。
   

4. Copy items if neededがチェックされていることを確認してFinishをクリック。
   

5. xcodeプロジェクトの/app/info/Fonts provided be applicationに使いたいフォント名と同じvalueを作成
   

6. xcodeのPoductからClean Biuld Folderを実行し、npx、シュミレータを再スタート。

import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export const LocationButton = () => {
  return (
    <TouchableOpacity onPress={() => console.log('Hello')}>
      <View>
        <Icon name="location" size={30}></Icon>
      </View>
    </TouchableOpacity>
  );
};

表示成功！！！