React Nativeでアイコンを使用可能にする方法

こんにちは，ツジです．

今回は自分がReact Nativeでかなり苦戦したアイコンを使う方法について，一連の流れを書いていこうと思います．

公式ドキュメントの紹介
プロジェクト作成からアイコンを表示するまで
1. プロジェクト作成
2. アイコンをインストールする
最後に

公式ドキュメントの紹介

こちらのページにアイコンの設定方法については解説されていますが，ちょっとした部分で間違えてうまくできなかったりしたので，そういった部分も今回丁寧に説明していけたらなと思います．

プロジェクト作成からアイコンを表示するまで

プロジェクト作成

まずはプロジェクトの作成ですね，任意の場所に作成してください．

$ npx react-native init SampleProject

プロジェクトが作成されたら，念の為動作確認をしておきましょう．

~/SampleProject $ npx react-native start

初期画面が確認できると思います．画像はiosシミュレータの画面です．

この初期画面だと情報量が多いので，少しApp.tsxを編集します．

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  useColorScheme,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';


function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Text>Test Project</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

上記のコードを反映させると，次のような画面になると思います．

アイコンをインストールする

次は本題のreact-native-vector-iconsを導入していきます．
導入するために次のコマンドを打ち込んでいきます．

$ npm install react-native-vector-icons --save
$ cd ios && pod install && cd ..

実行すると，node_module下にreact-native-vector-iconsが作成・保存されていることが確認できると思います．

~/SampleProject/node_modules/react-native-vector-icons/Fonts $ ls
AntDesign.ttf FontAwesome5_Regular.ttf MaterialIcons.ttf
Entypo.ttf FontAwesome5_Solid.ttf Octicons.ttf
EvilIcons.ttf Fontisto.ttf SimpleLineIcons.ttf
Feather.ttf Foundation.ttf Zocial.ttf
FontAwesome.ttf Ionicons.ttf
FontAwesome5_Brands.ttf MaterialCommunityIcons.ttf

確認できたら，
次にXcodeで「Open a project or file」より「SampleProject.xcodeproj」を開きます．

開いたら，SampleProject内に新規フォルダとして「Fonts」を作成します．
※ SampleProject下にある同じ名前のSampleProject内に「Fonts」フォルダを作成する．

作成したFontsフォルダ内に，先ほどプロジェクト内に作成されたttfファイルをドラックアンドドロップ👍

次に，SampleProject内にあるInfo.plistを編集していきます．

「Add row」より「Fonts provided by application」を選択して，追加
追加した「Fonts provided by application」下のkey(Item 0)に対するvalueを，先ほどドラックアンドドロップで追加したいずれかのファイル名を記載します．
今回は「AntDesign.ttf」を設定しました．
ここまでできたら，Xcodeのメニューバーより「Product」の「Clean Build Folder」を実行

そして，App.tsxの任意の場所に次のコード（今回は「user」を使用して，サイズを「50」に設定）を追記して再度エミュレータを起動してみましょう．

補足：それぞれどのようなアイコンがあるかはこちらのサイトから確認することができます．

import Icon from 'react-native-vector-icons/AntDesign';
<Icon name="user" size={50}/>

※ 先ほど設定したアイコン名をインポートするようにしましょう
例：「Feather.ttf」を設定していた場合 ↓

import Icon from 'react-native-vector-icons/Feather';

すると，アイコンが表示されるようになっていると思います！👏

ちなみに，Androidでアイコンを表示させるには

~/SampleProject/android/app $ ls
build debug.keystore src
build.gradle proguard-rules.pro

の「build.gradle」に以下を記述する必要があります．
（android下ではなく，app下のファイルであることに注意）

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

最後に

どうでしょう，うまくアイコンを表示させることはできましたか？
自分は赤文字で書いたところができてなくて，表示させるのに中々苦戦してしまいました．．．

今後も自分が苦労してうまくできたことなどを書いていけたらいいなと思っています．

次回の記事もお楽しみに！！