day display gets out of sync when phone is rotated

[Kenoshen]

First off, let me say that you have made a really incredible library here and it honestly performs fantastic in any other scenario that I've thrown at it. However, this particular bug is definitely a big problem. When I rotate the phone, the days listed at the top of the day view get out of sync from the actual event data shown below.

In the video below I am just generating a single event for each day with the title set to information about the start date so it is easy to tell which event should go where. When I rotate the phone, the day display on the top of the timeline gets out of sync with the list below and upon rotating back to portrait proceeds to show the wrong day. It tries to load the events for the day that I'm focused on, and then clears the event.

The problem is obviously that when you look at Tuesday and see the events for Wednesday, then you are bound to make a mistake in scheduling or miss an appointment.

Any help on this would be much appreciated. I'll also try to dig into your library and see if I can track down a solution.

Thanks again for such a great project.

https://github.com/howljs/react-native-calendar-kit/assets/1054265/f1648685-0a5d-453d-9e00-1b1a983ac487

[Kenoshen]

After more digging, I found that I could mostly eliminate this issue by setting:

<TimelineCalendar
   ...
  syncedLists={false}
/>

The column widths still get messed up when the phone rotates, but at least the days are not completely incorrect.

[ofito]

Maybe is not the best solution but I have managed to fix this problem by changing the component key when the device is rotated and thus forcing the calendar to reset.

[Himadrish520]

const { width, height } = useWindowDimensions();

        key={width}
        
        pass this as a prop works wonders