DatePicker Misaligned: Not Centered on iOS

[nirodhaperera-ifs]

Environment

System:
OS: macOS 15.3.2
CPU: (12) arm64 Apple M2 Pro
Memory: 121.80 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.9.0
path: /usr/local/bin/node
Yarn:
version: 1.22.5
path: /usr/local/bin/yarn
npm:
version: 10.1.0
path: /usr/local/bin/npm
Watchman:
version: 2024.08.19.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /../.rvm/gems/ruby-3.1.4/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.0
- iOS 18.0
- macOS 15.0
- tvOS 18.0
- visionOS 2.0
- watchOS 11.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode:
version: 16.0/16A242d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 3.1.4
path: /../.rvm/rubies/ruby-3.1.4/bin/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.77.0
wanted: 0.77.0
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

Platforms

iOS

Versions

• Android: N/A
• iOS: 18.0
• react-native-modal-datetime-picker: ^18.0.0
• react-native-community/datetimepicker: ^8.3.0
• react-native: 0.77.0
• react: 18.3.1

Description

After upgrading React Native to version 0.77.0 with the above mentioned dependency versions, the DatePicker for both date and time modes renders left-aligned instead of being centered on iOS. This can be fixed by adding paddingLeft using the pickerContainerStyleIOS prop.

Reproducible Demo

import React, { useState } from 'react'
import DatePicker from 'react-native-modal-datetime-picker'

export default function DateControl() {
  const [show, setShow] = useState(true)

  function handleConfirm(date) {
    console.log(date)
    setShow(false)
  }

  function handleCancel() {
    setShow(false)
  }

  return (
    <DatePicker
      isVisible={show}
      mode="date"
      onCancel={handleCancel}
      onConfirm={handleConfirm}
    />
  )
}

[macductan]

+1

[CristianFigueredo]

+2

[stefan-schweiger]

While annoying you can just set the following to fix it pickerStyleIOS={{ alignSelf: 'center' }}