Agenda dates disappearing on component load

[Hassaanhmd]

Hi everyone, first time posting a question here so please bear with me.

I have been working on a project in react native where I want the user to be able to create, view, edit and delete calendar events. I have been implementing react-native-calendars' Agenda component. However, I have begun to run into an issue where when the app loads, the dates at the top disappear after about 1/2 seconds (as show in the screenshot). The dates would reappear once an event has been added or if i expand calendar and reset it to normal (single date row at the top)

My general process is that I have a function called initCalendar(). In this function data is retrieved from a database which is then refactored to match the required syntax for Agenda (that is with date [YYYY-MM-dd] as the key) and set to the state variable "events".

If you require any code snippets, let me know as I am not sure what would be important to share.

I would be grateful for any advice.

I originally had the events be refactored etc then passed into a custom component that holds the Agenda but i thought that may have been the reason but now that I have refactored it and tried checking the format of my event data after refactoring and all seems good. When i launch my app though, the dates appear for like 1/2 a second then disappear again I am lost.

This issue only occurs on my Android emulator running API 35. Tried on iOS and browser and no issues there.

Here is an image of what I mean:

[giannosdev]

Hello, thanks for reporting. Did you manage to find a solution?

[Hassaanhmd]

Hello, thanks for reporting. Did you manage to find a solution?

Hi, no I haven't. I cannot seem to understand the reason, tried refactoring code on my side but still same issue. Any idea as to why this might happen?

[ojag95]

I have this same bug, did someone find a solution?
A previous version maybe?

[Hassaanhmd]

Any progress by anyone?

[ojag95]

Any progress by anyone?

No 😢

[Nivnivu]

For now i found out that i can force the number to come back but its still blinks ones.
Like this -

    useEffect(() => {
        if (Platform.OS === "android") {
            const timeoutId = setTimeout(() => {
                if (calendarRef.current) {
                    calendarRef.current.toggleCalendarPosition(false);
                    setIsCalendarOpen(true);
                }

                const timeoutId2 = setTimeout(() => {
                    if (calendarRef.current) {
                        calendarRef.current.toggleCalendarPosition(false);
                        setIsCalendarOpen(false);
                    }
                }, 1000);

                return () => clearTimeout(timeoutId2);
            }, 500);

            return () => clearTimeout(timeoutId);
        }
    }, []);

my agenda -

 <Agenda
            ref={calendarRef}
            items={items}
            renderItem={renderItem}
            renderEmptyDate={renderEmptyDate}
            rowHasChanged={(r1: AgendaItemInfo, r2: AgendaItemInfo) => r1.name !== r2.name}
            showClosingKnob={true}
            selected={today}
            onCalendarToggled={(enabled: boolean) => setIsCalendarOpen(enabled)}
            style={styles.agenda}
            theme={{
                agendaDayTextColor: "#ee6726",
                agendaDayNumColor: "#2958a7",
                agendaTodayColor: "#ff3b30",
                agendaKnobColor: "#2958a7",
            }}
        />

its an ugly fix, waiting for someone to solve it.

[ArturSousaFerreira]

same problem here android and on ios Agenda initially expanded and non-responsive 😔

[akravchukabto]

Hi, I have observed the same behaviour, both on IOS and Android
Looks like for me it is somehow related to
onCalendarListLayout method in node_modules/react-native-calendars/src/agenda/index.js
when I wrap
this.calendar?.current?.scrollToDay call in setTimeout inside it seems to work fine.
Still I have been looking deeper and have no idea whats the reason for the issue.

[Nivnivu]

Hi, I have observed the same behaviour, both on IOS and Android
Looks like for me it is somehow related to
onCalendarListLayout method in node_modules/react-native-calendars/src/agenda/index.js
when I wrap
this.calendar?.current?.scrollToDay call in setTimeout inside it seems to work fine.
Still I have been looking deeper and have no idea whats the reason for the issue.

It is coming from the list layout , the list is to big therefore dont render. I actually gets an error message specifing the exact file you mentioned.
There is another issue about it, i managed to hacked a way around for all bugs, but if you can fix the module will be amazing

[akravchukabto]

Hi, @Nivnivu , not sure if it is because of long list as I have only 101 items.
I will share my progress in case I have any.

Update.
I think it is somehow related to setTimeout(() => {this.setState({ calendarIsReady: true })}, 0); being called in onScrollPadLayout in node_modules/react-native-calendars/src/agenda/index.js
There is a comment before it mentioning
//delay rendering calendar in full height because otherwise it still flickers sometimes
removing this setTimeout also fixed the issue for me, but flickering at start has appeared
So I assume there are 2 possible options for now:

1. Replace setTimeout(() => {this.setState({ calendarIsReady: true })}, 0); with setTimeout(() => { this.setState({ calendarIsReady: true }); this.calendar?.current?.scrollToDay(this.state.selectedDay, this.calendarOffset(), false); }, 0); in onScrollPadLayout
2. Wrap this.calendar?.current?.scrollToDay call in onCalendarListLayout with setTimeout

[Nivnivu]

Hi @akravchukabto, I meant the list of days coming from the Agenda module—not the one used for rendering staff (the one that disappears). After modifying the module, I received a message stating that the list of days is too long and should be wrapped in useMemo.

[voulgarakis]

any updates on this? instead of editting the code in node_modules?

[akravchukabto]

I think merge request with fix should be created, if anyone has better proposals than moving this.calendar?.current?.scrollToDay to setTimeout kindly post your solution