iOS 13 dark mode white font on white background

[ymc-thzi]

Expected Behavior

On iOS 13 when dark mode enabled all fonts are white on the white background. Is there any chance to change the appeareance? i.E. like on react native search inputs you can set keyboardAppearance="dark"

Expected Behavior

iOS Dates are visible

Environment

iOS 13

[turpana]

For anyone looking for a workaround while support is developed, looks like you can opt-out of supporting dark mode by setting UIUserInterfaceStyle key to Light in Info.plist.

[ymc-thzi]

@turpana ah cool, that's an option. I installed https://www.npmjs.com/package/react-native-dark-mode to check dark or light (because of maybe forthcoming app theme) and done something like this ... customStyles={{ datePicker: { backgroundColor: OSAppeareance === 'dark' ? '#222' : 'white' }, datePickerCon: { backgroundColor: OSAppeareance === 'dark' ? '#333' : 'white' }, ...

[AugustusCosta]

@ymc-thzi nice work man!

For Expo just install and follow config info: https://github.com/expo/react-native-appearance Nice post for how to uptate https://blog.expo.io/expo-sdk-35-is-now-available-beee0dfafbf4

const colorScheme = Appearance.getColorScheme();

... customStyles={{ datePicker: { backgroundColor: colorScheme === 'dark' ? '#222' : 'white' }, datePickerCon: { backgroundColor: colorScheme === 'dark' ? '#333' : 'white' }, ...

[denisrmacedo]

@AugustusCosta it solved my problem great job

[GitHubGreg]

I think the solution from @AugustusCosta requires react-native link, which would only work for detached Expo projects.

[AugustusCosta]

@GitHubGreg That's exactly what I meant with "For Expo". =]

[beaur]

For Expo35+ the react-native-appearance library is included for expo projects.

You can also set the Info.plist values in expos app.json to opt out of dark mode.

    "ios": {
      "infoPlist": {
        "UIUserInterfaceStyle": "Light",
      }
    },

[jdhorner]

We're not supporting dark mode just yet in our Expo/RN-based app, so instead of installing any new packages or editing app.json, I just wanted to add these styles to the picker:

customStyles={{
  datePicker: {
    color: 'black',
    ios_backgroundColor: 'white',
    backgroundColor: 'white',
  },
  datePickerCon: {
    color: 'black',
    ios_backgroundColor: 'white',
    backgroundColor: 'white',
  },
}}

but it doesn't make any difference. If the phone is in dark mode, you can't see the text, no matter what. Am I not setting the proper styles to make the text visible in any mode?

[Mohammad-Khalid23]

Issue resolved https://github.com/xgfe/react-native-datepicker/issues/375#issuecomment-544408681

[guptanisha]

@beaurushton this solution doesn't work for me. Do u use expo standalone app?

[beaur]

@guptanisha Yes the iOS infoPList will only be read when creating a standalone app, not within the expo client app.

[alexeyvax]

Fixed it by adding prop color="grey"

<TextInput
  ...
  color="grey"
/>

But I'm not sure that is working for datepicker

[rajneshbiz]

backgroundColor

This is not working in android case.

Code .

<DatePicker style={{width: '100%'}} date={birthDate} mode="date" androidMode="spinner" placeholder="Select date" placeholderTextColor={colors.grey} format="MM/DD/YYYY" confirmBtnText="Confirm" cancelBtnText="Cancel" showIcon={false} maxDate={new Date()} onDateChange={(selectedDate) => { const currentDate = selectedDate || Date(); setBirthDate(currentDate); setEditUserData((prevState) => ({ ...prevState, birth_date: moment(selectedDate).format('YYYY-MM-DD'), })); }} customStyles={{ datePicker: { backgroundColor: '#222', }, dateInput: { borderWidth: 0, borderBottomWidth: 1, paddingBottom: 5, paddingTop: 5, textAlign: 'left', alignItems: 'flex-start', marginLeft: 12, marginRight: -8, width: 250, }, dateText: { marginLeft: 8, color: colors.text, fontSize: Platform.OS === 'ios' ? 16 : 14, }, dateIcon: { width: 0, height: 0, }, datePickerCon: { backgroundColor: '#222', }, btnTextConfirm: { color: theme.lightColors.primary, }, btnTextCancel: { color: 'red', }, // ... You can check the source to find the other keys. }} />

My app has dark mode support inside app, When I switch app into dark mode then the background is not black color But when I do device dark mode then it works properly even without below code

... customStyles={{ datePicker: { backgroundColor: colorScheme === 'dark' ? '#222' : 'white' }, datePickerCon: { backgroundColor: colorScheme === 'dark' ? '#333' : 'white' }, ...

[salmanullahkhan15]

For anyone looking for a workaround while support is developed, looks like you can opt-out of supporting dark mode by setting UIUserInterfaceStyle key to Light in Info.plist.

This is not working for me

[ghost]

For anyone looking for a workaround while support is developed, looks like you can opt-out of supporting dark mode by setting UIUserInterfaceStyle key to Light in Info.plist.

This is not working for me

try to re-run the app --- react-native run-ios

[Mersall]

Help me. It is react-native-datepicker but not working correctly.

<DatePicker iOSDatePickerComponent={(props) => ( <RNDatePicker {...props} display={ Platform.OS === "ios" ? "spinner" : "default" } /> )} ..../>

[krishan-kumar-mourya]

@Mersall @topcoder1208 Did you get any solution for it?

[Lexdgr8est]

Use the date picker like this: <DateTimePicker value={date} mode="date" is24Hour={true} display="default" onChange={onChange} display={ Platform.OS === "ios" ? "spinner" : "calendar" } style={{ backfaceVisibility: "hidden", }} textColor="black" />

[msmrc]

Use the date picker like this: <DateTimePicker value={date} mode="date" is24Hour={true} display="default" onChange={onChange} display={ Platform.OS === "ios" ? "spinner" : "calendar" } style={{ backfaceVisibility: "hidden", }} textColor="black" />

Hi! It's the best for me, thank you!