4
React native calendar range picker
source link: https://reactnativeexample.com/react-native-calendar-range-picker/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-calendar-date-range-picker
React native calendar range picker
Preview
Getting Started
Installation
npm i react-native-calendar-date-range-pickeryarn add react-native-calendar-date-range-picker
Props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
| onChangeCb | No | (SelectedRangeType) => void | () => void | Function that gets triggered on any selection change |
| onDonePressedCb | No | (SelectedRangeType) => void | () => void | When done button is pressed |
| theme | No | DayStyles | {} | styles for calendar/day components |
| monthHeight | No | Number | 300 | Approximate height for each month (along with days) |
| monthsCount | No | Number | 12 | Number of months starting from minDate |
| minDate | No | Moment | undefined | Starting date |
| initialSelectedRange | No | SelectedRangeType | {startDate: moment(),endDate: moment().add(1, “day”),} | initially selected range |
| useGestureHandler | No | Boolean | false | Enable if Flatlist should be imported from “react-native-gesture-handler” |
| renderWeekTextComponent | No | JSX.Element | Function that returns custom render for each week | |
| renderMonthTextComponent | No | JSX.Element | Function that returns custom render for each month title | |
| renderFooterComponent | No | JSX.Element | Function that returns custom render footer component |
Types
DayStyles {
unselectedContainerStyle?: ViewStyle;
endContainerStyle?: ViewStyle;
startingContainerStyle?: ViewStyle;
startingWithEndContainerStyle?: ViewStyle;
endingContainerStyle?: ViewStyle;
betweenContainerStyle?: ViewStyle;
disabledTextStyle?: TextStyle;
emptyDay?: TextStyle;
dayTextStyle?: TextStyle;
selectedDayTextStyle?: TextStyle;
startSelectedDayTextStyle?: TextStyle;
endSelectedDayTextStyle?: TextStyle;
}
SelectedRangeType {
startDate: Moment;
endDate: Moment | null;
}
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK