Problem with rendering item for Agenda

[Delocy]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

The problem is that when i press a specific date and made changes to the task, the tasks other than the first one doesnt update instantly. When i put console.log to check only shows that the first task is being rendered 3 times, even though there is 2 tasks for that date.

Only when i press the date again. i can see task 2 out for the console.log

Expected Behavior

i created a complete button for my to do list, when i press the complete button, it udpates my firebase changes the item.completed for the item which is supposed to make a dash across the task name.

Observed Behavior

I had to select the date again for the dash to show. But when i did the same thing for the first task, the dash shows instantly. What could the problem be?

If there's an error message, please paste the full terminal output and error message in this code block:

https://github.com/wix/react-native-calendars/assets/94375191/87ee388a-6fdc-4fd8-a592-f7336b89ee73

const handleComplete = async () => {
    try {
      const taskRef = doc(db, 'tasks', selectedTaskId);
      const taskDoc = await getDoc(taskRef);
      if (taskDoc.exists()) {
        const currentCompleted = taskDoc.data().completed || false;
        await updateDoc(taskRef, {
          completed: !currentCompleted,
        });
        setSelectedTask((prevTask) => ({
          ...prevTask,
          completed: !currentCompleted,
        }));
      }
      closeModal();
      loadTasks();
    } catch (error) {
      console.error('Error toggling completed status:', error);
    }
  };

const renderItem = (item) => {
    const startTime = new Date(item.startTime.seconds * 1000); // Convert timestamp to Date object
    const endTime = new Date(item.endTime.seconds * 1000);

    const startTimeString = startTime.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
    const endTimeString = endTime.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });

    const textDecoration = item.completed ? 'line-through' : 'none';

    return (
      <TouchableOpacity
        style={{ marginLeft: 20, marginRight: 20, marginTop: 20 }}
        onPress={() => openModal(item, item.id)}
      >
        <Card style={styles.card}>
          <Card.Content style={styles.cardContent}>
            <View style={styles.cardTextContainer}>
              <Text style={[styles.cardText, { textDecorationLine: textDecoration }]}>{item.name}</Text>
              <Text style={styles.cardTextDescription}>{item.description.toString()}</Text>
              <Text style={styles.cardTextDescription}>{startTimeString} - {endTimeString}</Text>
              <View style={{ flexDirection: 'row', marginTop: 8 }}>
                {item.tags.map((tag, index) => (
                  <Tag key={index} text={tag} />
                ))}
              </View>
            </View>
          </Card.Content>
        </Card>
      </TouchableOpacity>
    );
  };

Error text goes here!

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

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

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

[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.

[xogus303]

In my case, I gave the state of the item as a key value through the reservationsKeyExtractor property, and when that value changed, it was re-rendered.

[hughyyyy]

reservationsKeyExtractor

How did you do it, can you please shed some lights on this?

[akravchukabto]

reservationsKeyExtractor

How did you do it, can you please shed some lights on this?

Hi, @hughyyyy as you can see from the specification (property) reservationsKeyExtractor?: (item: DayAgenda, index: number) => string so you need to pass a function that will return unique string per each your card item in my case it was something like

reservationsKeyExtractor={((item, index) => { return item.reservation?.task?.id || index })}

hope that helps