question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Date Picker in Dark Mode

See original GitHub issue

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: 10.16.3 npm: 6.9.0 react-native: 0.61.1 react: 16.9.0 native-base: 2.13.8 expo: none (but snack created, see below) xcode: 11

Expected behaviour

When dark mode is turned on the date picker will show all months/dates/years as it does in light mode.

Actual behaviour

Right now I can only see November and December for months, 17th to the 20th for dates and 2020+ for years when dark mode is turned on. The other options appear to still be part of the picker, but the associated text is not visible.

Steps to reproduce

Turn on dark mode for the device Open the date picker

Snack to reproduce the issue (as long as the device is in dark mode): https://snack.expo.io/@kosullivan/nativebase-date-picker-dark-mode

How to enable dark mode: https://www.howtogeek.com/440078/how-to-enable-dark-mode-on-your-iphone-and-ipad/

image

Is the bug present in both iOS and Android or in any one of them?

iOS only

Any other additional info which would help us debug the issue quicker.

Only happens when device is in dark mode. Normal mode works fine. It seems that the selectable items are not visible, but non-selectable are. In our case the picker is only for past dates which is why only Nov/Dec are shown for 2019, but they are not selectable).

###Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:11
  • Comments:7

github_iconTop GitHub Comments

9reactions
Fokus969commented, Dec 13, 2019
            <DatePicker
              ...
              customStyles={{
                ...
                datePicker:{backgroundColor: '#222'}
              }}
          />
1reaction
BogdanTaranenkocommented, Jan 9, 2020

any progress?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dark Style - DatePicker - GitHub Pages
First, load jquery, datepicker, and the base and dark stylesheets. ... $('#simple-calendar').DatePicker({ mode: 'single', inline: true, date: new Date() }); ...
Read more >
Support Dark Mode · Issue #15 · react-native-datetimepicker ...
I just faced the issue that only parts of the DateTimePicker component would be visible in dark mode AND without the textColor prop, ......
Read more >
Configuring android date picker dialog for dark mode
Save this question. Show activity on this post. I have a date picker dialog that I use in spinner mode.
Read more >
Bootstrap 4 Dark themed date and time picker Example
Bootstrap 4 Dark themed date and time picker snippet is created by Omkar Bailkeri using Bootstrap 4. This snippet is free and open...
Read more >
Colors & Dark Mode - V-Calendar
An elegant calendar and datepicker plugin for Vuejs. ... Colors & Dark Mode. You can apply a color or dark mode by using...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found