react-native-date-field

A customizable, animated date picker field for React Native — works in Expo and bare projects with zero native dependencies (built on React Native's own Animated, Modal, and ScrollView).

• 🎞️ Smooth bottom-sheet animation (backdrop fade + spring slide-up)
• 🎨 Fully themeable colors, typography, corner radius
• 🌍 Custom month labels, column order (Y/M/D in any order), i18n-ready
• 🧩 Two components: a ready-made DateField, or a headless DatePickerModal you drive yourself
• 🪶 No Reanimated, no native modules, no linking — drop-in

Install

npm install @almustarik/react-native-date-field
# or
yarn add @almustarik/react-native-date-field

Peer dependencies (already in every RN app): react, react-native.

Quick start

import React, { useState } from "react";
import { View } from "react-native";
import { DateField } from "@almustarik/react-native-date-field";

export default function Example() {
  const [dob, setDob] = useState<Date | null>(null);

  return (
    <View style={{ padding: 20 }}>
      <DateField
        label="Date of Birth"
        value={dob}
        onChange={setDob}
        maximumDate={new Date()} // no future dates
      />
    </View>
  );
}

The field shows a formatted value (e.g. Jan 5, 2026), and tapping it opens an animated sheet with Year / Month / Day columns.

Headless usage (DatePickerModal)

Drive the picker from your own button:

import { DatePickerModal } from "@almustarik/react-native-date-field";

const [open, setOpen] = useState(false);
const [date, setDate] = useState<Date | null>(null);

<>
  <Button title="Pick a date" onPress={() => setOpen(true)} />
  <DatePickerModal
    visible={open}
    onRequestClose={() => setOpen(false)}
    value={date}
    onChange={setDate}
  />
</>

Theming

<DateField
  label="Appointment"
  value={date}
  onChange={setDate}
  theme={{
    accent: "#6C5CE7",
    onAccent: "#FFFFFF",
    text: "#1A1A1A",
    muted: "#9AA0A6",
    fieldBackground: "#F2F1FB",
    sheetBackground: "#FFFFFF",
    columnBackground: "#F7F7FB",
    border: "#E6E6EE",
    backdrop: "rgba(0,0,0,0.5)",
    borderRadius: 16,
  }}
  typography={{
    fontFamily: "Inter",
    titleSize: 16,
    titleWeight: "600",
    labelSize: 14,
    valueSize: 15,
    optionSize: 16,
  }}
/>

Localization & column order

<DateField
  value={date}
  onChange={setDate}
  columnOrder={["day", "month", "year"]}
  monthLabels={[
    "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
    "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre",
  ]}
  title="Elegir fecha"
  doneLabel="Listo"
  format={(d) => d.toLocaleDateString("es-ES")}
/>

Custom trigger

<DateField
  value={date}
  onChange={setDate}
  renderField={({ display, open }) => (
    <Pressable onPress={open}>
      <Text>{display}</Text>
    </Pressable>
  )}
/>

API

DateField props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | Date \| null | — | Selected date (controlled). | | onChange | (date: Date) => void | — | Called on confirm. Required. | | label | string | — | Label above the field. | | placeholder | string | "Select date" | Shown when empty. | | disabled | boolean | false | Disables the trigger. | | format | (date: Date) => string | MMM D, YYYY | Custom display formatter. | | leadingIcon / trailingIcon | ReactNode | chevron | Field icons. | | renderField | (params) => ReactNode | — | Replace the default trigger. | | style / fieldStyle | StyleProp<ViewStyle> | — | Wrapper / control styles. | | ...all core props below | | | |

DatePickerModal props

All core props plus:

| Prop | Type | Description | | --- | --- | --- | | visible | boolean | Whether the sheet is shown. Required. | | onRequestClose | () => void | Dismiss handler. Required. |

Core props (shared)

| Prop | Type | Default | Description | | --- | --- | --- | --- | | minimumDate | Date | 1900-01-01 | Earliest selectable date. | | maximumDate | Date | today | Latest selectable date. | | columnOrder | ("year"\|"month"\|"day")[] | ["year","month","day"] | Column layout order. | | monthLabels | string[] (12) | short EN | Month names. | | title | string | "Select date" | Sheet title. | | doneLabel | string | "Done" | Confirm button label. | | theme | DatePickerTheme | — | Color overrides. | | typography | DatePickerTypography | — | Font overrides. | | animationDuration | number | 260 | Open/close duration (ms). | | onOpen / onClose | () => void | — | Lifecycle callbacks. |

Exported helpers: defaultTheme, defaultTypography, DEFAULT_MONTHS_SHORT, and all TypeScript types.

License

MIT © Al Mustarik