Merge pull request #1 from react-native-datetimepicker/fix/style

fix: use UIDatePickerStyle value for dimension measurements

ios/RNDateTimePickerManager.m

@@ -100,33 +100,10 @@ + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style  API_AVAILABLE(
     }
 }
 
-RCT_EXPORT_METHOD(getDefaultDisplayValue:(NSDictionary *)options resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
-{
-    dispatch_async(dispatch_get_main_queue(), ^{
-      if (@available(iOS 13.4, *)) {
-        UIDatePicker* view = [RNDateTimePicker new];
-
-        view.preferredDatePickerStyle = UIDatePickerStyleAutomatic;
-        UIDatePickerMode renderedMode = [RCTConvert UIDatePickerMode:options[@"mode"]];
-        view.datePickerMode = renderedMode;
-        // NOTE afaict we do not need to measure the actual dimensions here, but if we do, just look at the original PR
-
-        UIDatePickerStyle determinedDisplayValue = view.datePickerStyle;
-
-        resolve(@{
-                 @"determinedDisplayValue": [RNDateTimePickerManager datepickerStyleToString:determinedDisplayValue],
-                });
-      } else {
-        // never happens; the condition is just to avoid compiler warnings
-        reject(@"UNEXPECTED_CALL", @"unexpected getDefaultDisplayValue() call", nil);
-      }
-    });
-}
-
 RCT_EXPORT_SHADOW_PROPERTY(date, NSDate)
 RCT_EXPORT_SHADOW_PROPERTY(mode, UIDatePickerMode)
 RCT_EXPORT_SHADOW_PROPERTY(locale, NSLocale)
-RCT_EXPORT_SHADOW_PROPERTY(datePickerStyle, UIDatePickerStyle)
+RCT_EXPORT_SHADOW_PROPERTY(displayIOS, RNCUIDatePickerStyle)
 
 RCT_EXPORT_VIEW_PROPERTY(date, NSDate)
 RCT_EXPORT_VIEW_PROPERTY(locale, NSLocale)

ios/RNDateTimePickerShadowView.h

@@ -7,6 +7,6 @@
 @property (nonatomic) UIDatePickerMode mode;
 @property (nullable, nonatomic, strong) NSDate *date;
 @property (nullable, nonatomic, strong) NSLocale *locale;
-@property (nonatomic, readonly, assign) UIDatePickerStyle datePickerStyle API_AVAILABLE(ios(13.4));
+@property (nonatomic, assign) UIDatePickerStyle displayIOS API_AVAILABLE(ios(13.4));
 
 @end

ios/RNDateTimePickerShadowView.m

@@ -25,6 +25,12 @@ - (void)setMode:(UIDatePickerMode)mode {
   YGNodeMarkDirty(self.yogaNode);
 }
 
+
+- (void)setDisplayIOS:(UIDatePickerStyle)displayIOS {
+  _displayIOS = displayIOS;
+  YGNodeMarkDirty(self.yogaNode);
+}
+
 static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode)
 {
   RNDateTimePickerShadowView *shadowPickerView = (__bridge RNDateTimePickerShadowView *)YGNodeGetContext(node);
@@ -35,7 +41,7 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGM
     [shadowPickerView.picker setDatePickerMode:shadowPickerView.mode];
     [shadowPickerView.picker setLocale:shadowPickerView.locale];
     if (@available(iOS 14.0, *)) {
-      [shadowPickerView.picker setPreferredDatePickerStyle:shadowPickerView.datePickerStyle];
+      [shadowPickerView.picker setPreferredDatePickerStyle:shadowPickerView.displayIOS];
     }
     size = [shadowPickerView.picker sizeThatFits:UILayoutFittingCompressedSize];
   });

src/datetimepicker.ios.js

@@ -14,8 +14,7 @@ import {sharedPropsValidation, toMilliseconds} from './utils';
 import {IOS_DISPLAY, ANDROID_MODE, EVENT_TYPE_SET} from './constants';
 import invariant from 'invariant';
 import * as React from 'react';
-import {getPickerHeightStyle} from './layoutUtilsIOS';
-import {Platform, StyleSheet} from 'react-native';
+import {Platform} from 'react-native';
 
 import type {
   NativeEventIOS,
@@ -61,7 +60,6 @@ export default function Picker({
 }: IOSNativeProps): React.Node {
   sharedPropsValidation({value});
 
-  const [heightStyle, setHeightStyle] = React.useState(undefined);
   const _picker: NativeRef = React.useRef(null);
   const display = getDisplaySafe(providedDisplay);
 
@@ -80,18 +78,6 @@ export default function Picker({
     [onChange, value],
   );
 
-  React.useEffect(
-    function ensureCorrectHeight() {
-      const height = getPickerHeightStyle(display, mode);
-      if (height instanceof Promise) {
-        height.then(setHeightStyle);
-      } else {
-        setHeightStyle(height);
-      }
-    },
-    [display, mode],
-  );
-
   const _onChange = (event: NativeEventIOS) => {
     const timestamp = event.nativeEvent.timestamp;
     // $FlowFixMe Cannot assign object literal to `unifiedEvent` because number [1] is incompatible with undefined [2] in property `nativeEvent.timestamp`.
@@ -104,11 +90,6 @@ export default function Picker({
 
   invariant(value, 'A date or time should be specified as `value`.');
 
-  if (!heightStyle) {
-    // wait for height to be available in state
-    return null;
-  }
-
   const dates: DatePickerOptions = {value, maximumDate, minimumDate};
   toMilliseconds(dates, 'value', 'minimumDate', 'maximumDate');
 
@@ -117,7 +98,7 @@ export default function Picker({
     <RNDateTimePicker
       testID={testID}
       ref={_picker}
-      style={StyleSheet.compose(heightStyle, style)}
+      style={style}
       date={dates.value}
       locale={locale !== null && locale !== '' ? locale : undefined}
       maximumDate={dates.maximumDate}