From dd7d7b3ef585c4cce706b646b2070c0a8c570b3d Mon Sep 17 00:00:00 2001 From: Gino Dzin Date: Thu, 13 Nov 2025 15:21:04 +0100 Subject: [PATCH 1/5] fix: ios width --- ios/RNDateTimePickerShadowView.m | 3 +++ ios/fabric/RNDateTimePickerComponentView.mm | 3 +++ 2 files changed, 6 insertions(+) diff --git a/ios/RNDateTimePickerShadowView.m b/ios/RNDateTimePickerShadowView.m index 4ff33623..b188e366 100644 --- a/ios/RNDateTimePickerShadowView.m +++ b/ios/RNDateTimePickerShadowView.m @@ -69,6 +69,9 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeConstRef node, float width } size = [shadowPickerView.picker sizeThatFits:UILayoutFittingCompressedSize]; + // iOS DatePicker requires a minimum width of 280 points for proper display + // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 + size.width = MAX(size.width, 280); size.width += 10; }); diff --git a/ios/fabric/RNDateTimePickerComponentView.mm b/ios/fabric/RNDateTimePickerComponentView.mm index 3afc9c09..5eb08d8b 100644 --- a/ios/fabric/RNDateTimePickerComponentView.mm +++ b/ios/fabric/RNDateTimePickerComponentView.mm @@ -103,6 +103,9 @@ - (void) updateMeasurements { return; } CGSize size = [_dummyPicker sizeThatFits:UILayoutFittingCompressedSize]; + // iOS DatePicker requires a minimum width of 280 points for proper display + // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 + size.width = MAX(size.width, 280); size.width += 10; auto newState = RNDateTimePickerState{RCTSizeFromCGSize(size)}; _state->updateState(std::move(newState)); From bfe0b416a9564099f11605f3be1aff82869dc9c2 Mon Sep 17 00:00:00 2001 From: Gino Dzin Date: Thu, 13 Nov 2025 15:38:38 +0100 Subject: [PATCH 2/5] fix: ios width --- ios/RNDateTimePicker.m | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ios/RNDateTimePicker.m b/ios/RNDateTimePicker.m index 9c73c8ef..8b85a956 100644 --- a/ios/RNDateTimePicker.m +++ b/ios/RNDateTimePicker.m @@ -72,4 +72,12 @@ - (void)setDate:(NSDate *)date { } } +- (CGSize)intrinsicContentSize { + CGSize size = [super intrinsicContentSize]; + // iOS DatePicker requires a minimum width of 280 points for proper display + // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 + size.width = MAX(size.width, 280); + return size; +} + @end From b6f75a8123ba4907ad3cd62b9efaa7bac0bcc744 Mon Sep 17 00:00:00 2001 From: Gino Dzin Date: Thu, 13 Nov 2025 16:33:52 +0100 Subject: [PATCH 3/5] fix: ios width --- ios/RNDateTimePicker.m | 9 +++++++++ ios/RNDateTimePickerShadowView.m | 22 ++++++++++++++++++++- ios/fabric/RNDateTimePickerComponentView.mm | 16 ++++++++++++++- 3 files changed, 45 insertions(+), 2 deletions(-) diff --git a/ios/RNDateTimePicker.m b/ios/RNDateTimePicker.m index 8b85a956..799162e7 100644 --- a/ios/RNDateTimePicker.m +++ b/ios/RNDateTimePicker.m @@ -77,6 +77,15 @@ - (CGSize)intrinsicContentSize { // iOS DatePicker requires a minimum width of 280 points for proper display // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 size.width = MAX(size.width, 280); + + // For inline (calendar) display style, suggest a larger width + // This helps the calendar expand to fill available width + if (@available(iOS 14.0, *)) { + if (self.preferredDatePickerStyle == UIDatePickerStyleInline) { + size.width = MAX(size.width, 375); // Standard iPhone width + } + } + return size; } diff --git a/ios/RNDateTimePickerShadowView.m b/ios/RNDateTimePickerShadowView.m index b188e366..62a808fa 100644 --- a/ios/RNDateTimePickerShadowView.m +++ b/ios/RNDateTimePickerShadowView.m @@ -72,7 +72,27 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeConstRef node, float width // iOS DatePicker requires a minimum width of 280 points for proper display // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 size.width = MAX(size.width, 280); - size.width += 10; + + // Respect the provided width constraint to allow the picker to expand to full width + // when a specific width is provided or when measuring at-most mode + if (widthMode == YGMeasureModeExactly) { + size.width = width; + } else if (widthMode == YGMeasureModeAtMost) { + // For inline/calendar style, try to use the full available width + // For other styles, use the minimum width needed + if (@available(iOS 14.0, *)) { + if (shadowPickerView.picker.preferredDatePickerStyle == UIDatePickerStyleInline) { + size.width = width; // Use full available width for calendar + } else { + size.width = MIN(size.width + 10, width); + } + } else { + size.width = MIN(size.width + 10, width); + } + } else { + // For undefined mode, add small padding + size.width += 10; + } }); return (YGSize){ diff --git a/ios/fabric/RNDateTimePickerComponentView.mm b/ios/fabric/RNDateTimePickerComponentView.mm index 5eb08d8b..4d30547e 100644 --- a/ios/fabric/RNDateTimePickerComponentView.mm +++ b/ios/fabric/RNDateTimePickerComponentView.mm @@ -106,7 +106,21 @@ - (void) updateMeasurements { // iOS DatePicker requires a minimum width of 280 points for proper display // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 size.width = MAX(size.width, 280); - size.width += 10; + + // For inline (calendar) display style, use a larger default width to fill the container + // The actual width will be constrained by the parent container's layout + if (@available(iOS 14.0, *)) { + if (_dummyPicker.preferredDatePickerStyle == UIDatePickerStyleInline) { + // Use a large width that will be constrained by the parent + // This allows the calendar to expand to full width of its container + size.width = 375; // Standard iPhone width, will be constrained by parent if smaller + } else { + size.width += 10; + } + } else { + size.width += 10; + } + auto newState = RNDateTimePickerState{RCTSizeFromCGSize(size)}; _state->updateState(std::move(newState)); } From ca5cfefa96e07d7f532cc1dd78762f64c6d68b14 Mon Sep 17 00:00:00 2001 From: Gino Dzin Date: Tue, 17 Feb 2026 19:55:51 +0100 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20fix:=20iOS=20inline=20dateTi?= =?UTF-8?q?me=20picker=20height?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ios/fabric/RNDateTimePickerComponentView.mm | 28 ++++++++++----------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/ios/fabric/RNDateTimePickerComponentView.mm b/ios/fabric/RNDateTimePickerComponentView.mm index 4d30547e..356230a1 100644 --- a/ios/fabric/RNDateTimePickerComponentView.mm +++ b/ios/fabric/RNDateTimePickerComponentView.mm @@ -103,24 +103,22 @@ - (void) updateMeasurements { return; } CGSize size = [_dummyPicker sizeThatFits:UILayoutFittingCompressedSize]; - // iOS DatePicker requires a minimum width of 280 points for proper display - // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014 - size.width = MAX(size.width, 280); - - // For inline (calendar) display style, use a larger default width to fill the container - // The actual width will be constrained by the parent container's layout + 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.preferredDatePickerStyle == UIDatePickerStyleInline) { - // Use a large width that will be constrained by the parent - // This allows the calendar to expand to full width of its container - size.width = 375; // Standard iPhone width, will be constrained by parent if smaller - } else { - size.width += 10; + 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; } - } else { - size.width += 10; } - + auto newState = RNDateTimePickerState{RCTSizeFromCGSize(size)}; _state->updateState(std::move(newState)); } From 2bece45eec07d13dd74d9d2b88618d7c7c6f8ca0 Mon Sep 17 00:00:00 2001 From: Gino Dzin Date: Mon, 16 Feb 2026 11:21:41 +0100 Subject: [PATCH 5/5] fix(ios/fabric): stop overriding JS width in Yoga layout The `adopt` method in `ComponentDescriptors.h` called `setSize()` with both width and height from `sizeThatFits:UILayoutFittingCompressedSize`. Because `UIDatePicker` has a native minimum width of 280pt, this forced a fixed width on the Yoga node, overriding any JS style such as `width: "100%"`. Only set the **height** from the native measurement and let the JS side control the width through regular Yoga styles. Adds `setMeasuredHeight()` to `RNDateTimePickerShadowNode` which sets only `yoga::Dimension::Height` on the Yoga node style, leaving the width dimension untouched. Fixes #1014 --- .../components/RNDateTimePicker/ComponentDescriptors.h | 5 ++--- .../renderer/components/RNDateTimePicker/ShadowNodes.h | 7 +++++++ 2 files changed, 9 insertions(+), 3 deletions(-) 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