I found a jitter that originates from the Header, which I need to render within the same scroll container. To achieve this, I use the customCalendarHeader prop to check if the displayed month matches the current month, and then render a small banner above the calendar accordingly.
To resolve the issue, I modified the FlatList that is rendering by adding the ListHeaderComponentProp and passing the header component to it. By doing this, the jitter disappears. This would be a great implementation on the library. Also to make sure that we can add more components in the same scroll container.
Expected Behavior
I incorporated a header into the calendar list component's scroll container by using the customCalendarHeader prop to render a small banner above the calendar when the displayed month matches the current month. I expected the calendar to scroll smoothly without any jitters, even when months requiring additional data are being scrolled into view.
Observed Behavior
After modifying the FlatList by adding the ListHeaderComponentProp and passing the header component to it, the jitter issue disappeared, resulting in smooth scrolling as initially expected.
Environment
Please run these commands in the project folder and fill in their results:
react-native-calendars@1.1305.0
react-native@0.74.1
This is happening on both iOS/Android emulators and physical devices.
Reproducible Demo
I don't have a demo but have a video to show the actual behaviour inside the component.
Description
I found a jitter that originates from the Header, which I need to render within the same scroll container. To achieve this, I use the
customCalendarHeaderprop to check if the displayed month matches the current month, and then render a small banner above the calendar accordingly.To resolve the issue, I modified the
FlatListthat is rendering by adding theListHeaderComponentPropand passing the header component to it. By doing this, the jitter disappears. This would be a great implementation on the library. Also to make sure that we can add more components in the same scroll container.Expected Behavior
I incorporated a header into the calendar list component's scroll container by using the
customCalendarHeaderprop to render a small banner above the calendar when the displayed month matches the current month. I expected the calendar to scroll smoothly without any jitters, even when months requiring additional data are being scrolled into view.Observed Behavior
After modifying the
FlatListby adding theListHeaderComponentPropand passing the header component to it, the jitter issue disappeared, resulting in smooth scrolling as initially expected.Environment
Please run these commands in the project folder and fill in their results:
react-native-calendars@1.1305.0react-native@0.74.1This is happening on both iOS/Android emulators and physical devices.
Reproducible Demo
I don't have a demo but have a video to show the actual behaviour inside the component.
Screenshots
https://github.com/wix/react-native-calendars/assets/57766069/651ce6e1-9f2d-4626-a83d-3e9b81800351