NativeWind + React Navigationでダークモード絡みのエラーが発生したときの解決策

NativeWindとReact Navigationを使用すると発生するダークモード関連エラーの解決方法についての備忘録。

問題

NativeWindでReact NavigationのThemeProviderを使用すると

Cannot manually set color scheme, as dark mode is type ‘media’. Please use StyleSheet.setFlag(‘darkMode’, ‘class’

のようなエラーが発生する。

原因

NativeWindのデフォルト設定のdarkMode: 'media'が、ThemeProviderの手動カラースキーム切り替えと競合している。

対応

mediaクエリベースのダークモード設定をclassに切り替える。

1. プロジェクトルートのtailwind.config.jsファイルをテキストエディタで開く。

2. module.exports内にdarkMode: 'class'を追加する

   module.exports = {
       darkMode: 'class',
       // その他の設定...
   }

3. アプリケーションを再起動する

上記設定を行うとエラーが解消し、ThemeProviderによる手動カラースキーム切り替えもできるようになるかと思います。

参考ウェブサイトなど

• NativeWind
  Dark Mode

以上です。