react-native-bigger-calendar 0.2.0 → 0.2.1

package/dist/index.js

@@ -962,7 +962,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 								renderEvent,
 								onPress: onPressEvent,
 								onLongPress: onLongPressEvent
-							}, keyExtractor(positioned.event, eventIndex));
+							}, `${dayIndex}:${keyExtractor(positioned.event, eventIndex)}`);
 						})),
 						showNowIndicator && nowDayIndex >= 0 && nowInWindow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NowIndicator, {
 							cellHeight: heightSource,
@@ -1200,12 +1200,15 @@ const DayHeader = ({ day, mode, width, locale, activeDate, onPressDateHeader })
 		disabled: !onPressDateHeader,
 		accessibilityRole: onPressDateHeader ? "button" : void 0,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-			style: [styles.dayHeaderBadge, isHighlighted && {
-				backgroundColor: theme.colors.todayBackground,
-				borderRadius: 999,
-				width: badgeSize,
-				height: badgeSize
-			}],
+			style: [
+				styles.dayHeaderBadge,
+				{
+					width: badgeSize,
+					height: badgeSize,
+					borderRadius: 999
+				},
+				isHighlighted && { backgroundColor: theme.colors.todayBackground }
+			],
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
 				style: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
 				allowFontScaling: false,

package/dist/index.mjs

@@ -938,7 +938,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 								renderEvent,
 								onPress: onPressEvent,
 								onLongPress: onLongPressEvent
-							}, keyExtractor(positioned.event, eventIndex));
+							}, `${dayIndex}:${keyExtractor(positioned.event, eventIndex)}`);
 						})),
 						showNowIndicator && nowDayIndex >= 0 && nowInWindow ? /* @__PURE__ */ jsx(NowIndicator, {
 							cellHeight: heightSource,
@@ -1176,12 +1176,15 @@ const DayHeader = ({ day, mode, width, locale, activeDate, onPressDateHeader })
 		disabled: !onPressDateHeader,
 		accessibilityRole: onPressDateHeader ? "button" : void 0,
 		children: [/* @__PURE__ */ jsx(View, {
-			style: [styles.dayHeaderBadge, isHighlighted && {
-				backgroundColor: theme.colors.todayBackground,
-				borderRadius: 999,
-				width: badgeSize,
-				height: badgeSize
-			}],
+			style: [
+				styles.dayHeaderBadge,
+				{
+					width: badgeSize,
+					height: badgeSize,
+					borderRadius: 999
+				},
+				isHighlighted && { backgroundColor: theme.colors.todayBackground }
+			],
 			children: /* @__PURE__ */ jsx(Text, {
 				style: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
 				allowFontScaling: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bigger-calendar",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A generic, themeable month/week/day calendar for React Native with pinch-to-zoom, virtualized paging, and a render-prop event API.",
   "keywords": [
     "react-native",
@@ -70,6 +70,6 @@
     "react-native-gesture-handler": "~2.31.1",
     "react-native-reanimated": "4.3.1",
     "tsdown": "^0.22.3",
-    "typescript": "^5.5.0"
+    "typescript": "^6.0.3"
   }
 }

package/src/components/TimeGrid.tsx

@@ -551,7 +551,10 @@ function TimetablePageInner<T>({
                   const columnWidth = dayWidth / positioned.columns;
                   return (
                     <AnimatedEventBox
-                      key={keyExtractor(positioned.event, eventIndex)}
+                      // Prefix with the day so a multi-day event's per-day segments
+                      // (which share the same event key) stay unique across the
+                      // flattened list of all days' boxes.
+                      key={`${dayIndex}:${keyExtractor(positioned.event, eventIndex)}`}
                       positioned={positioned}
                       cellHeight={heightSource}
                       minHour={minHour}
@@ -1009,12 +1012,10 @@ const DayHeader = ({ day, mode, width, locale, activeDate, onPressDateHeader }:
       <View
         style={[
           styles.dayHeaderBadge,
-          isHighlighted && {
-            backgroundColor: theme.colors.todayBackground,
-            borderRadius: 999,
-            width: badgeSize,
-            height: badgeSize,
-          },
+          // Reserve the badge's size on every day so the highlight circle doesn't
+          // change the header's dimensions between today and other days (no shift).
+          { width: badgeSize, height: badgeSize, borderRadius: 999 },
+          isHighlighted && { backgroundColor: theme.colors.todayBackground },
         ]}
       >
         <Text