react-native-date-ranger

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

Installation

npm install react-native-date-ranger

or

yarn add react-native-date-ranger

📦 View on npm

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