react-native-calendars: `Agenda` list Items incorrectly rendering on update

Hello – I think I found a bug in the AgendaList due to the current key extraction.

When I navigate back in the agenda, e.g. from a Monday to Sunday, and if both of those days have arrays of events, the FlatList isn’t rendering the correct item. Instead, an item previously rendered gets used. I’m pretty sure this is because of the string coercion of the indices used in the current key extraction:

https://github.com/wix/react-native-calendars/blob/74bc7fe05ed3883d3d8cbd56e3cd5a565543c385/src/agenda/reservation-list/index.tsx#L261:

  keyExtractor = (_item: DayAgenda, index: number) => String(index);

this seems to me like a pretty good example of the index-key anti pattern described here: https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

This seems straightforward to fix, by at least exposing a keyExtractor prop to the AgendaList.

I’ll put together a minimal reproduction of this when I get the time.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 18

Most upvoted comments

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.

stale[bot] on Nov 19, 2022

I think I figure it out we need to override reservationsKeyExtractor to get the right id from the data

 <Agenda
        items={selectedDates}
        renderItem={renderItem}
        showOnlySelectedDayItems={true}
  reservationsKeyExtractor={(item) => {
          console.log('item', item);
          return item?.reservation?.id; ---> replace with proper id name 
        }}
        
        />

minaairsupport on Aug 11, 2022