diff --git a/ios/fabric/RNDateTimePickerComponentView.mm b/ios/fabric/RNDateTimePickerComponentView.mm index ec9d7cdc..ebe5bab4 100644 --- a/ios/fabric/RNDateTimePickerComponentView.mm +++ b/ios/fabric/RNDateTimePickerComponentView.mm @@ -104,6 +104,21 @@ - (void) updateMeasurements { } CGSize size = [_dummyPicker sizeThatFits:UILayoutFittingCompressedSize]; size.width += 10; + + // Workaround: sizeThatFits: returns incorrect height for + // UIDatePickerModeDateAndTime + UIDatePickerStyleInline (Apple bug). + // The returned height only accounts for the calendar, missing the time row. + if (@available(iOS 14.0, *)) { + if (_dummyPicker.datePickerMode == UIDatePickerModeDateAndTime && + _dummyPicker.preferredDatePickerStyle == UIDatePickerStyleInline) { + UIDatePicker *timePicker = [UIDatePicker new]; + timePicker.datePickerMode = UIDatePickerModeTime; + timePicker.preferredDatePickerStyle = UIDatePickerStyleInline; + CGSize timeSize = [timePicker sizeThatFits:UILayoutFittingCompressedSize]; + size.height += timeSize.height; + } + } + auto newState = RNDateTimePickerState{RCTSizeFromCGSize(size)}; _state->updateState(std::move(newState)); } diff --git a/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ComponentDescriptors.h b/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ComponentDescriptors.h index d51a3272..19874156 100644 --- a/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ComponentDescriptors.h +++ b/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ComponentDescriptors.h @@ -20,13 +20,12 @@ class RNDateTimePickerComponentDescriptor final : public ConcreteComponentDescri void adopt(ShadowNode& shadowNode) const override { auto& pickerShadowNode = static_cast(shadowNode); - auto& layoutableShadowNode = static_cast(pickerShadowNode); auto state = std::static_pointer_cast(shadowNode.getState()); auto stateData = state->getData(); - if(stateData.frameSize.width != 0 && stateData.frameSize.height != 0) { - layoutableShadowNode.setSize(Size{stateData.frameSize.width, stateData.frameSize.height}); + if(stateData.frameSize.height != 0) { + pickerShadowNode.setMeasuredHeight(stateData.frameSize.height); } ConcreteComponentDescriptor::adopt(shadowNode); diff --git a/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.h b/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.h index bf2fa2ea..59cdef98 100644 --- a/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.h +++ b/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.h @@ -33,6 +33,13 @@ class JSI_EXPORT RNDateTimePickerShadowNode final : public ConcreteViewShadowNod traits.set(ShadowNodeTraits::Trait::LeafYogaNode); return traits; } + + void setMeasuredHeight(float height) const { + auto style = yogaNode_.style(); + style.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(height)); + yogaNode_.setStyle(style); + yogaNode_.setDirty(true); + } }; } // namespace react