kentrh / react-native-date-range-picker

Simple date range picker for React Native written on top of react-native-calendars

React Native Date Range Picker

This is a simple snippet written on top of react-native-calendars with hooks and TypeScript inspired by https://github.com/lazaronixon/react-native-date-range-picker.

It depends on date-fns and react-native-calendars

First run yarn add date-fns react-native-calendars @types/react-native-calendars

then just include date-range-picker.tsx in your project and use it as below:

import { addDays, addYears } from "date-fns";

...

<DateRangePicker
  initialRange={{from: new Date(), to: addDays(new Date(), 4)}}
  minDate={new Date()}
  maxDate={addYears(new Date(), 1)}
  onFromOnlySelected={(from: Date) => {
    console.warn(from);
  }}
  onFullRangeSelected={(range: IDateRange) => {
    console.warn(range);
  }}
  firstDay={1} //Sunday is 0, Monday is 1...
  width={"100%"} // style.width -> number | string
  color={"#00ff00"}
  textColor={"#000000"}
/>

Locale config is commented out in date-range-picker.tsx so just comment in and change as needed.