iOS 13.0 dark mode support

[luisjimenezorozcoGL]

System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 6.44 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.6.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 23, 25, 26, 28, 29
Build Tools: 27.0.3, 28.0.3, 29.0.1
System Images: android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 11.0/11A420a - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0
npmGlobalPackages:
react-native-cli: 2.0.1

iOS 13.0

• Android:
• iOS:
• react-native-modal-datetime-picker:
• react-native:
• react:

[mmazzarolo]

@luisjimenezorozcoGL have you tried it on the original react-native pickers? (See the issue template)

[arjunnaha]

I believe this is a dark mode/light mode issue. While the dates look empty, you can feel the haptic response when scrolling, and switching to light mode brings up the dates again.

[mmazzarolo]

@arjunnaha thanks for reporting! I can't test it on iOS13 yet, but I guess this is more of a react-native picker issue than one specific to this repo.
It would also be interesting knowing if the community react-native-datetimepicker solves the issue (#276)
I'm leaving the issue open.

[RuslanShlinchak]

@arjunnaha
I also managed to reproduce this problem on dark theme

[mohamedabusrea]

in Dark theme, the text color will be white so it won't be visible with the container white box.

Workaround: I used react-native-dark-mode to detect the dark mode and changed the color of that container to a suitable color.

[PaitoAnderson]

Just a workaround, but I added this to the Info.plist to disable dark mode for now:

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

[mmazzarolo]

@PaitoAnderson you might wanna try #288

[emildancescu]

@PaitoAnderson you might wanna try #288

I've tried it, but for some reason even explicitly setting isDarkModeEnabled={true} does not work. The background is still white.

[mmazzarolo]

@emildancescu you sure the new version was being picked up by react-native? (you can check it directly in node_modules).
That's weird, setting isDarkModeEnabled={true} in the example works for me.

[emildancescu]

@mmazzarolo yes, I checked node_modules before writing; I've checked the implementation and I saw nothing wrong. I'll see what I can do.

[mmazzarolo]

@emildancescu now the PR is released on npm

[emildancescu]

I'm running the app with the Expo client.

[rxhivzero]

I use appearance fix this

import { Appearance } from 'react-native-appearance'

const colorScheme = Appearance.getColorScheme()
const isDarkModeEnabled = colorScheme === 'dark'

DateTimePicker add isDarkModeEnabled={isDarkModeEnabled}

[mmazzarolo]

🎈 https://github.com/mmazzarolo/react-native-modal-datetime-picker#is-the-ios-dark-mode-supported

[Fernando922]

@PaitoAnderson SOLLLLLLLLLLVEDDDD!! thank you!

[martabacc]

I just want to say thank you for this comment, this saved my day. God bless ^^