【ReactNative開発】Native-Baseのバージョンを上げたら”Unable to resolve module native-base/Fonts/Roboto.ttf”エラーが出るようになった

こんにちは、今回もReact Native開発におけるトラブルメモです。エラーばっかりでめげそう笑

問題

Native-Baseのモジュールを直近化したところ、ReactNativeアプリが以下のエラーを吐いて起動しなくなった。

Failed building JavaScript bundle.
Unable to resolve module native-base/Fonts/Roboto.ttf from /Users/yutaroinoue/Workspace/MyFirstProjectTypeScript/App.tsx: native-base/Fonts/Roboto.ttf could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

  24 |     console.log("## CALL APP COMPONENTDIDMOUNT")
  25 |     await Font.loadAsync({
> 26 |       'Roboto': require('native-base/Fonts/Roboto.ttf'),
     |                          ^
  27 |       'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  28 |       ...Ionicons.font,
  29 |     })

原因と解決法

ここでヒントを見つけた。

https://github.com/GeekyAnts/NativeBase/issues/2731#issuecomment-513445619

確かに、最新版（3.0.3）のNode_Modules配下のNativeBaseのディレクトリ構成を見ると、そもそもFontsディレクトリがない・・仕組みが変わったのかな・・・？

古いバージョンのNativeBase (2.15.0とか）にダウングレードすることで、Fontsディレクトリも復活し、無事動作するようになった。

yarn remove native-base
yarn add native-base@2.15.0

ライブラリのバージョンアップにはこんな破壊的な変更もあるので、注意が必要ですね・・・。

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。