Expo Go 다크모드 인식 불가

react-native강의를 듣는 도중에, 내 폰의 다크모드가 적용되어 있음에도 불구하고, Expo Go를 통해 열려있는 개발중인 앱에는 다크모드 인식을 못하는 것을 보았다.

app.json에서 따로 설정이 필요하다는 것을 알았고, 이 문제를 해결한 내용을 기록하려 한다.

---

app.json 설정

Expo docs - 다크모드 관련 문서

Configuration
Both managed and bare projects for Android and iOS require additional configuration to support switching between light and dark modes. No additional configuration is required for the web.

라이트모드와 다크모드 간의 변경을 지원하기 위해서는 추가적인 설정이 필요하다고 한다.

app.json에 다음 옵션을 추가한다. ...는 생략

{
  "expo": {
    ...
    "userInterfaceStyle": "automatic"  // 이 옵션을 넣어야 한다.
  },
  ...
}

---

expo-system-ui 설치

In EAS Build and development builds you'll need to install the native module expo-system-ui otherwise the userInterfaceStyle property will be ignored.

userInterfaceStyle 속성이 무시될 수 있으므로 expo-system-ui를 설치해야한다.

npm install expo-system-ui

---

다크모드 인식

이제 메트로서버를 재시작하면 휴대폰 설정에서 다크모드 적용 시 어플리케이션에서도 인식하는 것을 확인할 수 있다.

다크모드를 인식하는 방법은 두 가지가 있다.

• Appearance 모듈
• useColorScheme 훅

Expo docs - detecting the color scheme
문서에 따르면 useColorScheme 훅을 사용하되 필요시 Appearance 모듈을 사용하면 될 것 같다.

import { Appearance, useColorScheme } from 'react-native';

// 방법 1: Appearance 모듈 사용
if (Appearance.getColorScheme() === 'dark') { }

// 방법 2: useColorScheme 훅 사용
if (useColorScheme() === 'dark') { }