fix: compute date picker dimensions in native (#656)

* Compute date picker width

* Showcase width with Text

* fix: use UIDatePickerStyle value for dimension measurements

* refactor: remove unnecessary code for height detection

* Remove no longer relevant test

* Remove unused mock

Co-authored-by: Vojtech Novak <vonovak@gmail.com>

Author: fortmarek

example/App.js

@@ -319,25 +319,31 @@ export const App = () => {
                 title="toggleMinMaxDate"
               />
             </View>
-            {show && (
-              <DateTimePicker
-                testID="dateTimePicker"
-                timeZoneOffsetInMinutes={tzOffsetInMinutes}
-                minuteInterval={interval}
-                maximumDate={maximumDate}
-                minimumDate={minimumDate}
-                value={date}
-                mode={mode}
-                is24Hour
-                display={display}
-                onChange={onChange}
-                style={styles.iOsPicker}
-                textColor={textColor || undefined}
-                accentColor={accentColor || undefined}
-                neutralButtonLabel={neutralButtonLabel}
-                disabled={disabled}
-              />
-            )}
+            <View style={{flexDirection: 'row', alignItems: 'center'}}>
+              {/* This label ensures there is no regression in this former bug: https://github.com/react-native-datetimepicker/datetimepicker/issues/409 */}
+              <Text style={{flexShrink: 1}}>
+                This is a very very very very very very long text to showcase
+                behavior
+              </Text>
+              {show && (
+                <DateTimePicker
+                  testID="dateTimePicker"
+                  timeZoneOffsetInMinutes={tzOffsetInMinutes}
+                  minuteInterval={interval}
+                  maximumDate={maximumDate}
+                  minimumDate={minimumDate}
+                  value={date}
+                  mode={mode}
+                  is24Hour
+                  display={display}
+                  onChange={onChange}
+                  textColor={textColor || undefined}
+                  accentColor={accentColor || undefined}
+                  neutralButtonLabel={neutralButtonLabel}
+                  disabled={disabled}
+                />
+              )}
+            </View>
           </View>
         </ScrollView>
       </SafeAreaView>
@@ -552,9 +558,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'normal',
   },
-  iOsPicker: {
-    flex: 1,
-  },
   windowsPicker: {
     flex: 1,
     paddingTop: 10,

ios/RNDateTimePickerManager.m

@@ -6,6 +6,7 @@
  */
 
 #import "RNDateTimePickerManager.h"
+#import "RNDateTimePickerShadowView.h"
 
 #import <React/RCTBridge.h>
 #import <React/RCTEventDispatcher.h>
@@ -53,15 +54,35 @@ @implementation RCTConvert(UIDatePicker)
 
 @end
 
-@implementation RNDateTimePickerManager
+@implementation RNDateTimePickerManager {
+  RNDateTimePicker* _picker;
+}
 
 RCT_EXPORT_MODULE()
 
+- (instancetype)init {
+  if (self = [super init]) {
+    _picker = [RNDateTimePicker new];
+  }
+  return self;
+}
+
++ (BOOL)requiresMainQueueSetup {
+  return true;
+}
+
 - (UIView *)view
 {
   return [RNDateTimePicker new];
 }
 
+- (RCTShadowView *)shadowView
+{
+  RNDateTimePickerShadowView* shadowView =  [RNDateTimePickerShadowView new];
+  shadowView.picker = _picker;
+  return shadowView;
+}
+
 + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style  API_AVAILABLE(ios(13.4)){
     // RCTConvert does not handle this.?
     switch (style) {
@@ -79,28 +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(displayIOS, RNCUIDatePickerStyle)
 
 RCT_EXPORT_VIEW_PROPERTY(date, NSDate)
 RCT_EXPORT_VIEW_PROPERTY(locale, NSLocale)

ios/RNDateTimePickerShadowView.h

@@ -0,0 +1,12 @@
+#import <React/RCTShadowView.h>
+#import "RNDateTimePicker.h"
+
+@interface RNDateTimePickerShadowView : RCTShadowView
+
+@property (nullable, nonatomic, strong) RNDateTimePicker *picker;
+@property (nonatomic) UIDatePickerMode mode;
+@property (nullable, nonatomic, strong) NSDate *date;
+@property (nullable, nonatomic, strong) NSLocale *locale;
+@property (nonatomic, assign) UIDatePickerStyle displayIOS API_AVAILABLE(ios(13.4));
+
+@end

ios/RNDateTimePickerShadowView.m

@@ -0,0 +1,55 @@
+#import "RNDateTimePickerShadowView.h"
+
+@implementation RNDateTimePickerShadowView
+
+- (instancetype)init
+{
+  if (self = [super init]) {
+    YGNodeSetMeasureFunc(self.yogaNode, RNDateTimePickerShadowViewMeasure);
+  }
+  return self;
+}
+
+- (void)setDate:(NSDate *)date {
+  _date = date;
+  YGNodeMarkDirty(self.yogaNode);
+}
+
+- (void)setLocale:(NSLocale *)locale {
+  _locale = locale;
+  YGNodeMarkDirty(self.yogaNode);
+}
+
+- (void)setMode:(UIDatePickerMode)mode {
+  _mode = 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);
+
+  __block CGSize size;
+  dispatch_sync(dispatch_get_main_queue(), ^{
+    [shadowPickerView.picker setDate:shadowPickerView.date];
+    [shadowPickerView.picker setDatePickerMode:shadowPickerView.mode];
+    [shadowPickerView.picker setLocale:shadowPickerView.locale];
+    if (@available(iOS 14.0, *)) {
+      [shadowPickerView.picker setPreferredDatePickerStyle:shadowPickerView.displayIOS];
+    }
+    size = [shadowPickerView.picker sizeThatFits:UILayoutFittingCompressedSize];
+  });
+  
+  return (YGSize){
+    RCTYogaFloatFromCoreGraphicsFloat(size.width),
+    RCTYogaFloatFromCoreGraphicsFloat(size.height)
+  };
+}
+
+@end

jest/setup.js

@@ -1,8 +0,0 @@
-import {NativeModules} from 'react-native';
-NativeModules.RNDateTimePickerManager = {
-  getDefaultDisplayValue: jest.fn(() =>
-    Promise.resolve({
-      determinedDisplayValue: 'spinner',
-    }),
-  ),
-};

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}

src/layoutUtilsIOS.js

@@ -1,27 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DateTimePicker RNDateTimePickerIOS style props applies styling to DatePicker 1`] = `
-<RNDateTimePicker
-  date={1376949600000}
-  displayIOS="default"
-  enabled={true}
-  mode="date"
-  onChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "height": 216,
-      },
-      {
-        "backgroundColor": "red",
-      },
-    ]
-  }
-/>
-`;
-
 exports[`DateTimePicker given a component for android / iOS renders a component (iOS) / null (android) 1`] = `
 <RNDateTimePicker
   date={1376949600000}
@@ -31,11 +9,6 @@ exports[`DateTimePicker given a component for android / iOS renders a component
   onChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "height": 216,
-    }
-  }
 />
 `;