Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

DateTimePicker

A date and time picker compatible with @react-native-community/datetimepicker.

Android
iOS

GitHub

npm

Changelog

Bundled version:
~55.0.3

A DateTimePicker component with an API compatible with @react-native-community/datetimepicker. It uses Jetpack Compose on Android and SwiftUI on iOS, providing a modern Material 3 and SwiftUI appearance by default (the community module defaults to the older look on Android).

DateTimePicker component is fully declarative. Use the presentation prop to render the picker 'inline' directly in the view hierarchy or as a 'dialog' on Android. There is no Android imperative API (DateTimePickerAndroid.open()).

Under the hood this component wraps the platform-specific @expo/ui primitives:

If you need lower-level control (custom modifiers, styles, or layouts), use those primitives directly.

Installation

Terminal
- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Migrating from @react-native-community/datetimepicker

  • Update the import from import DateTimePicker from '@react-native-community/datetimepicker' to import DateTimePicker from '@expo/ui/datetimepicker'.
  • There is no imperative DateTimePickerAndroid.open() API. Render the component and use presentation="dialog" instead.
  • minuteInterval, textColor, firstDayOfWeek, neutralButton, onNeutralButtonPress, fullscreen, title and startOnYearSelection props are not supported.
  • Use timeZoneName (IANA name) instead of timeZoneOffsetInMinutes.
  • The countdown mode is not supported.
  • onError prop is not needed.

Basic usage

DateTimePickerExample.tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/datetimepicker';

export default function DateTimePickerExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="date"
    />
  );
}

Time picker

TimePickerExample.tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/datetimepicker';

export default function TimePickerExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="time"
    />
  );
}

With date constraints

ConstrainedDatePickerExample.tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/datetimepicker';

const today = new Date();
const thirtyDaysFromNow = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);

export default function ConstrainedDatePickerExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="date"
      minimumDate={today}
      maximumDate={thirtyDaysFromNow}
    />
  );
}

Dialog presentation

On Android, you can use presentation="dialog" to show the picker as a modal dialog. The dialog opens when the component mounts. Unmount it in response to onValueChange or onDismiss. On iOS, this prop is ignored and the picker always renders inline.

AndroidDialogExample.tsx
import { useState } from 'react';
import { Button, View } from 'react-native';
import DateTimePicker from '@expo/ui/datetimepicker';

export default function AndroidDialogExample() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button title="Pick a date" onPress={() => setShow(true)} />
      {show && (
        <DateTimePicker
          value={date}
          onValueChange={(event, selectedDate) => {
            setShow(false);
            setDate(selectedDate);
          }}
          onDismiss={() => {
            setShow(false);
          }}
          mode="date"
          presentation="dialog"
        />
      )}
    </View>
  );
}

API

import DateTimePicker from '@expo/ui/datetimepicker';

Component

DateTimePicker

Android
iOS

Type: React.Element<DateTimePickerProps>

DateTimePickerProps

accentColor

Android
iOS
Optional • Type: string

Accent/tint color applied to the picker. Maps to color on Android and tint on iOS.

disabled

iOS
Optional • Type: boolean

Whether the picker is disabled.

display

Android
iOS
Optional • Literal type: string • Default: 'default'

Display style. Android supports 'default' | 'spinner' — 'spinner' shows a text input rather than a scroll wheel (Material 3 does not have a wheel-style picker). iOS supports 'default' | 'spinner' | 'compact' | 'inline'.

Acceptable values are: 'default' | 'spinner' | 'compact' | 'inline' | 'calendar' | 'clock'

is24Hour

Android
Optional • Type: boolean

Use 24-hour format.

locale

iOS
Optional • Type: string

Locale identifier (e.g. 'en_US', 'fr_FR') for the picker display.

maximumDate

Android
iOS
Optional • Type: Date

The latest selectable date.

minimumDate

Android
iOS
Optional • Type: Date

The earliest selectable date.

mode

Android
iOS
Optional • Literal type: string • Default: 'date'

The picker mode.

Acceptable values are: 'date' | 'time' | 'datetime'

negativeButton

Android
Optional • Type: { label: string }

Set the negative (cancel) button label.

Deprecated: Use onValueChange and onDismiss instead.

Called when the user changes the date/time or dismisses the picker. The event type is encoded in event.type. If the new specific listeners are provided, they take precedence.

onChange

Android
iOS
Optional • Type: (event: DateTimePickerEvent, date?: Date) => void

onDismiss

Android
Optional • Type: () => void

Called when the picker is dismissed without selecting a value.

onValueChange

Android
iOS
Optional • Type: (event: DateTimePickerChangeEvent, date: Date) => void

Called when the user selects a date or time.

positiveButton

Android
Optional • Type: { label: string }

Set the positive (confirm) button label.

presentation

Android
Optional • Literal type: string • Default: 'dialog'

How the picker is presented.

  • 'inline' renders the picker directly in the view hierarchy.
  • 'dialog' shows a modal dialog that opens on mount. Fires onValueChange on confirmation, onDismiss on cancel. The caller should unmount the component in response.

On iOS this prop is accepted but ignored (always inline). On Android the default is 'dialog'.

Acceptable values are: 'inline' | 'dialog'

testID

Android
iOS
Optional • Type: string

A test ID forwarded to the native view. Note: on Android dialog presentation, the test ID is not forwarded.

themeVariant

iOS
Optional • Literal type: string

Force a specific color scheme on the picker.

Acceptable values are: 'dark' | 'light'

timeZoneName

iOS
Optional • Type: string

IANA time zone name (e.g. 'America/New_York') for the picker display.

value

Android
iOS
Type: Date

The current date value (controlled).

Inherited Props

Types

DateTimePickerChangeEvent

Android
iOS
PropertyTypeDescription
nativeEvent{ timestamp: number, utcOffset: number }
-

Deprecated: used with the deprecated onChange prop

DateTimePickerEvent

Android
iOS
PropertyTypeDescription
nativeEvent{ timestamp: number, utcOffset: number }
-
type'set' | 'dismissed'

'set' when the user selects a date. 'dismissed' when the user cancels an Android dialog picker. iOS never fires 'dismissed'.