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

[akravchukabto]

I PR was created #2617

[magnus80a]

We started seeing this when we upgraded to React Native 0.76.7.

[srinu6]

with this fix, I am observing flickering of calendar, anyone fixed the flickering issue?

[iansummerlin]

On iOS

I get this when viewing past dates

If they're even further back I get

This in the future dates

I get this for this month

:/

<Agenda
        items={agendaItems}
        selected={selectedDate}
        onDayPress={(day: DateData) => {
          scrollToDate(day.dateString);
          setSelectedDate(day.dateString);
        }}
        onDayChange={(day: DateData) => setSelectedDate(day.dateString)}
        disabledByDefault={false}
        theme={calendarTheme}
        markedDates={markedDates}
        hideKnob={false}
        allowSelectionOutOfRange={false}
        firstDay={1}
        pastScrollRange={CALENDAR_PAST_RANGE_MONTHS}
        futureScrollRange={CALENDAR_FUTURE_RANGE_MONTHS}
        hideExtraDays
        rowHasChanged={(r1: CalendarAgendaItem, r2: CalendarAgendaItem) =>
          r1.id !== r2.id
        }
        renderList={(_listProps: ReservationListProps) => {
          return (
            <FlatList
              ref={flatListRef}
              data={flatAgendaItems}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => <Item item={item} />}
              getItemLayout={getItemLayout}
              onContentSizeChange={() => {
                if (flatListRef.current) {
                  flatListRef.current.scrollToEnd({ animated: true });
                }
              }}
              onLayout={() => {
                if (flatListRef.current) {
                  flatListRef.current.scrollToEnd({ animated: true });
                }
              }}
            />
          );
        }}
      />

seems to me the past scroll range and the future scroll range have caused this issue

i have just set a min and maximum date and a slightly larger past and future scroll range and it seems to have fixed it for me

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dangthequan]

I don't know why, but set Agenda's properies like below works for me. pastScrollRange={1} futureScrollRange={1}

[shifaurrehman]

same issue