React Native 다크모드 해제하기 (disable darkMode, darkMode : false)

React Native로 빌드한 앱에서 다크모드를 적용하면 textInput의 입력이 안보이거나 Text의 기본 색이 변하는 등의 문제가 있다. (다크모드 설정을 안해줬을 때)

다크모드를 적용하려면 스타일에서 색이 들어가는 모든 부분을 글로벌로 관리해줘야 한다. 굳이 다크모드가 필요한 앱이 아니라면 시간이 많이 소요되기 때문에 앱 설정에서 다크모드를 막는 방법으로 해결할 수 있다.

AOS, IOS 각각 설정이 필요하다.

1. AOS (android)

android > app > src > main > res > values > styles.xml
위 경로를 따라 들어가면 앱 테마를 설정하는 부분이 있다.

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

위 코드를 아래 처럼 바꿔준다.

    <!-- 기본적으로 Light 모드 => Light.NoActionBar -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">#000000</item>
        <!-- 다크모드 해제 -->
        <item name="android:forceDarkAllowed">false</item>
    </style>

2. IOS (iphone)

ios > '프로젝트명' > inpo.plist
(파일검색에 info.plist 를 검색하면 바로 찾을 수 있다.)

key와 string이 있는곳에 아래 코드를 추가해준다.

  <key>UIUserInterfaceStyle</key>
 	<string>Light</string>

---

** 위와 같이 info.plist 에만 추가 해주는 방법 말고 다른 방법도 있다고 한다.

위 방법으로도 충분하겠지만 혹시 문제가 있다면 아래 방법도 있으니 시도해보자.

   // AppDeletegate.m
    if (@available(iOS 13.0, *)) {
        rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
    }