[Calendar] Rendering issues due to non-unique keys when switching months #2694
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] for the project I'm working on.
I've found that switching months with a Calendar component can create issues if using a custom dayComponent that does anything with animations or useState, because react-native-calendars is only using indexes from the array of weeks as well as the array of days within a week. In my case I have animations for when a date is selected or unselected, and found these animations will run when viewing a month with selected dates and then switching to a month without selected dates.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-calendars/src/calendar/index.js b/node_modules/react-native-calendars/src/calendar/index.js
index da4b7a2..cbd00af 100644
--- a/node_modules/react-native-calendars/src/calendar/index.js
+++ b/node_modules/react-native-calendars/src/calendar/index.js
@@ -97,26 +97,27 @@ const Calendar = (props) => {
</BasicDay>
</View>);
};
- const renderDay = (day, id) => {
+ const renderDay = (day) => {
+ const key = String(day);
if (!sameMonth(day, currentMonth) && hideExtraDays) {
- return <View key={id} style={style.current.emptyDayContainer}/>;
+ return <View key={key} style={style.current.emptyDayContainer}/>;
}
const dayProps = extractDayProps(props);
const dateString = toMarkingFormat(day);
const disableDaySelection = isEmpty(props.context);
- return (<View style={style.current.dayContainer} key={id}>
+ return (<View style={style.current.dayContainer} key={key}>
<Day {...dayProps} testID={`${testID}.day_${dateString}`} date={dateString} state={getState(day, currentMonth, props, disableDaySelection)} marking={markedDates?.[dateString]} onPress={_onDayPress} onLongPress={onLongPressDay}/>
</View>);
};
- const renderWeek = (days, id) => {
+ const renderWeek = (days) => {
const week = [];
- days.forEach((day, id2) => {
- week.push(renderDay(day, id2));
+ days.forEach((day) => {
+ week.push(renderDay(day));
}, this);
if (props.showWeekNumbers) {
week.unshift(renderWeekNumber(days[days.length - 1].getWeek()));
}
- return (<View style={style.current.week} key={id}>
+ return (<View style={style.current.week} key={String(days[0])}>
{week}
</View>);
};
@@ -125,7 +126,7 @@ const Calendar = (props) => {
const days = page(currentMonth, firstDay, shouldShowSixWeeks);
const weeks = [];
while (days.length) {
- weeks.push(renderWeek(days.splice(0, 7), weeks.length));
+ weeks.push(renderWeek(days.splice(0, 7)));
}
return <View style={style.current.monthView}>{weeks}</View>;
};This issue body was partially generated by patch-package.