💡
react native expoでダークモードにならない
現象
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