【react native】expo使ってOSのダークモードとライトモードを取得する

react nativeでOSのダークモードとライトモードを取得する方法がすごい簡単だったのでメモします。

app.jsonの設定

userInterfaceStyleを使用して、アプリがlight mode, dark modeの両方をサポートしていることを明示的に記載します。automaticにすることで、システムの外観設定が変更された場合に通知されます。

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

useColorSchemeを使用する

呼び出しもとでuseColorSchemeを使用することで、切り替えを実装できます。

// 例
import { useColorScheme } from "react-native";

export default function App() {
  const colorMode = useColorScheme();

  return (
    <Component
      backgroundColor={colorMode === "light" ? White : Black}
    >
      <ChildComponent />
    </Component>
  );
}

参考

https://docs.expo.dev/develop/user-interface/color-themes/#configuration

https://docs.expo.dev/develop/user-interface/color-themes/