fix: ios width

Author: Scr3nt

ios/RNDateTimePicker.m

@@ -32,9 +32,6 @@ - (instancetype)initWithFrame:(CGRect)frame
     #endif
 
     _reactMinuteInterval = 1;
-    
-    // Ensure the picker can expand to fill its container
-    self.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
   }
   return self;
 }
@@ -83,11 +80,12 @@ - (CGSize)intrinsicContentSize {
     size.width = MAX(size.width, 280);
 
     // For inline (calendar) display style, suggest larger dimensions
-    // UICalendarView requires sufficient height to render its content
+    // This helps the calendar expand to fill available width
     if (@available(iOS 14.0, *)) {
         if (self.preferredDatePickerStyle == UIDatePickerStyleInline) {
-            // Suggest larger dimensions for proper calendar display
-            size.width = MAX(size.width, 320);
+            size.width = MAX(size.width, 375); // Standard iPhone width
+            
+            // UICalendarView requires sufficient height to render its content
             size.height = MAX(size.height, 330);
         }
     }

ios/RNDateTimePickerShadowView.m

@@ -70,37 +70,36 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeConstRef node, float width
 
     size = [shadowPickerView.picker sizeThatFits:UILayoutFittingCompressedSize];
 
-    // Check if we're using inline/calendar style
+    // 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);
+    
+    // Check if we're using inline/calendar style for height requirement
     BOOL isInlineStyle = NO;
     if (@available(iOS 14.0, *)) {
       isInlineStyle = shadowPickerView.picker.preferredDatePickerStyle == UIDatePickerStyleInline;
     }
 
-    // iOS DatePicker requires a minimum width of 280 points for proper display
     // UICalendarView (inline) requires a minimum height of 330 points
-    // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014
-    size.width = MAX(size.width, 280);
     if (isInlineStyle) {
       size.height = MAX(size.height, 330);
     }
 
-    // Handle width constraints
+    // 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, use the full available width
+      // For inline/calendar style, try to use the full available width
+      // For other styles, use the minimum width needed
       if (isInlineStyle) {
-        size.width = MAX(280, MIN(width, 500)); // Use available width, max 500pt
+        size.width = width; // Use full available width for calendar
       } else {
         size.width = MIN(size.width + 10, width);
       }
     } else {
-      // For undefined mode with inline style, suggest a larger width
-      if (isInlineStyle) {
-        size.width = MAX(size.width, 375);
-      } else {
-        size.width += 10;
-      }
+      // For undefined mode, add small padding
+      size.width += 10;
     }
 
     // Handle height constraints for inline style

ios/fabric/RNDateTimePickerComponentView.mm

@@ -105,16 +105,19 @@ - (void) updateMeasurements {
     CGSize size = [_dummyPicker sizeThatFits:UILayoutFittingCompressedSize];
 
     // iOS DatePicker requires a minimum width of 280 points for proper display
-    // UICalendarView (inline) requires a minimum height of 330 points
     // See: https://github.com/react-native-datetimepicker/datetimepicker/issues/1014
     size.width = MAX(size.width, 280);
 
-    // For inline (calendar) display style, use larger dimensions
-    // The actual size will be constrained by the parent container's layout
+    // 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) {
-            // Calendar needs larger dimensions for proper display
-            size.width = MAX(size.width, 320);
+            // 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
+            
+            // UICalendarView requires sufficient height to render its content
+            // Without this, we get: "UICalendarView's height is smaller than it can render its content in"
             size.height = MAX(size.height, 330);
         } else {
             size.width += 10;

src/datetimepicker.ios.js

@@ -18,7 +18,7 @@ import {
   IOS_MODE,
 } from './constants';
 import * as React from 'react';
-import {Platform, StyleSheet} from 'react-native';
+import {Platform} from 'react-native';
 
 import type {
   DateTimePickerEvent,
@@ -59,7 +59,6 @@ export default function Picker({
   display: providedDisplay = IOS_DISPLAY.default,
   // $FlowFixMe[incompatible-type]
   disabled = false,
-  style,
   ...other
 }: IOSNativeProps): React.Node {
   sharedPropsValidation({value, timeZoneOffsetInMinutes, timeZoneName, minimumDate, maximumDate});
@@ -93,21 +92,9 @@ export default function Picker({
       );
   };
 
-  // For inline/calendar display, ensure the component takes full width by default
-  const computedStyle = React.useMemo(() => {
-    if (display === IOS_DISPLAY.inline) {
-      return StyleSheet.compose(
-        {alignSelf: 'stretch'},
-        style,
-      );
-    }
-    return style;
-  }, [display, style]);
-
   return (
     <RNDateTimePicker
       {...other}
-      style={computedStyle}
       date={dateToMilliseconds(value)}
       locale={locale !== null && locale !== '' ? locale : undefined}
       maximumDate={dateToMilliseconds(maximumDate)}