react-native-modal-datetime-picker, ios13 다크모드 대응

늘 그렇듯 버그에 직면하고 해결했습니다.

ios13의 다크모드가 나오면서

이와 와같이 날짜가 나타나지 않는 (사실은 하양글씨로 바뀌어서;;)

버그를 만났습니다.

 

* 해결방법

1. 먼저, 최신버전의 react-native-modal-datetime-picker를 설치해줍니다.

제, 기준으로는 7.6 이전버전입니다.

darkMode옵션이 추가됐지만 먹지않는 상황인데요.

 

2. react-native-appearance모듈도 설치해줍니다.

rn - npm install react-native-appearance / react-native link react-native-appearance

expo - expo install react-native appearance

 

3. node_module/react-native-modal-dateitme-picker로 찾아들어갑니다.

 

4. 상단에 코드를 두줄 추가해줍니다.

import { Appearance } from 'react-native-appearance';
const colorScheme = Appearance.getColorScheme();

 

5. darkmode를 체크하는 옵션을 넣어줍니다.

defaultProps부분의 darkmode옵션을 다음과 같이 설정하면 됩니다.

isDarkModeEnabled: colorScheme === 'dark',

 

6. 마무리로 유지보수 단계에서 버전업이 혹시나라도 될수있으니 package.json의 버전을 ^7.6과 같이 고정해줍니다.

 

7. 그래도 부족하니 ReadeME에 명시해줍니다.

 

8. 7.6이상의 버전에서는 node_module까지 가지않고 isDarkModeEnabled옵션을 사용하여 간단히 처리할 수 있습니다. ^^ 업데이트 하세요~