CalendarKit does not pass renderDayItem to CalendarHeader

[highesttt]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

the CalendarKit item has the renderDayItem prop, however it does not share it with the dayBarProps rendering renderDayItem not functional as seen here

react-native-calendar-kit/packages/react-native-calendar-kit/src/CalendarKit.tsx

Lines 45 to 56 in 565ad5a

	const dayBarProps: CalendarHeaderProps = {
	dayBarHeight,
	renderHeaderItem,
	renderExpandIcon,
	renderEvent,
	LeftAreaComponent,
	headerBottomHeight,
	collapsedItems,
	eventMaxMinutes,
	eventInitialMinutes,
	eventMinMinutes,
	};

for those reading before any patches you can use this workaround by instead modifying the HeaderItem and passing renderDayItem inside of the MultiDayBarItem (or SingleDayBar):

export default function YourScreen() {
  const renderDayItem = useCallback((date: { dateUnix: number }) => {
    const day = new Date(date.dateUnix);
    const dayOfWeek = day.toLocaleDateString("en-US", { weekday: "short" });
    const dayOfMonth = day.getDate();
    const month = day.toLocaleDateString("en-US", { month: "short" });

    return (
      <View
        style={{
          alignItems: "center",
          justifyContent: "center",
          paddingVertical: 8,
        }}
      >
        <Text style={{ fontSize: 12, color: "#666" }}>{dayOfWeek}</Text>
      </View>
    );
  }, []);

  const renderHeaderItem = useCallback((props: HeaderItemProps) => {
    const { extra, index } = props;
    const dateUnixByIndex = extra.visibleDatesArray[index * extra.columns];
    return (
      <MultiDayBarItem
        pageIndex={index * extra.columns}
        startUnix={dateUnixByIndex}
        renderDayItem={renderDayItem}
      />
    );
  }, []);

return (
  <CalendarKit
    renderDayItem={renderDayItem}
    renderHeaderItem={renderHeaderItem} />
);
}

Library version

2.4.0

Environment info

Not useful in this scenario

Steps to reproduce

1. Create a CalendarKit item
2. Create a renderDayItem callback
3. pass it as a prop to your CalendarKit item

Reproducible example repository

Private