Skip to content

iOS DatePicker Width Issue #1014

@Scr3nt

Description

@Scr3nt

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions