datetimepicker icon indicating copy to clipboard operation
datetimepicker copied to clipboard

iOS DatePicker Width Issue

Open Scr3nt opened this issue 3 months ago • 4 comments

Bug report

Summary

On iOS, the @react-native-community/datetimepicker component is being rendered below its minimum required width of 280 points. This affects both spinner and calendar display modes, they don't have full width.

Console Error:

[UIKitCore] UIDatePicker 0x33e96ec10 is being laid out below its minimum width of 280. This may not look like expected, especially with larger than normal font sizes.

Reproducible Sample Code

The DatePicker component wrapper:

import * as React from "react";

import i18n from "@/src/i18n/i18n";
import DateTimePicker, {
  AndroidNativeProps,
  IOSNativeProps,
} from "@react-native-community/datetimepicker";

type DatePickerProps = (AndroidNativeProps | IOSNativeProps) & {
  is24Hour?: boolean;
};

export function DatePicker(props: DatePickerProps) {
  const { is24Hour, ...restProps } = props;

  return (
    <DateTimePicker
      locale={i18n.locale ?? "en-US"}
      is24Hour={is24Hour}
      display="spinner"
      // or display="inline"
      {...restProps}
    />
  );
}

Steps to Reproduce

  1. Create a React Native app with Expo SDK 54
  2. Install @react-native-community/datetimepicker version 8.4.4
  3. Add multiple DatePicker components with display="spinner" or display="inline" modes
  4. Run the app on iOS simulator or device

Expected Behavior:

  • DatePicker components should render correctly without width warnings
  • All display modes (spinner, inline, calendar) should appear properly sized

Actual Behavior:

  • Console shows UIKitCore warning about minimum width constraint
  • DatePicker components doesn't have full width

Environment Info

# React Native environment (approximated due to CLI issues)
React Native: 0.81.4
React: 19.1.0
Expo SDK: 54.0.7
Expo CLI: 54.0.5

System Information:

  • OS: macOS 26.0 (Build 25A353)
  • Platform: iOS (Simulator and Device)
  • Architecture: Apple Silicon/Intel

Dependencies:

  • @react-native-community/datetimepicker: 8.4.4
  • expo: 54.0.7
  • react-native: 0.81.4

Scr3nt avatar Sep 16 '25 07:09 Scr3nt