리액트 네이티브 안드로이드 다크 모드 자동 적용 해제하기

리액트 네이티브로 안드로이드 테스트를 하다보면 

안드로이드 기기에 다크모드를 적용한 경우 기본 boilerplate 로 제공하는 코드가 다크 모드에 반응하여

일반 Text 들이 모두 흰색이 적용되는 것을 알 수 있다.

 

보통 개발할 때 기본 색상(화이트) 모드로 먼저 개발하게 되므로 일단은 dark scheme 이 적용되지 않도록 만들고 테스트 하는 것이 경험상 편리하였다.

 

해결방법은 styles.xml(android/app/src/main/res/values/styles.xml) 파일에 android:forceDarkAllowed 속성과 android:textColor 를 추가해주면 해결된다.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:textColor">#000000</item>
    </style>
</resources>

 

---

이외에도 react-native 에서 제공하는 기본 Alert 도 색이 다크모드 색상으로 dimmed 되어 나오는 문제가 있는데 이는

MainApplication.java 파일을 수정해야한다.

 

MainApplication.java 의 상위 선언쪽에 선언 (line 16 참고)

onCreate() 함수 밑에 하이라이트 부분 추가.

 

위의 형태로 코드를 변경해주면 된다. 자세한 내용은 다음 출처에 잘 나와있다.

https://github.com/facebook/react-native/issues/31345#issuecomment-880625027

Alert not properly visible in Dark mode · Issue #31345 · facebook/react-native

 

 

출처

https://stackoverflow.com/a/70107994