🐛 Bug Report: Error in react-native-calendars with ExpandableCalendar and Timeline

[bojarovski]

Description

When using the ExpandableCalendar and TimelineList components from react-native-calendars, the following warnings are displayed:

Error 1

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, format24h: ..., start: ..., end: ..., overlapEventsSpacing: ..., rightEdgeSpacing: ..., onEventPress: ..., eventTapped: ..., date: ..., events: ..., scrollToNow: ..., initialTime: ..., scrollToFirst: ..., scrollOffset: ..., onChangeOffset: ..., showNowIndicator: ..., numberOfDays: ..., timelineLeftInset: ...};
  <Timeline {...props} />

Error 2

Warning: ExpandableCalendar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Steps to Reproduce

1. Use the ExpandableCalendar and TimelineList components as shown in the code below:

import React from "react";
import { View, StyleSheet } from "react-native";
import {
  CalendarProvider,
  ExpandableCalendar,
  Timeline,
  TimelineList,
} from "react-native-calendars";
import { Text } from "react-native-ui-lib";

// Constants
const EVENT_COLOR = "blue";

// Helper function to get formatted date
const getDate = (offset = 0) => {
  const date = new Date();
  date.setDate(date.getDate() + offset);
  return date.toISOString().split("T")[0]; // YYYY-MM-DD format
};

// Event Item Component
const EventItem = ({ item }) => (
  <View style={styles.event}>
    <Text style={styles.eventTitle}>{item.title}</Text>
    <Text style={styles.eventSummary}>{item.summary}</Text>
  </View>
);

const CalendarComponent = () => {
  const currentDate = new Date().toISOString().split("T")[0];

  // Sample Events
  const EVENTS = [
    {
      start: `${getDate(-1)} 09:20:00`,
      end: `${getDate(-1)} 12:00:00`,
      title: "Merge Request to React Native Calendars",
      summary: "Merge Timeline Calendar to React Native Calendars",
    },
    // ... other events omitted for brevity
    {
      start: `${getDate(4)} 12:10:00`,
      end: `${getDate(4)} 13:45:00`,
      title: "Merge Request to React Native Calendars",
      summary: "Merge Timeline Calendar to React Native Calendars",
    },
  ];

  const handleDayPress = (day) => {
    console.log("selected day", day);
  };

  const onDateChanged = (date) => console.log("Date changed:", date);
  const onMonthChange = (month) => console.log("Month changed:", month);

  return (
    <CalendarProvider
      date={currentDate}
      onDateChanged={onDateChanged}
      onMonthChange={onMonthChange}
      showTodayButton
      todayBottomMargin={38}
      disabledOpacity={0.6}
    >
      <ExpandableCalendar
        firstDay={1}
        markedDates={{
          [`${getDate(-1)}`]: { marked: true },
          [`${getDate()}`]: {
            marked: true,
            color: "red",
            backgroundColor: "red",
          },
          [`${getDate(1)}`]: { marked: true },
          [`${getDate(2)}`]: { marked: true },
          [`${getDate(4)}`]: { marked: true },
        }}
      />
      <TimelineList
        events={EVENTS}
        timelineProps={{
          format24h: true,
          start: 0,
          end: 24,
          overlapEventsSpacing: 8,
          rightEdgeSpacing: 24,
          onEventPress: (event) => console.log(`onEventPress ${event}`),
          eventTapped: (event) => console.log(`eventTapped ${event}`),
        }}
        showNowIndicator
        scrollToFirst
        initialTime={{ hour: 0, minutes: 0 }}
      />
    </CalendarProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF",
  },
  event: {
    backgroundColor: "white",
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17,
  },
  eventTitle: {
    fontWeight: "bold",
  },
  eventSummary: {
    fontSize: 12,
    color: "#666",
  },
  emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30,
  },
});

export default CalendarComponent;

2. Run the app.
3. Observe the console warnings.

Expected Behavior

No warnings should appear for proper usage of ExpandableCalendar and Timeline.

Observed Behavior

• Warning about spreading props containing a key prop.
• Warning about deprecation of defaultProps in ExpandableCalendar.

Environment

• Package Version: react-native-calendars (e.g., 1.1307.0)
• React Version: 18.3.1
• React Native Version: 0.76.5
• Platform: (e.g., Android/iOS)

[TM-Baier]

+1 I'm seeing the same Warning.

[TM-Baier]

My patch-package patch
react-native-calendars+1.1308.0.patch

index 372370c..ca97bb5 100644
--- a/node_modules/react-native-calendars/src/timeline-list/index.js
+++ b/node_modules/react-native-calendars/src/timeline-list/index.js
@@ -81,7 +81,7 @@ const TimelineList = (props) => {
             return renderItem(_timelineProps, { item, index, isCurrent, isInitialPage, isToday: _isToday });
         }
         return (<>
-          <Timeline {..._timelineProps}/>
+          <Timeline {..._timelineProps} key={_timelineProps.key}/>
           {/* NOTE: Keeping this for easy debugging */}
           {/* <Text style={{position: 'absolute'}}>{item}</Text>*/}
         </>);
diff --git a/node_modules/react-native-calendars/src/timeline/Timeline.js b/node_modules/react-native-calendars/src/timeline/Timeline.js
index 8eae6ce..121dca6 100644
--- a/node_modules/react-native-calendars/src/timeline/Timeline.js
+++ b/node_modules/react-native-calendars/src/timeline/Timeline.js
@@ -91,7 +91,7 @@ const Timeline = (props) => {
     };
     return (<ScrollView
     // @ts-expect-error
-    ref={scrollView} style={styles.current.container} contentContainerStyle={[styles.current.contentStyle, { width: constants.screenWidth }]} showsVerticalScrollIndicator={false} {...scrollEvents} testID={testID}>
+    key={date} ref={scrollView} style={styles.current.container} contentContainerStyle={[styles.current.contentStyle, { width: constants.screenWidth }]} showsVerticalScrollIndicator={false} {...scrollEvents} testID={testID}>
       <TimelineHours start={start} end={end} date={pageDates[0]} format24h={format24h} styles={styles.current} unavailableHours={unavailableHours} unavailableHoursColor={unavailableHoursColor} onBackgroundLongPress={onBackgroundLongPress} onBackgroundLongPressOut={onBackgroundLongPressOut} width={width} numberOfDays={numberOfDays} timelineLeftInset={timelineLeftInset} testID={`${testID}.hours`}/>
       {times(numberOfDays, renderTimelineDay)}
     </ScrollView>);```