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

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でこけるから。（前提と同じ事書いてるけど、本当こういう文化なくした方がいいと思うんだけどなぁ）

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

yarn add react-native-vector-icons

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

npx pod-install

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

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

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

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

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

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

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

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

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

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