datetimepicker
datetimepicker copied to clipboard
feat(ios): allow inline calendar to fill available width
Summary
PR made with Cursor AI
Motivation
Fixes https://github.com/react-native-datetimepicker/datetimepicker/issues/1014
This PR resolves layout issues with the iOS DateTimePicker component when using display="inline" (calendar mode):
- Width Issue: The calendar was not expanding to fill its container width, appearing narrow even when ample space was available
Implementation
Width Fix
Updated the Yoga layout measurement functions to properly respect layout constraints:
- Paper Architecture (
RNDateTimePickerShadowView.m): ModifiedRNDateTimePickerShadowViewMeasureto use full available width inYGMeasureModeAtMostfor inline/calendar display - Fabric Architecture (
RNDateTimePickerComponentView.mm): Set larger default width (375pt) for inline style which gets properly constrained by parent - Intrinsic Content Size (
RNDateTimePicker.m): Updated to suggest 375pt width for inline display to help with layout calculations
Key Changes:
ios/RNDateTimePicker.m: UpdatedintrinsicContentSizeto suggest appropriate dimensions for inline styleios/RNDateTimePickerShadowView.m: Enhanced measure function with proper width/height constraint handlingios/fabric/RNDateTimePickerComponentView.mm: UpdatedupdateMeasurementsfor both width and height
Impact Areas
- iOS Paper Architecture (old React Native architecture)
- iOS Fabric Architecture (new React Native architecture)
- Only affects
display="inline"mode (calendar view) - Other display modes (spinner, compact) remain unchanged
Test Plan
Steps to Reproduce
<View style={{ width: 320 }}> <DateTimePicker mode="date" display="inline" value={date} /> </View>
Compatibility
| OS | Implemented |
|---|---|
| iOS | ✅ |
| Android | ❌ |
Note: This is an iOS-specific fix. Android does not have these UIKit warnings.
Checklist
- [x] I have tested this on a device and a simulator
- [ ] I added the documentation in
README.md - [ ] I updated the typed files (TS and Flow)
- [ ] I added a sample use of the API in the example project (
example/App.js) - [ ] I have added automated tests, either in JS or e2e tests, as applicable