react-native-date-ranger

A simple date range picker for React Native. No external dependencies, just works.

Install

npm install react-native-date-ranger
# or
yarn add react-native-date-ranger

Basic Usage

import DateRangePicker, { DateRange } from 'react-native-date-ranger';
import { useState } from 'react';

function App() {
  const [range, setRange] = useState<DateRange>({
    startDate: null,
    endDate: null,
  });

  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | DateRange | - | Controlled value | | onChange | (range: DateRange) => void | - | Callback when selection changes | | initialMonth | Date | Today | Starting month to display | | showSelectionInfo | boolean | true | Show selected range text | | theme | DateRangePickerTheme | - | Custom colors and spacing | | containerStyle | ViewStyle | - | Additional container styles | | weekdays | string[] | ['Sun', 'Mon', ...] | Custom weekday labels | | months | string[] | ['January', ...] | Custom month names | | locale | string | 'en-US' | Locale for date formatting | | selectMonthYearTitle | string | 'Select Month & Year' | Modal title | | doneButtonText | string | 'Done' | Done button text | | selectDateRangeText | string | 'Select date range' | Placeholder text | | selectEndDateText | string | 'Select end date' | End date placeholder |

Custom Theme

<DateRangePicker
  value={range}
  onChange={setRange}
  theme={{
    primaryColor: '#FF6B6B',
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    gap: 10,
  }}
/>

Custom Styling

<DateRangePicker
  value={range}
  onChange={setRange}
  containerStyle={{
    width: '100%',
    height: 300,
    padding: 20,
  }}
/>

License

MIT