rn-calendar

A lightweight, animated calendar date picker for React Native, styled with twrnc (Tailwind for React Native) and lucide-react-native icons.

Install

npm install rn-calendar
# or
yarn add rn-calendar

This package has peer dependencies that must also be installed in the consuming app:

npm install react-native twrnc lucide-react-native react-native-svg

react-native-svg is required because lucide-react-native renders icons as SVGs. If you're on a bare React Native project (not Expo), follow the react-native-svg linking guide for your platform.

Usage

import { useState } from 'react';
import { DatePicker } from 'rn-calendar';

export default function Example() {
  const [date, setDate] = useState('2026-07-03');

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      minDate={new Date(2020, 0, 1)}
      maxDate={new Date(2030, 11, 31)}
      accentColor="#FF6B35"
    />
  );
}

Props

| Prop | Type | Required | Default | Description | |---------------|----------------------------|----------|-------------|------------------------------------------------| | value | string (YYYY-MM-DD) | Yes | — | Currently selected date | | onChange | (date: string) => void | Yes | — | Called with the new date string on selection | | minDate | Date | No | — | Earliest selectable date | | maxDate | Date | No | — | Latest selectable date | | accentColor | string | No | '#FF6B35' | Header, selected day, and today-marker color |

Development

npm install
npm run build       # builds lib/commonjs, lib/module, lib/typescript via react-native-builder-bob
npm run typecheck

Publishing

npm login
npm run build
npm publish

Bump the version in package.json first (npm version patch|minor|major).

Contact

Created by Peter Thomas — feel free to reach out!

License

MIT © Techta