iOS Incorrect width calculation in iOS DateTimePicker inside views with absolute positioning

[Gazfay]

Bug report

Summary

Can't resize RNDateTimePicker component to 100% in position: absolute views after upgrading react-native to 0.76.9 version. Also see that generally DateTimePicker not stable with new react-native architecture.

Reproducible sample code

If i just render this time picker inside screen:

          <DateTimePicker
            mode={'time'}
            locale='en-EN'
            value={new Date()}
            style={{ width: '100%', height: 200 }}
            onChange={() => {}}
            textColor={'white'}
            display={'spinner'}
          />

Everything works fine, but If i render this picker inside some position absolute view I see that picker width is default and I can't fit to parent width (incorrect width calculating):

      <View
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 600,
          zIndex: 100,
          height: 200,
          width: '100%',
          backgroundColor: 'green',
        }}
      >
        <DateTimePicker
          mode={'time'}
          locale='en-EN'
          value={new Date()}
          style={{ width: '100%', height: 200, backgroundColor: 'gray' }}
          onChange={() => {}}
          textColor={'white'}
          display={'spinner'}
        />
      </View>

Steps to reproduce

1. Place DateTimePicker inside position: absolute view
2. Component doesn't fit correctly to parent's width

Describe what you expected to happen:

1. Place DateTimePicker inside position: absolute view
2. Should resize to 100% of parent's width

Environment info

npx react-native info output:

System:
  OS: macOS 15.3.2
  CPU: (12) arm64 Apple M2 Max
  Memory: 104.30 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.3
    path: ~/.nvm/versions/node/v18.20.3/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.20.3/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/eduarddunda/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-31 | ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /Users/eduarddunda/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/eduarddunda/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.9
    wanted: 0.76.9
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

datetimepicker version: 8.4.1

iOS / Android version: iOS 17.5 Simulator

P.S

Screenshot with example:

1. picker picker is general component render
2. second picker is wrapper inside absolute positioned view

Screenshot

[zjkuang]

Having exactly the same issue. After having upgraded React Native from 0.75.4 to 0.76.9, the DateTimePicker can no longer stretch to the full width of the screen on iOS.

[zjkuang]

@Gazfay Adding style={{alignSelf: 'center'}} to DateTimePicker can align it to center -- an acceptable mitigation.

[drante]

To have it properly centered without hugging the content, you can try adding the following:

pickerComponentStyleIOS={{ alignSelf: 'center' }}