howljs / react-native-calendar-kit

React Native Calendar Kit is a powerful and flexible calendar component for React Native applications. It provides a customizable and feature-rich calendar view with support for various functionalities
https://howljs.github.io/react-native-calendar-kit/docs/intro/
MIT License
429 stars 73 forks source link

Blank header on Switching from Week to Day view at first mount of screen. #128

Closed SwikarBhattarai closed 1 week ago

SwikarBhattarai commented 1 week ago

https://github.com/user-attachments/assets/206c5e31-a88c-43cd-a4d1-13178e6cd682

At first mount of screen, the default number of days is 7 then i switched to day view with number of days 1. The header becomes blank. @howljs

howljs commented 1 week ago

Switching between day and week views seems to be having performance issues. For now, you can use the method of separating the day calendar into a separate component.

Example:


viewMode === "day" ? <CalendarContainer>…</CalendarContainer> : <CalendarContainer>…</CalendarContainer>
SwikarBhattarai commented 1 week ago

Thanks, it works fine now .

howljs commented 1 week ago

I will notify you when I have fixed this issue. At that point, you can merge the code back into a single component.

howljs commented 1 week ago

ah. you can try change key of component. I’m a bit busy right now, I’ll send you the sample code later

howljs commented 1 week ago

@SwikarBhattarai Since the layout of the day mode is different from the week mode, there are some issues with switching between them. For now, you can handle it this way—changing the key, it will force refresh the calendar.

Screenshot 2024-10-14 at 16 31 19

This means you’ll set scrollToNow to false and manually control the scrolling on the first load using onLoad and customRef.

Screenshot 2024-10-14 at 16 56 39