feat: Allow overriding theme variant used by native ios picker (#457)

* feat: Allow overriding theme variant used by native ios picker

* docs: Give workaround for ios 13 and older version

* fix prettier

Co-authored-by: Vojtech Novak <[email protected]>

Author: AmauryLiet

README.md

@@ -58,6 +58,7 @@ React Native date & time picker component for iOS, Android and Windows.
     - [`dateFormat` (`optional`, `Windows only`)](#dateFormat-optional-windows-only)
     - [`firstDayOfWeek` (`optional`, `Windows only`)](#firstDayOfWeek-optional-windows-only)
     - [`textColor` (`optional`, `iOS only`)](#textColor-optional-ios-only)
+    - [`themeVariant` (`optional`, `iOS only`)](#themeVariant-optional-ios-only)
     - [`locale` (`optional`, `iOS only`)](#locale-optional-ios-only)
     - [`is24Hour` (`optional`, `Windows and Android only`)](#is24hour-optional-windows-and-android-only)
     - [`neutralButtonLabel` (`optional`, `Android only`)](#neutralbuttonlabel-optional-android-only)
@@ -311,6 +312,21 @@ Allows changing of the textColor of the date picker. Has effect only when `displ
 <RNDateTimePicker textColor="red" />
 ```
 
+#### `themeVariant` (`optional`, `iOS only`)
+
+Allows overriding system theme variant (dark or light mode) used by the date picker.
+
+:warning: Has effect only on iOS 14 and later. On iOS 13 & less, use `textColor` to make the picker dark-theme compatible
+
+List of possible values:
+
+- `"light"`
+- `"dark"`
+
+```js
+<RNDateTimePicker themeVariant="light" />
+```
+
 #### `locale` (`optional`, `iOS only`)
 
 Allows changing of the locale of the component. By default it uses the device's locale.

ios/RNDateTimePickerManager.m

@@ -29,6 +29,11 @@ @implementation RCTConvert(UIDatePicker)
 #endif
 }), UIDatePickerStyleAutomatic, integerValue)
 
+RCT_ENUM_CONVERTER(UIUserInterfaceStyle, (@{
+    @"dark": @(UIUserInterfaceStyleDark),
+    @"light": @(UIUserInterfaceStyleLight),
+}), UIUserInterfaceStyleUnspecified, integerValue)
+
 @end
 
 @implementation RNDateTimePickerManager
@@ -84,6 +89,17 @@ + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style {
 RCT_REMAP_VIEW_PROPERTY(mode, datePickerMode, UIDatePickerMode)
 RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone, NSTimeZone)
 
+RCT_CUSTOM_VIEW_PROPERTY(themeVariant, UIUserInterfaceStyle, RNDateTimePicker) {
+    if (@available(iOS 13.0, *)) {
+        if (json) {
+            UIUserInterfaceStyle propValue = [RCTConvert UIUserInterfaceStyle:json];
+            view.overrideUserInterfaceStyle = propValue;
+        } else {
+            view.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+        }
+    }
+}
+
 RCT_CUSTOM_VIEW_PROPERTY(textColor, UIColor, RNDateTimePicker)
 {
   if (@available(iOS 14.0, *) && view.datePickerStyle != UIDatePickerStyleWheels) {

src/datetimepicker.ios.js

@@ -52,6 +52,7 @@ export default function Picker({
   minuteInterval,
   timeZoneOffsetInMinutes,
   textColor,
+  themeVariant,
   onChange,
   disabled = false,
   ...otherProps
@@ -121,6 +122,7 @@ export default function Picker({
       timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
       onChange={_onChange}
       textColor={textColor}
+      themeVariant={themeVariant}
       onStartShouldSetResponder={() => true}
       onResponderTerminationRequest={() => false}
       displayIOS={display}

src/index.d.ts

@@ -96,6 +96,11 @@ export type IOSNativeProps = Readonly<
      */
     textColor?: string;
 
+    /**
+     * Override theme variant used by iOS native picker
+     */
+    themeVariant?: 'dark' | 'light';
+
     /**
      * Sets the preferredDatePickerStyle for picker
      */

src/types.js

@@ -115,6 +115,11 @@ export type IOSNativeProps = $ReadOnly<{|
    */
   textColor?: ?ColorValue,
 
+  /**
+   * Override theme variant used by iOS native picker
+   */
+  themeVariant?: 'dark' | 'light',
+
   /**
    * Sets the preferredDatePickerStyle for picker
    */