Migration
Prop-by-prop mappings from popular packages. Most migrations are a rename plus switching callbacks to (value) => ….
Compared with native pickers, your users keep a native look: the iOS design on iOS and Material Design on Android, by default. Set design="ios" on PickersProvider if you'd rather show the same look everywhere. See Designs.
From @react-native-community/datetimepicker​
- import DateTimePicker from '@react-native-community/datetimepicker';
+ import { DatePicker, DateTimePicker, TimePicker } from '@elik56a/react-native-pickers';
- <DateTimePicker mode="date" value={date} onChange={(event, d) => d && setDate(d)} minimumDate={min} />
+ <DatePicker value={date} onChange={setDate} minDate={min} />
- <DateTimePicker mode="time" value={time} is24Hour onChange={(e, d) => d && setTime(d)} minuteInterval={5} />
+ <TimePicker value={time} onChange={setTime} format="24h" minuteInterval={5} />
- <DateTimePicker mode="datetime" value={when} onChange={(e, d) => d && setWhen(d)} />
+ <DateTimePicker value={when} onChange={setWhen} />
| datetimepicker | React Native Pickers |
|---|---|
mode="date" | DatePicker (calendar) or DatePicker display="wheel" |
mode="time" | TimePicker |
mode="datetime" | DateTimePicker |
display="spinner" | DatePicker display="wheel", TimePicker display="wheel" |
display="clock" (Android) | TimePicker display="dial" (the default in the Material design) |
display="calendar" / "inline" | DatePicker |
value | value |
onChange(event, date) | onChange(date) (no event, never undefined) |
minimumDate / maximumDate | minDate / maxDate |
minuteInterval | minuteInterval |
is24Hour | format="24h" (default 'auto' from locale) |
locale | locale |
firstDayOfWeek (Android) | firstDayOfWeek (0 = Sunday) |
themeVariant | PickersProvider colorScheme |
accentColor / textColor | theme={{ colors: { primary, text } }} |
| Android dialog (shown on mount) | DatePickerSheet / TimePickerSheet with visible |
| A button or input that opens the picker | DatePickerField / TimePickerField / DateTimePickerField (picker fields) |
From react-native-modal-datetime-picker​
- <DateTimePickerModal isVisible={open} mode="date" date={date} onConfirm={setDate} onCancel={close} />
+ <DatePickerSheet visible={open} value={date} onConfirm={setDate} onClose={close} />
| modal-datetime-picker | React Native Pickers |
|---|---|
isVisible | visible |
mode="date" | "time" | "datetime" | DatePickerSheet · TimePickerSheet · DateTimePickerSheet |
date | value |
onConfirm(date) | onConfirm(date) (onClose is called right after) |
onCancel | onClose |
confirmTextIOS / cancelTextIOS | confirmLabel / cancelLabel |
minimumDate / maximumDate | minDate / maxDate |
If isVisible was only toggled by a field that shows the date, drop the state and use DatePickerField / TimePickerField / DateTimePickerField with the same props minus visible.
From react-native-calendars​
- <Calendar
- current="2026-10-01"
- minDate="2026-10-05"
- onDayPress={(day) => setSelected(day.dateString)}
- markedDates={{ [selected]: { selected: true }, '2026-10-22': { marked: true, dotColor: 'green' } }}
- firstDay={1}
- />
+ <DatePicker
+ initialMonth={new Date(2026, 9, 1)}
+ minDate={new Date(2026, 9, 5)}
+ value={selected}
+ onChange={setSelected}
+ markedDates={{ '2026-10-22': { dots: ['green'] } }}
+ firstDayOfWeek={1}
+ />
| react-native-calendars | React Native Pickers |
|---|---|
current (string) | initialMonth (Date) |
minDate / maxDate (strings) | minDate / maxDate (Date) |
onDayPress(day) | onChange(date); selection is managed for you |
markedDates[k].selected | value (no manual marking) |
markingType="period" + manual start/end marking | mode="range" |
markedDates[k].marked + dotColor | markedDates[k].dots: [color] |
markingType="multi-dot" dots: [{ color }] | dots: ['#hex', …] (max 3) |
markedDates[k].disabled / disableTouchEvent | markedDates[k].disabled or isDateDisabled |
firstDay | firstDayOfWeek |
onMonthChange | onMonthChange(month: Date) |
hideExtraDays | showOutsideDays={false} |
enableSwipeMonths | enableSwipe (on by default) |
dayComponent | renderDay(state, theme) |
renderArrow(direction) | renderArrow(direction, disabled) |
theme={{ selectedDayBackgroundColor, todayTextColor, … }} | theme={{ colors: { primary, … } }} + styles slots |
LocaleConfig | locale="fr-FR" (names from Intl) |
From react-native-picker-select​
- <RNPickerSelect
- items={[{ label: 'Football', value: 'football' }]}
- onValueChange={setSport}
- value={sport}
- placeholder={{ label: 'Select a sport…', value: null }}
- />
+ <SelectPicker
+ options={[{ label: 'Football', value: 'football' }]}
+ onChange={setSport}
+ value={sport}
+ placeholder="Select a sport…"
+ />
| react-native-picker-select | React Native Pickers |
|---|---|
items | options (adds description, icon, group, keywords) |
onValueChange(value, index) | onChange(value, option) |
value | value |
placeholder={{ label }} | placeholder="…" |
disabled | disabled |
onOpen / onClose | onOpen / onClose |
doneText | sheet={{ confirmLabel }} (Done shown with closeOnSelect={false} / multiple) |
style={{ inputIOS, inputAndroid }} | styles={{ trigger, triggerText, placeholder }} |
| — | multiple, searchable, clearable, maxSelected, renderTrigger, renderOption |
Want an iOS-style wheel instead of a list? Use WheelPickerSheet.
From @react-native-picker/picker​
- <Picker selectedValue={lang} onValueChange={setLang}>
- <Picker.Item label="Java" value="java" />
- <Picker.Item label="JavaScript" value="js" />
- </Picker>
+ <WheelPicker
+ items={[{ label: 'Java', value: 'java' }, { label: 'JavaScript', value: 'js' }]}
+ value={lang}
+ onChange={setLang}
+ />
Picker.Item enabled={false} → { disabled: true }. Android mode="dropdown" → SelectPicker.
From @react-native-segmented-control/segmented-control​
- import SegmentedControl from '@react-native-segmented-control/segmented-control';
+ import { HorizontalList } from '@elik56a/react-native-pickers';
- <SegmentedControl
- values={['Day', 'Week', 'Month']}
- selectedIndex={index}
- onChange={(e) => setIndex(e.nativeEvent.selectedSegmentIndex)}
- />
+ <HorizontalList
+ items={[{ label: 'Day', value: 'day' }, { label: 'Week', value: 'week' }, { label: 'Month', value: 'month' }]}
+ value={view}
+ onChange={setView}
+ />
| segmented-control | React Native Pickers |
|---|---|
values (strings) | items ({ label, value, disabled?, icon? }) |
selectedIndex | value (the item's value, not its index) |
onChange(event) / onValueChange(label) | onChange(value, item) |
enabled={false} | disabled: true on each item |
tintColor / backgroundColor | theme={{ colors: { primary, surface } }} or styles={{ thumb, container }} |
| — | scrolls sideways when the items don't fit, variant="chips", renderItem, works on the web |
HorizontalList has no native code, so it runs in Expo Go and on the web.