💡

react native expoでダークモードにならない

に公開
JavaScript
React Native
Expo
ダークモード
darkmode
tech

現象

OS側のダークモードの設定を取得すると設定がダークモードになっていても常にlightが返ってくる。特にシミュレーターが変わらなくてはまったので共有しておきます。最近作ったプロジェクトなのでreact-nativeのバージョンは0.64.3です。

結論

  • expoの設定、app.json | app.config.jsに"userInterfaceStyle": "automatic"を追加してexpoを再起動する。
  • Remote Debugging（Chromeのデベロッパーツールでのデバッグ）を止める。シミュレーターが変わらなかったのはこれ。

参考

解説

多分使ってる方多いと思いますがreact navigationを使っていてダークモードの設定はこんな感じで簡単にできます。

import { useColorScheme } from 'react-native';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

function App() {
  const scheme = useColorScheme();
  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      ...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

useColorSchemeはreact nativeの機能でシステムの設定をdarkかlightで返します。これがデフォルトではOSの設定をダークモードにしても必ずlightが返ってきます。

こちらの公式ドキュメントを見れば書いてあるのですがapp.jsonにuserInterfaceStyleの設定を足す必要があります。

{
  "expo": {
    "userInterfaceStyle": "automatic"

これですんなり変わる人もいると思いますが、ios/androidともシミュレーターが変わりませんでした。

useColorSchemeのドキュメントを見ると・・・

Note: Currently due to technical constraints, when the Chrome debugger is enabled, this hook will always return "light".

ということなのでどうやらChromeでデバッグ中は値が取得できないようです。つまりexpoアプリのデベロッパーメニューからDebug Remote JSを起動した状態だとこの値が常にlightになってしまいます。ダークモードで確認したい場合はデベロッパーメニューを開いてStop Remote Debuggingしてください。

Discussion