react-native-modal-datetime-picker を使っていて、ダークモードで表示すると、ドラムロールのテキスト部分が白くなって日付が見えなくなる問題に悩んでいました。日付の部分が真っ白くなって、何の日付を選択しているかがわからなくなるのです。
![](https://www.oreno-code.com/wp-content/uploads/2023/09/835913d84b3e05513b6680629a6c93fe-1024x503.jpg)
以下のように textColor
を設定することで、日付が見えるようになりました。
Sample.tsx
<DateTimePickerModal
buttonTextColorIOS={'#2196F3'}
pickerComponentStyleIOS={{ backgroundColor: '#fff' }}
pickerContainerStyleIOS={{ backgroundColor: '#fff' }}
pickerStyleIOS={{ backgroundColor: '#fff' }}
textColor={'#000'}
isVisible={isDatePickerVisible}
date={date}
mode="date"
onConfirm={(date) => {
onDateChange(date);
setDatePickerVisibility(false);
}}
locale={languageTag}
isDarkModeEnabled={false}
onCancel={() => {
setDatePickerVisibility(false);
}}
maximumDate={new Date(2099, 11, 31)}
minimumDate={new Date(2010, 0, 1)}
/>
上の例は、以下のように表示されます。
![](https://www.oreno-code.com/wp-content/uploads/2023/09/a71d08d9ed1573ff14044b07e92ae2a8.jpg)
上のように表示されるのはごく当たり前に見えるかもしれませんが、意外と悩んでいる人は他にもいそうでした。
解決には以下の Issue を参考にしました。