Release version 1.1313.0

Author: nitzanyiz

README.md

@@ -204,7 +204,7 @@ export default App;
         dayTextColor: '#2d4150',
         textDisabledColor: '#dd99ee'
       }}
-    </Calendar>
+    />
 ```
 
 ## Customized Calendar Examples

example/src/screens/playgroundScreen.tsx

@@ -54,7 +54,7 @@ export default function PlaygroundScreen() {
     );
   };
 
-  const renderExpendableCalendar = () => {
+  const renderExpandableCalendar = () => {
     return (
       <CalendarProvider date={INITIAL_DATE}>
         <ExpandableCalendar
@@ -76,7 +76,7 @@ export default function PlaygroundScreen() {
       case elements.LIST:
         return renderCalendarList();
       case elements.EXPANDABLE:
-        return renderExpendableCalendar();
+        return renderExpandableCalendar();
       default:
         return renderCalendar(); 
     }

src/expandableCalendar/WeekCalendar/index.tsx

@@ -133,7 +133,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     );
   },[firstDay, _onDayPress, context, date, markedDates]);
 
-  const keyExtractor = useCallback((item) => item, []);
+  const keyExtractor = useCallback((item, index) => `${item}-${index}`, []);
 
   const renderWeekDaysNames = useMemo(() => {
     return (

src/expandableCalendar/index.tsx

@@ -191,22 +191,24 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const [position, setPosition] = useState(numberOfDays ? Positions.CLOSED : initialPosition);
   const isOpen = position === Positions.OPEN;
-  const getOpenHeight = () => {
+  const getOpenHeight = useCallback(() => {
     if (!horizontal) {
       return Math.max(constants.screenHeight, constants.screenWidth);
     }
     return headerHeight + (WEEK_HEIGHT * (numberOfWeeks.current)) + (hideKnob ? 0 : KNOB_CONTAINER_HEIGHT);
-  };
+  }, [headerHeight, horizontal, hideKnob, numberOfWeeks]);
+
   const openHeight = useRef(getOpenHeight());
   const closedHeight = useMemo(() => headerHeight + WEEK_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT), [numberOfDays, hideKnob, headerHeight]);
-  const startHeight = useMemo(() => isOpen ? openHeight.current : closedHeight, [closedHeight, isOpen]);
+  const startHeight = useMemo(() => isOpen ? getOpenHeight() : closedHeight, [closedHeight, isOpen, getOpenHeight]);
   const _height = useRef(startHeight);
   const deltaY = useMemo(() => new Animated.Value(startHeight), [startHeight]);
   const headerDeltaY = useRef(new Animated.Value(isOpen ? -headerHeight : 0));
 
   useEffect(() => {
     _height.current = startHeight;
     deltaY.setValue(startHeight);
+    _wrapperStyles.current.style.height = startHeight;
   }, [startHeight]);
 
   useEffect(() => {

src/timeline-list/timelineList.api.json

@@ -0,0 +1,47 @@
+{
+  "name": "TimelineList",
+  "description": "TimelineList component",
+  "images": [
+    "https://github.com/wix/react-native-calendars/blob/master/demo/assets/timeline-calendar.gif?raw=true"
+  ],
+  "extends": ["InfiniteList"],
+  "extendsLink": ["https://github.com/wix/react-native-calendars/blob/1.1311.1/src/infinite-list/index.tsx"],
+  "example": "https://github.com/wix/react-native-calendars/blob/1.1311.1/example/src/screens/timelineCalendarScreen.tsx",
+  "props": [
+    {
+      "name": "events",
+      "type": "{[date: string]: TimelineProps['events']}",
+      "description": "Map of all timeline events ({[date]: events})"
+    },
+    {
+      "name": "timelineProps",
+      "type": "Omit<TimelineProps, 'events' | 'scrollToFirst' | 'showNowIndicator' | 'scrollToNow' | 'initialTime'>",
+      "description": "General timeline props to pass to each timeline item"
+    },
+    {
+      "name": "renderItem",
+      "type": "(timelineProps: TimelineProps, info: TimelineListRenderItemInfo) => JSX.Element",
+      "description": "Pass to render a custom Timeline item"
+    },
+    {
+      "name": "scrollToFirst",
+      "type": "boolean",
+      "description": "Should scroll to first event of the day"
+    },
+    {
+      "name": "showNowIndicator",
+      "type": "boolean",
+      "description": "Should show now indicator (shown only on 'today' timeline)"
+    },
+    {
+      "name": "scrollToNow",
+      "type": "boolean",
+      "description": "Should initially scroll to current time (relevant only for 'today' timeline)"
+    },
+    {
+      "name": "initialTime",
+      "type": "TimelineProps['initialTime']",
+      "description": "Should initially scroll to a specific time (relevant only for NOT 'today' timelines)"
+    }
+  ]
+}

src/timeline/timeline.api.json

@@ -6,12 +6,12 @@
   ],
   "extends": ["ScrollView"],
   "extendsLink": ["https://reactnative.dev/docs/scrollview"],
-  "example": "https://github.com/wix/react-native-calendars/blob/master/example/src/screens/timelineCalendar.tsx",
+  "example": "https://github.com/wix/react-native-calendars/blob/master/example/src/screens/timelineCalendarScreen.tsx",
   "props": [
     {
-      "name": "theme",
-      "type": "Theme",
-      "description": "Specify theme properties to override specific styles for calendar parts"
+      "name": "date",
+      "type": "string | string[]",
+      "description": "The date / dates of this timeline instance in ISO format (e.g. 2011-10-25)"
     },
     {
       "name": "events",
@@ -46,21 +46,54 @@
       "description": "Handler which gets executed when background's long pressed released. Pass to handle creation of a new event"
     },
     {
-      "name": "renderEvent",
-      "type": "(event: PackedEvent) => JSX.Element",
-      "description": "Specify a custom event block"
+      "name": "theme",
+      "type": "Theme",
+      "description": "Specify theme properties to override specific styles for calendar parts"
     },
     {
       "name": "scrollToFirst",
       "type": "boolean",
       "description": "Whether to scroll to the first event"
     },
+    {
+      "name": "scrollToNow",
+      "type": "boolean",
+      "description": "Whether to scroll to the current time on first render",
+      "default": "false"
+    },
+    {
+      "name": "initialTime",
+      "type": "NewEventTime",
+      "description": "The initial time to scroll to when the timeline is first rendered",
+      "default": "{ hour: 0, minute: 0 }"
+    },
     {
       "name": "format24h",
       "type": "boolean",
       "description": "Whether to use 24 hours format for the timeline hours",
       "default": "true"
     },
+    {
+      "name": "renderEvent",
+      "type": "(event: PackedEvent) => JSX.Element",
+      "description": "Specify a custom event block"
+    },
+    {
+      "name": "showNowIndicator",
+      "type": "boolean",
+      "description": "Whether to show the now indicator",
+      "default": "false"
+    },
+    {
+      "name": "scrollOffset",
+      "type": "number",
+      "description": "A scroll offset value that the timeline will sync with"
+    },
+    {
+      "name": "onChangeOffset",
+      "type": "(offset: number) => void",
+      "description": "Listen to onScroll event of the timeline component"
+    },
     {
       "name": "overlapEventsSpacing",
       "type": "number",
@@ -72,6 +105,33 @@
       "type": "number",
       "description": "Spacing to keep at the right edge (for background press)",
       "default": "10"
+    },
+    {
+      "name": "unavailableHours",
+      "type": "UnavailableHours[]",
+      "description": "Range of available hours"
+    },
+    {
+      "name": "unavailableHoursColor",
+      "type": "string",
+      "description": "Background color for unavailable hours"
+    },
+    {
+      "name": "numberOfDays",
+      "type": "number",
+      "description": "The number of days to present in the timeline calendar",
+      "default": "1"
+    },
+    {
+      "name": "timelineLeftInset",
+      "type": "number",
+      "description": "The left inset of the timeline calendar (sidebar width)",
+      "default": "72"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Identifier for testing"
     }
   ]
 }