feat: allow overriding the iOS modal theme (light/dark) (#465)

henninghall · Feb 23, 2022 · b0280c8 · b0280c8
1 parent fbb6e59
commit b0280c8
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,