datetimepicker icon indicating copy to clipboard operation
datetimepicker copied to clipboard

feat(ios): allow inline calendar to fill available width

Open Scr3nt opened this issue 1 month ago • 1 comments

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):

  1. 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): Modified RNDateTimePickerShadowViewMeasure to use full available width in YGMeasureModeAtMost for 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: Updated intrinsicContentSize to suggest appropriate dimensions for inline style
  • ios/RNDateTimePickerShadowView.m: Enhanced measure function with proper width/height constraint handling
  • ios/fabric/RNDateTimePickerComponentView.mm: Updated updateMeasurements for 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

Scr3nt avatar Nov 14 '25 09:11 Scr3nt