Expo×Firebaseデプロイ時にアイコンが表示されないトラブルを解決!

React Native + ExpoでWebアプリを作成し、Firebase Hostingへデプロイした際に「アイコンが表示されない」問題に遭遇しました。ローカル環境では問題なく表示されるのに、本番環境(デプロイ後)のみ発生したトラブルの解決手順をシェアします。

問題の解決方法

Rootのファイルで利用しているフォントを読み込みます。

js
import {
  Ionicons,
  MaterialIcons,
  MaterialCommunityIcons,
  Feather,
  FontAwesome,
} from '@expo/vector-icons';
import { useFonts } from 'expo-font';

export default function App() {
  const [loaded] = useFonts({
    ...MaterialCommunityIcons.font,
    ...FontAwesome.font,
    ...Ionicons.font,
    ...MaterialIcons.font,
    ...Feather.font,
  });

  if (!loaded) {
    return null; // フォントが読み込まれるまでは何も表示しない
  }

  // ここにアプリのUIを定義
  return (
    // ...
  );
}

続いて.firebasercのignoreからnode_modulesを取り除きます。

.firebaserc
{
  "ignore": [
    "firebase.json",
    "**/.*"
  ]
}

上記で解決するはずです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です