From dd7d7b3ef585c4cce706b646b2070c0a8c570b3d Mon Sep 17 00:00:00 2001 From: Gino Dzin Date: Thu, 13 Nov 2025 15:21:04 +0100 Subject: [PATCH 1/3] 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/3] 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/3] 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)); }