iOS 14 Support new DatePicker styles

Summary: Adding support for DatePickerStyles on iOS13.4+ Changelog: [iOS][Added] - Expose UIDatePickerStyles as a prop for DatePickerIOS Reviewed By: PeteTheHeat Differential Revision: D27948608 fbshipit-source-id: fcc16c630148818d9db0c9eef8363f8592b13791
facebook · Apr 23, 2021 · 2b62e19 · 2b62e19
1 parent 5127c71
commit 2b62e19
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
@@ -101,6 +101,11 @@ type Props = $ReadOnly<{|
    * instance, to show times in Pacific Standard Time, pass -7 * 60.
    */
   timeZoneOffsetInMinutes?: ?number,
+
+  /**
+   * The date picker style
+   */
+  pickerStyle?: ?('default' | 'compact' | 'spinner' | 'inline'),
 |}>;
 
 /**
@@ -172,6 +177,7 @@ class DatePickerIOS extends React.Component<Props> {
           onChange={this._onChange}
           onStartShouldSetResponder={() => true}
           onResponderTerminationRequest={() => false}
+          pickerStyle={props.pickerStyle}
         />
       </View>
     );

diff --git a/Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js b/Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js
@@ -37,6 +37,10 @@ type NativeProps = $ReadOnly<{|
   mode?: WithDefault<'date' | 'time' | 'datetime', 'date'>,
   onChange?: ?BubblingEventHandler<Event>,
   timeZoneOffsetInMinutes?: ?Float,
+  pickerStyle?: WithDefault<
+    'default' | 'compact' | 'spinner' | 'inline',
+    'default',
+  >,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

diff --git a/React/Views/RCTDatePickerManager.m b/React/Views/RCTDatePickerManager.m
@@ -25,6 +25,24 @@ @implementation RCTConvert (UIDatePicker)
     UIDatePickerModeTime,
     integerValue)
 
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wunguarded-availability-new"
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_4
+
+RCT_ENUM_CONVERTER(
+    UIDatePickerStyle,
+    (@{
+      @"default" : @(UIDatePickerStyleAutomatic),
+      @"compact" : @(UIDatePickerStyleCompact),
+      @"spinner" : @(UIDatePickerStyleWheels),
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
+      @"inline" : @(UIDatePickerStyleInline),
+#endif
+    }),
+    UIDatePickerStyleAutomatic,
+    integerValue)
+#endif
+#pragma clang diagnostic pop
 @end
 
 @implementation RCTDatePickerManager
@@ -66,4 +84,17 @@ - (UIView *)view
   }];
 }
 
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_4
+RCT_CUSTOM_VIEW_PROPERTY(pickerStyle, UIDatePickerStyle, RCTDatePicker)
+{
+  if (@available(iOS 13.4, *)) {
+    if (json) {
+      view.preferredDatePickerStyle = [RCTConvert UIDatePickerStyle:json];
+    } else {
+      view.preferredDatePickerStyle = UIDatePickerStyleAutomatic;
+    }
+  }
+}
+#endif
+
 @end