React-native-modal-datetime-picker: Dates are not showing on iOS

[EdmundMai]

Environment

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 1.81 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.6.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.11.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 29
        Build Tools: 29.0.2
        System Images: android-29 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5791312
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-log-ios: 1.0.1

Platforms

iOS

Versions

• Android:
• iOS: 13.1.1
• react-native-modal-datetime-picker: ^7.5.0
• react-native: Using expo: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz
• react: 16.8.3

Description

Reproducible Demo

import React, { useState } from "react";
import DateTimePicker from "react-native-modal-datetime-picker";
import { View, Text, TouchableOpacity } from "react-native";

const Notifications = () => {
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);

  return (
    <View>
      <TouchableOpacity onPress={() => setIsDatePickerVisible(true)}>
        <Text>Click me</Text>
      </TouchableOpacity>
      <DateTimePicker
        isVisible={isDatePickerVisible}
        mode="time"
        onConfirm={time => {
          setIsDatePickerVisible(false);
        }}
        onCancel={() => setIsDatePickerVisible(false)}
      />
    </Container>
  );
};

export default Notifications;

[EdmundMai]

This is happening on a iPhone 7 by the way

[mmazzarolo]

@EdmundMai thanks for reporting. This seems somewhat related to https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/283 .
I guess it's just in Expo? Not sure why though...
Do you mind checking if https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/262 fixes your issue?

[EdmundMai]

@mmazzarolo I think it could be the dark mode stuff! That person's screenshot looks the same. I'll take a look at it

[mmazzarolo]

@EdmundMai did you recently update Expo? I don't get what started causing this issue, if it is a change on our side or something different happening on Expo 🤔

[mmazzarolo]

Might be related: https://github.com/facebook/react-native/issues/26299

[EdmundMai]

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

Thanks a lot for the help!

[mmazzarolo]

Glad it worked!