Fix: Prevent React key error caused by spreading key prop inside TimelineList

[karadev-official]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-calendars@1.22.0 for the project I'm working on.

While integrating TimelineList and Timeline from react-native-calendars@1.22.0, I encountered a React 18 warning/error:

A props object containing a "key" prop is being spread into JSX.
This happens when key is included inside an object passed via {...props}, which React no longer allows.

To fix this, I used patch-package and applied the following patch.
It removes key from the spread object and passes it explicitly to the JSX element, resolving the issue cleanly.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-calendars/src/timeline-list/index.tsx b/node_modules/react-native-calendars/src/timeline-list/index.tsx
index e7fd841..376866a 100644
--- a/node_modules/react-native-calendars/src/timeline-list/index.tsx
+++ b/node_modules/react-native-calendars/src/timeline-list/index.tsx
@@ -140,9 +140,11 @@ const TimelineList = (props: TimelineListProps) => {
         return renderItem(_timelineProps, {item, index, isCurrent, isInitialPage, isToday: _isToday});
       }
 
+      const { key, ...restProps } = _timelineProps;
+      
       return (
         <>
-          <Timeline {..._timelineProps}/>
+          <Timeline key={key} {...restProps}/>
           {/* NOTE: Keeping this for easy debugging */}
           {/* <Text style={{position: 'absolute'}}>{item}</Text>*/}
         </>
diff --git a/node_modules/react-native-calendars/src/timeline/Timeline.tsx b/node_modules/react-native-calendars/src/timeline/Timeline.tsx
index f31b0b5..2e5d213 100644
--- a/node_modules/react-native-calendars/src/timeline/Timeline.tsx
+++ b/node_modules/react-native-calendars/src/timeline/Timeline.tsx
@@ -236,7 +236,8 @@ const Timeline = (props: TimelineProps) => {
     const indexOfToday = pageDates.indexOf(generateDay(new Date().toString()));
     const left = timelineLeftInset + indexOfToday * width / numberOfDays;
     return (
-      <React.Fragment key={dayIndex}>
+      <React.Fragment 
+        key={dayIndex}>
         {renderEvents(dayIndex)}
         {indexOfToday !== -1 && showNowIndicator && <NowIndicator width={width / numberOfDays} left={left} styles={styles.current}/>}
       </React.Fragment>

This issue body was partially generated by patch-package.