react-native-calendars: Agenda Component: It doesn't re-render after updating data

Description

Agenda does not re-render calendar events after updating one of those events. In our application, we want to remove an event whenever it is clicked. After clicking on an event, the complete agenda disappears (except header).

Expected Behavior

I clicked on an event and called an API to remove that event from the dates lis. It should remove that event and re-render other events.

Observed Behavior

The complete Agenda (except header disappeared.

Environment

npm ls react-native-calendars: react-native-calendars@1.1264.0
npm ls react-native: react-native@0.63.2

Also specify:

Screenshots

Before booking an event: ss1

After booking an event: ss2

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 17

Most upvoted comments

Also, inside of node_modules/react-native-calendars/src/agenda/reservation-list/reservation.js there is a shouldComponentUpdate method. Removing it or commenting it out, lets you update the agenda on updates to the view.

I recommend this one from the workaround above. This solution lets you persist the layout position on the list without restarting the list and taking you all the way to the top.

You can apply the change and then patch the package until is fixed I guess. Here’s a link on how to patch a package: https://www.youtube.com/watch?v=2AVs-Yh1bS8&t=108s

Hope it helps future readers 😃

+10

abiespinal04 on Dec 16, 2021

I have the same trouble, the Calendar does not re-render on data change.

AlexandreMouyen on Nov 5, 2021