From b0280c82b05819c371310d4ab54e42a5f59b4045 Mon Sep 17 00:00:00 2001
From: simon-abbott <simon.abbott@airfordable.com>
Date: Wed, 23 Feb 2022 16:18:21 -0600
Subject: [PATCH] feat: allow overriding the iOS modal theme (light/dark)
 (#465)

---
 README.md                              |  1 +
 index.d.ts                             |  3 +++
 ios/RNDatePicker/RNDatePickerManager.m | 11 +++++++++++
 src/DatePickerIOS.js                   |  1 +
 src/propChecker.js                     |  7 +++++++
 src/propTypes.js                       |  6 +++++-
 6 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2021f9cc..a2b8826f 100644
--- a/README.md
+++ b/README.md
@@ -175,6 +175,7 @@ export default () => {
 | `title`                   | Modal only: Title text. Can be set to null to remove text.                                                                                                                                                                                                                                                            |
 | `confirmText`             | Modal only: Confirm button text.                                                                                                                                                                                                                                                                                      |
 | `cancelText`              | Modal only: Cancel button text.                                                                                                                                                                                                                                                                                       |
+| `theme`                   | Modal only, iOS 13+: The theme of the modal. `"light"`, `"dark"`, `"auto"`. Defaults to `"auto"`.                                                                                                                                                                                                                     |
 
 ## Linking
 
diff --git a/index.d.ts b/index.d.ts
index be35d3e0..ba1de42c 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -100,6 +100,9 @@ export interface DatePickerProps extends ViewProps {
 
   /** Modal title. Set to null to remove */
   title?: string | null
+
+  /** Modal color theme on iOS. Defaults to 'auto' */
+  theme?: 'light' | 'dark' | 'auto'
 }
 
 export default class DatePicker extends Component<DatePickerProps> {}
diff --git a/ios/RNDatePicker/RNDatePickerManager.m b/ios/RNDatePicker/RNDatePickerManager.m
index d3318290..e525f1d5 100644
--- a/ios/RNDatePicker/RNDatePickerManager.m
+++ b/ios/RNDatePicker/RNDatePickerManager.m
@@ -114,6 +114,17 @@ - (UIView *)view
             [picker setTimeZone:[RCTConvert NSTimeZone:timeZoneProp]];
         }
         
+        if(@available(iOS 13, *)) {
+            NSString * _Nonnull theme = [RCTConvert NSString:[props objectForKey:@"theme"]];
+            if ([theme isEqualToString:@"light"]) {
+                alertController.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+            } else if ([theme isEqualToString:@"dark"]) {
+                alertController.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+            } else {
+                alertController.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+            }
+        }
+        
         [alertView addSubview:picker];
         
         UIAlertAction *confirmAction = [UIAlertAction actionWithTitle:confirmText style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
diff --git a/src/DatePickerIOS.js b/src/DatePickerIOS.js
index f370a356..c7f389e7 100644
--- a/src/DatePickerIOS.js
+++ b/src/DatePickerIOS.js
@@ -36,6 +36,7 @@ export default class DatePickerIOS extends React.Component {
       locale: props.locale ? props.locale : undefined,
       maximumDate: props.maximumDate ? props.maximumDate.getTime() : undefined,
       minimumDate: props.minimumDate ? props.minimumDate.getTime() : undefined,
+      theme: props.theme ? props.theme : 'auto',
     }
   }
 
diff --git a/src/propChecker.js b/src/propChecker.js
index 2fada8df..62b4033a 100644
--- a/src/propChecker.js
+++ b/src/propChecker.js
@@ -53,10 +53,17 @@ const androidVariantCheck = new PropCheck(
   "Invalid android variant. Valid modes: 'nativeAndroid', 'iosClone'"
 )
 
+const themeCheck = new PropCheck(
+  (props) =>
+    props && props.theme && !['light', 'dark', 'auto'].includes(props.theme),
+  "Invalid theme. Valid options: 'light', 'dark', 'auto'"
+)
+
 const checks = [
   dateCheck,
   widthCheck,
   heightCheck,
   modeCheck,
   androidVariantCheck,
+  themeCheck,
 ]
diff --git a/src/propTypes.js b/src/propTypes.js
index 8f2b7b83..2f462a1c 100644
--- a/src/propTypes.js
+++ b/src/propTypes.js
@@ -8,6 +8,10 @@ const androidPropTypes = {
   is24hourSource: PropTypes.oneOf(['locale', 'device']),
 }
 
+const iOSPropTypes = {
+  theme: PropTypes.oneOf(['light', 'dark', 'auto']),
+}
+
 const modalPropTypes = {
   modal: PropTypes.bool,
   open: PropTypes.bool,
@@ -21,7 +25,7 @@ const modalPropTypes = {
 const DateType = PropTypes.instanceOf(Date)
 
 export default {
-  ...(Platform === 'android' ? androidPropTypes : {}),
+  ...(Platform === 'android' ? androidPropTypes : iOSPropTypes),
   date: DateType.isRequired,
   onChange: PropTypes.func,
   minimumDate: DateType,