Subsequent Agenda Item Not Updating

[nhuffman-3rdeyecam]

Description

I'm working on a react-native app, using the react-native-calendars Agenda feature.

I initialize the agenda with two items, containing a title and a description. Initially, the description is hidden.

I want to have the ability to click on an agenda item, and it expands, revealing it's description, and upon clicking again, it condenses to it's original state.

I have achieved this functionality with the first agenda item. However, upon clicking the second agenda item, nothing happens. The only way to display the description of the second item, is to click it, and then click away to a different date, and then click back. And the same process is required to hide its description.

I figured it was an issue with state, but it doesn't seem to make sense that it works for the first agenda item and not the second.

Here is my tsx script:

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Agenda } from 'react-native-calendars';

const Calendar: React.FC = () => {
  const [expandedItem, setExpandedItem] = useState<string | null>(null);

  const currentDate = new Date().toISOString().split('T')[0];

  const items = {
    [currentDate]: [
      { id: '1', title: 'Item 1', description: 'Dummy text for Item 1.' },
      { id: '2', title: 'Item 2', description: 'Dummy text for Item 2.' },
    ],
  };

  const renderItem = (item: { id: string; title: string; description: string }) => {
    const isExpanded = expandedItem === item.id;

    return (
      <View style={styles.itemContainer}>
        <TouchableOpacity onPress={() => setExpandedItem(isExpanded ? null : item.id)}>
          <Text style={styles.itemTitle}>{item.title}</Text>
        </TouchableOpacity>
        {isExpanded && <Text style={styles.itemDescription}>{item.description}</Text>}
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <Agenda
        items={items}
        renderItem={renderItem}
        selected={currentDate}
        theme={{
          agendaDayTextColor: 'blue',
          agendaDayNumColor: 'blue',
          agendaTodayColor: 'blue',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  itemContainer: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  itemTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  itemDescription: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});

export default Calendar;

Environment

• npm ls react-native-calendars:
  └── [email protected]
• npm ls react-native:
  ├─┬ @react-native-community/[email protected]
  │ └── [email protected] deduped
  ├─┬ @react-navigation/[email protected]
  │ ├─┬ @react-navigation/[email protected]
  │ │ └── [email protected] deduped
  │ └── [email protected] deduped
  ├─┬ @react-navigation/[email protected]
  │ └── [email protected] deduped
  ├─┬ @react-navigation/[email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ ├─┬ @expo/[email protected]
  │ │ └── [email protected] deduped
  │ ├─┬ @react-navigation/[email protected]
  │ │ └── [email protected] deduped
  │ └─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ ├─┬ [email protected]
  │ │ └── [email protected] deduped
  │ ├─┬ [email protected]
  │ │ └── [email protected] deduped
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  └─┬ [email protected]
  └─┬ @react-native/[email protected]
  └── [email protected] deduped

Also specify:

1. Device/emulator/simulator & OS version:

I've tried on both of these:

• Medium phone - Android 15.0 ("VanillaIceCream") | x86_64
• Iphone 11 iOS 17.7.1 - Expo Go

Reproducible Demo

• Create react-native project
• Add the Calendar screen
• Render it in index.tsx

Screenshots