【React Native】icomoonのフォントを使う（通常の外部ttfを使う時のやり方も記載）【Expoなし】

icomoonはreact-native-vector-iconsにサポート内容が書いてあるけど、そもそも react-native-vector-icons
がちゃんと使える前提っていうね…

当たり前のようにreact-nativeのバージョンとの相性でlinkコマンドやったりpodやった結果エラーで使えないとかあって情報が錯綜してる気がするので現段階のをまとめておく。(まぁ、こういう放置系の文化のおかげでFlutterの方が〜とか言われる原因の1つな気がする)

環境は下記

react-native-cli: 2.0.1
react-native: 0.63.4
react-native-vector-icons: "^8.0.0"

react-native-vector-icons を使える状態にする

なんで、こういう事書いてるか？って言うと、iosで「react-native link」やれとか、「いや、npx pod-install(cd ios & pod install)」とか書いてあるけど自分の環境下ではエラー起きてbuildでこけるから。（前提と同じ事書いてるけど、本当こういう文化なくした方がいいと思うんだけどなぁ）

1. プロジェクト下に移動したらreact-native-vector-iconsをinstallする(npmやnpx使い人は置き換えてください)

yarn add react-native-vector-icons

1. podinstallをする(react-native linkはreact-nativeのバージョンが60以上なのでしない、やったら怒られる)

npx pod-install

1. ios下の「自分のプロジェクト名.xcodeproj」をXcodeで開く
2. 左側ペインのファイルディレクトリ一覧のところにResoucesフォルダがあって.ttfファイルが入っているか確認する
3. 左側ペインの一番上の自分のプロジェクトをクリック
4. メインペインの上部のBuild PhasesをクリックしてCopy Bundle Resourcesのicomoon.ttf以外のfontを「-」を押して消す(じゃないとビルドできない)

これでやっと「react-native run-ios」みたいなコマンドでbuildできるようになる。

icomoonのttfを使えるようにする

1. とりあえずicomoonからDLしたら、zipファイルを解凍する
2. ios下の「自分のプロジェクト名.xcodeproj」をXcodeで開く
3. 左側ペインのファイルディレクトリ一覧のところにResoucesフォルダに1で解凍した中にあるttfをドラッグする
4. Copy itemps neededと Create groups と Add to targetにチェックがついてるか確認して追加
5. Xcodeを閉じたら、App.jsのあるルートディレクトリ/ios/プロジェクト名/Info.plistファイルをエディタで開いてicomoon.ttfファイル名を追記する(react-native-vector-iconsの設定コピって真似すればOK)
6. App.jsと同じディレクトリに1で解凍したselection.jsを配置する
7. iconを使いたいファイルを以下のようにしてiconが出れば成功(その際、icon-というプレフィックスはいらない)

import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
import icoMoonConfig from '../selection.json'
const IcoMoon = createIconSetFromIcoMoon(icoMoonConfig)
/*~略~*/
  render() {
    return (
       <IcoMoon name='search' size={30} />
       <IcoMoon name='qr' size={30} />
       )
    }

GoogleとかでDLできるフリーのfontを使う場合

1. App.jsと同じディレクトリ配下に /assets/fonts を作ってそこに ttfなどを入れる
2. App.jsと同じディレクトリ配下に react-native.config をなければ作る
3. react-native.configにassetsのキーを追加

module.exports = {
    assets: ['./assets/fonts/'],
};

1. react-native link をする
2. CSSでfontFamilyを指定すれば使えるようになる

<Text style={{fontFamily:'PixelMplus10 Regular'}}>TEST</Text>

これで上手く反映されない時は手動で追加する

1. ./ios/PROJECT_NAME.xcodeproj をXcodeで開く
2. .ttfファイルがResoucesフォルダに入っているか確認すること
3. Info.plistファイルに.ttfファイル名が書かれていること(プロジェクト名下のだけでOK)
4. Build Phases→Copy Bubdle Resourcesに.ttfファイル名が含まれていること