react-native-datetimepicker / datetimepicker

React Native date & time picker component for iOS, Android and Windows
MIT License
2.51k stars 405 forks source link

[iOS/iPadOS] - `themeVariant` property not fully applied on `datetime` picker #725

Closed coolersham closed 1 year ago

coolersham commented 1 year ago

Bug report

Summary

When using the RNDateTimePicker on iOS/iPadOS in datetime mode, while overwriting the display and themeVariant as shown below the time picker popover is not receiving the correct theming.

issue

Reproducible sample code

import React from "react"

import { View } from "react-native"
import RNDateTimePicker from "@react-native-community/datetimepicker"

export default function App(): JSX.Element {
  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "white",
      }}
    >
      <RNDateTimePicker
        display={"inline"}
        mode={"datetime"}
        value={new Date()}
        themeVariant={"light"}
      />
    </View>
  )
}

Steps to reproduce

  1. Create a new react-native app with the help of the CLI (template)
  2. Install this package and all other required dependencies via npm, yarn, etc.
  3. Install pods and build the iOS/iPadOS application on a device
  4. Paste the provided reproducible code into the correct file
  5. Save and try to perceive the issue

Describe what you expected to happen:

The time picker popover should also be overwritten by the specified themeVariant property.

Environment info

react-native version: 0.71.3 datetimepicker version: 6.7.5 iOS / iPadOS version: 15.X and 16.X

... other version info is not relevant for this issue.

mykelFITLG commented 1 year ago

@coolersham same here

vonovak commented 1 year ago

Hello and thanks for reporting, the uidatepicker exposes public api to control the themeVariant and we use that. If that doesn't work, that, unfortunately, is out of our control and you can report that to apple.

Did you try using the recommended package mentioned in the readme? https://github.com/react-native-datetimepicker/datetimepicker#themevariant-optional-ios-only

Thank you 🙂

coolersham commented 1 year ago

@vonovak yes, I did set the themeVariant to light however it seems like it is not applied correctly to the UIDatePicker either by you or on the side of Apple. I am not fully aware of the conventions of open-source packages, but wouldn't reporting such a case to Apple be in the best interest of the main devs of the package?

Anyway, I am using your package now to get around this issue and would like to compliment you on that one. Easy to use and works like a charm! Thanks!

vonovak commented 1 year ago

@coolersham as I said, we use apple's public api and controlling the themeVariant works for the spinner mode so I believe the bug is on Apple's side.

I am not fully aware of the conventions of open-source packages, but wouldn't reporting such a case to Apple be in the best interest of the main devs of the package?

Well, sure, having the case reported would be in the best interest of the entire dev community, me included. Personally, I was not aware of the problem before.

Anyway, I am using your package and would like to compliment you on that one.

Thank you. Happy that it worked and that it helped.