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 {} 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,