Calendar mapping delay when initialized

[oguzydz]

Description

I have a component that displays a specific day with an event. However, there appears to be a rendering issue, as shown in the screen capture video. Upon examining the code to understand how each day is rendered, it seems that the Calendar uses a Flatlist to map the months, with each month containing weeks. When the mapping process encounters a month with weeks of days, these weeks are pushed into an array. The array then undergoes a further mapping process. The result is similar to what's depicted in the video.

Expected Behavior

There needs to have loading skeleton of each week of the days. Also we might use a callback prop of calendar when loading executing.

Environment

react-native-calendars@1.1297.0 | react-native@0.70.5

Also specify:

1. Device/emulator/simulator & OS version: iOS

Screenshots

https://github.com/wix/react-native-calendars/assets/36233491/8188ce58-a314-4953-83c7-dcdb32928df4

[dionart]

having the same issue, has anyone found any fixes?

[grkemtneri]

same issue, did you find any solution ?

[oguzydz]

I keep getting it, and this calendar is in production too. Any thoughts?

[oguzydz]

same issue, did you find any solution ?

No, same as well @grkemtneri

[grkemtneri]

I changed the /react-native-calendars/src/calendar-list/item.js using patch-package @oguzydz

 if (!visible) {
    return (<View style={[textStyle,{alignSelf:'center',justifyContent:'center'}]}><ActivityIndicator size={'large'}color={'#793FB5'}/></View>);
 }

[OrianFrenchAppWeb]

I changed the /react-native-calendars/src/calendar-list/item.js using patch-package @oguzydz

 if (!visible) {
    return (<View style={[textStyle,{alignSelf:'center',justifyContent:'center'}]}><ActivityIndicator size={'large'}color={'#793FB5'}/></View>);
 }

This should be merged. There is no use case to hard display dateString.