diff --git a/example/src/screens/calendarListScreen.tsx b/example/src/screens/calendarListScreen.tsx index b9870cd01d..863c3751f5 100644 --- a/example/src/screens/calendarListScreen.tsx +++ b/example/src/screens/calendarListScreen.tsx @@ -54,6 +54,7 @@ const CalendarListScreen = (props: Props) => { horizontal={horizontalView} pagingEnabled={horizontalView} staticHeader={horizontalView} + descendingOrder={false} /> ); }; diff --git a/src/calendar-list/calendarList.api.json b/src/calendar-list/calendarList.api.json index 4df8051322..ea50a266f1 100644 --- a/src/calendar-list/calendarList.api.json +++ b/src/calendar-list/calendarList.api.json @@ -1,9 +1,7 @@ { "name": "CalendarList", "description": "Calendar list component", - "images": [ - "https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar-list.gif?raw=true" - ], + "images": ["https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar-list.gif?raw=true"], "extends": ["Calendar", "FlatList"], "extendsLink": [ "https://github.com/wix/react-native-calendars/blob/master/src/calendar/index.tsx", @@ -50,6 +48,12 @@ "type": "boolean", "description": "Whether to enable or disable vertical / horizontal scroll indicator", "default": "false" + }, + { + "name": "descendingOrder", + "type": "boolean", + "description": "Whether to load the calendar list items in descending order (most recent month at the top)", + "default": "false" } ] } diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx index 606439b6af..2adb42e64f 100644 --- a/src/calendar-list/index.tsx +++ b/src/calendar-list/index.tsx @@ -38,6 +38,8 @@ export interface CalendarListProps extends CalendarProps, Omit { calendarWidth = CALENDAR_WIDTH, calendarStyle, animateScroll = false, + descendingOrder = false, showScrollIndicator = false, staticHeader, /** View props */ @@ -120,7 +123,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => { const rangeDate = initialDate.current?.clone().addMonths(i - pastScrollRange, true); months.push(rangeDate); } - return months; + return descendingOrder ? months.reverse() : months; }, [pastScrollRange, futureScrollRange]); const staticHeaderStyle = useMemo(() => {